当前位置： 移动技术网 > IT编程>网页制作>CSS > HTML基本标签

HTML基本标签

2018年10月22日  | 移动技术网IT编程  | 我要评论

痞子英雄陈意涵,九阴无根门吧,仲雨阳

html 是用来描述网页的一种语言。
html 指的是超文本标记语言 (hyper text markup language)
html 不是一种编程语言，而是一种标记语言 (markup language)
标记语言是一套标记标签 (markup tag)
html 使用标记标签来描述网页

html基本标签

<!doctype html>

html5中<!doctype html>相当于让浏览器以标准模式解析渲染页面，如果你的页面没有doctype的声明，那么默认就是以怪异模式去渲染解析，那么，在不同的浏览器就会显示不同的样式。
<!doctype> 声明必须是 html 文档的第一行，位于 标签之前。

<html> 与 </html>

<html>与 &lt/html>标签限定了文档的开始点和结束点，其中由<head>和<body>标签组成。

<head>与</head>

<head>与</head>定义html文档的头部，里边的内容并不会给读者显示，只是描述了文档的各种属性和信息，包括文档的标题、在 web 中的位置以及和其他文档的关系等。例如引入css文件。

<body>与</body>

<body>与</body>中存放文档的主体内容，用来显示给读者。

<meta>

<meta> 标签永远位于 head 元素内部。
meta标签共有http-equiv和name两个属性。

<meta name="keywords" content="内容">//这里的content的值中写网站的相关关键字，用来给搜索引擎去搜索。
<meta name="description" content="内容">//这里的content的值写一些网站的相关介绍，一段描述性的话。
<meta http-equiv="refresh" content="2;url=https://www.baidu.com"> //指网页打开后经过2秒刷新到url指定的页面，不填url默认为原打开的网页
<meta http-equiv="content-type" charset=utf8">//编码方式

<title>与</title>

<title>与</title>中的内容显示在浏览器窗口的标题栏或状态栏上，用来定义文档的标题。

<link>

<link>标签用来连接外部资源。

<link rel="icon" href="    .ico">用来定义浏览器窗口的标题栏或状态栏上的图标。
<link rel="stylesheet" type="text/css" href="theme.css" />连接样式表

<hn>与</hn>

标题标签，n可以为1-6.

<p>与</p>

段落标签，是块级标签

<b>与</b>

加粗文本

<del>与</del>

表示删除文本，例如<del>这里是删除</del>会显示为这里是删除

<ins>与</ins>

下划线文本，例如<ins>这里有下划线</ins>会显示为这里有下划线

<br>

插入一个换行符

<hr>

插入一条水平线

<div>与</div>

<div>就像是一个盒子，限制了一块区域，里边可以存放其他内容，是块级标签，一般用来通过css定义样式

<span>与</span>

<span>和<div>类似，但它是一个内联标签。

<img>

img用来插入图片，有很多属性

<img src="url"  alt="图片未加载成功显示的文本"  title="鼠标悬浮时显示的文本" width="300px" height="400px">

<a>

超链接标签或者为锚标签

<a href="https://www.cnblogs.com/" target="_block">博客园</a>//target="_block以一个空白页打开
<a href="#id">博客园</a>//跳转到id为id的锚

<ul>

无序列表

<ul>
　　<li>列表项</li>
　　<li>列表项</li>
　　<li>列表项</li>
</ul>

<ol>

有序列表

<dl>

定义列表

<dl>
 <dt>标题</dt>
   <dd>内容</dd>
   <dt>标题</dt>
   <dd>内容</dd>
</dl>

<table>

表格标签

<table border="1">
  <tr>
    <th>month</th>
    <th>savings</th>
  </tr>
  <tr>
    <td>january</td>
    <td>$100</td>
  </tr>
</table>

th为表头，td为单元格，tr定义表格行
属性有
border 定义表格边框宽度
cellpadding 规定单元边沿与其内容之间的空白
cellspacing 规定单元格之间的空白
width 表格宽度
等。。

<form>

属性

表单标签，用于接收用户的输入，完成与后端的传输
action属性规定当提交表单时向何处发送表单数据，值为url
method属性规定用于发送 form-data 的 http 方法。
　　get: 1.提交的键值对.放在地址栏中url后面. 2.安全性相对较差. 3.对提交内容的长度有限制
　　post:1.提交的键值对 不在地址栏. 2.安全性相对较高. 3.对提交内容的长度理论上无限制.

元素

<input>

属性：type：
　　　　　text 文本输入框
　　　　　password 密码输入框
　　　　　radio 单选框
　　　　　checkbox 多选框
　　　　　submit 提交按钮
　　　　　button 按钮
　　　　　file 提交文件：form表单需要加上属性enctype=”multipart/form-data”，请求方式必须是post
　　　　　reset 刷新表单，重置表单
　　 name：表单提交的键名，如一套多选框或单选框的name应该一样
　　 value：表单提交的值
　　 checked: 默认被选中
　　 readonly： 将表单内容设置为只读，即不能修改，但可以选择，可以复制，用于text或password
　　 disabled：表示禁用该input元素

<select>　　

下拉选项

<select>
  <option value="北京">北京</option>
  <option value="上海">上海</option>
  <option value="天津">天津</option>
  <option value="广州">广州</option>
</select>

属性：name：键名
　　　size：显示的选项个数
　　　multiple：多选
　　　option中selected属性表示默认被选中

<textarea>　

文本域
属性：name：键名
　　　rows：行数
　　　cols：列数

<label></label>　

为input元素定义标记
其中for属性可以指定id，表示与其绑定，点击lable中的内容，会自动转移到绑定的元素中

<fieldset></fieldset>　

为表单元素分组

<form>
  <fieldset>
    <legend>健康信息</legend>
    身高：<input type="text" />
    体重：<input type="text" />
  </fieldset>
</form>

显示为

您可能感兴趣的文章:

如对本文有疑问，请在下面进行留言讨论，广大热心网友会与你互动！！ 点击进行留言回复

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网