HTML - 标签语法

时间 2019-12-01

标签 html 标签语法栏目 HTML 繁體版

原文原文链接

HTML 标签语言

概念

　　 超文本标记语言，是一种用于建立网页的标记语言css

ps： html

　　不是编程语言编程

　　利用标签来描述网页windows

　　扩展名：.html .htm后端

语法规范

标签不区分大小写, 推荐小写
双标签必须写完整 ( 浏览器不会报错的, 并且自动补全可是最终效果很大可能性影响总体布局 )
不用标签的形式的内容会被完整的原内容进行展现
合理的注释 "  " 和锁紧增长代码的可读性

文档结构

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>css样式优先级</title>
</head>
<body>

</body>
</html>

属性说明浏览器

　　<!DOCTYPE html> 　声明为HTML5文档。服务器

　　<html></html> 　　　是文档的开始标记和结束的标记。是HTML页面的根元素，在它们之间是文档的头部(head)和主体(body)。编程语言

　　<head></head> 　　定义了HTML文档的开头部分。它们之间的内容不会在浏览器的文档窗口显示。包含了文档的元(meta)数据。布局

　　<title></title> 　　　　定义了网页标题，在浏览器标题栏显示。post

　　<body></body> 　　之间的文本是可见的网页主体内容。

标签的分类

标签的分类一

　　自闭合标签：单标签

　　闭合标签：双标签

标签的分类二

　　块级标签：就是独占一行，能够自行设置宽高！如：先学到的 div,p,h1-h6

　　内联标签：按内容占位，高度和广度是由本身的内容填充的如： a,br,img

判断块级标签和内联标签的方法

　　1. 是否独占一行（能够经过设置背景颜色去判断）

　　2. 是否能够单独为元素设置高度和宽度。

标签关系

标签嵌套会产生祖先和后代 , 父子, 兄弟关系

父子关系

外层父元素内层子元素

在使用嵌套的时候推荐使用父子结构来实现下拉菜单效果

祖先和后代

外层全部元素统称祖先元素

内层元素称为后代元素

兄弟关系

平级元素之间互为兄弟元素

head 内的经常使用标签

title

设置网页标题

<title></title>

style

设置网页样式

<style></style>

link

引入外部样式表文件

<link/>

script

引入外部JS 代码用

<script></script>

body内经常使用标签

基本标签(内联标签)

　　内联标签不须要另外一起一行，以文本大小为定义大小

<b>加粗</b>
<i>斜体</i>
<u>下划线</u>
<s>删除</s>

<!--换行-->　　<br>

<span></span>

基本标签(块级标签)

　　块级标签须要另起一行

<h1>标题1</h1>
<h2>标题2</h2>
<h3>标题3</h3>
<h4>标题4</h4>
<h5>标题5</h5>
<h6>标题6</h6>
<!--水平线-->　　<hr>
<div></div>
<p></p>

　浏览器默认字体大小为 16px, 渲染的时候小于 12px 的会强制改为 12px

　　h1 标签的字体大小为 32px

　　h4 标签的字体大小为 16px

　　h6 标签的字体大小为 12px

　　浏览器会对代码文本中的换行和 多余的空格 会解析成一个空格 ( 所以会致使格式不对应 )

文本标签属性

<h1 align = "center / left / right"> 标题 </h1>

　　默认都是左对齐, 其实此内容可彻底被 css 样式替代

div 和 span 的区别

<div></div> ： <div>只是一个块级元素，并没有实际的意义。主要经过CSS样式为其赋予不一样的表现. 
<span></span>： <span>表示了内联行(行内元素),并没有实际的意义,主要经过CSS样式为其赋予不一样的表现.

ps：

　　p 标签是个特异点，不能够嵌套其余块级标签，嵌套p标签也不行

字符实体

$lt;　　　　<
$gt;　　　　>
&nbsp;　　空格
&yen;　　 ¥ 人民币符号
&copy;　　© 版权符号

特殊标签

图片标签

<img src="图片的路径" alt="图片未加载成功时的提示" title="鼠标悬浮时提示信息" width="宽" height="高">

ps：

　　宽高两个属性只用一个会自动等比缩放

　　windows 下若是 src 属性使用绝对路径时须要将全部的反斜线 " \ " 改为斜线 " / "

　　路径要补全文件名且加后缀 ( 不加后缀被认为是目录 )

超连接标签

<a href="跳转路径" target="跳转后打开方式" >点我</a>

属性详细

href 属性指定目标网页地址。该地址能够有几种类型：
- 绝对URL - 指向另外一个站点(好比 href="http://www.jd.com)
- 相对URL - 指当前站点中确切的路径(href="index.htm")
- 锚URL - 指向当前页面中的锚(href="#top") 取值为 "#" 表示当前页面
target 属性指定打开方式：
- _blank表示在新标签页中打开目标网页
- _self表示在当前标签页中打开目标网页(默认为此方式)

锚点实例

建立 a 标签 href 加 # 表示跳转 (不加 # 被识别为新链接)

建立 a 空标签来实现被跳转 ( 指定内部属性 name 或者 href 为约定词)

<a href="#xxx">跳转到当前页面锚点 xxx位置 </a>
<a href="abc.html#xxx">跳转到 abc.html 文件的锚点 xxx 位置  </a> 


</-- 添加锚点 -->
<a name="xxx"></a> 
<a href="xxx"></a>

列表

无序 ( unordered list )

<ul type="disc">
<li>第一项</li>
<li>第二项</li>
</ul>

type属性

disc 实心圆点(默认值)
circle 空心圆圈
square 实心方块
none 无样式

有序 ( ordered list )

<ol type="1" start="2">
<li>第一项</li>
<li>第二项</li>
</ol>

type属性

1 数字列表(默认值)
A 大写字母
a 小写字母
Ⅰ 大写罗马
i 小写罗马

标题列表

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

表格

<table border="1">
    <thead>
        <tr>
            <td>id</td>
            <td>name</td>
            <td>age</td>
        </tr>
    </thead>

    <tbody>
        <tr>
            <th>1</th>
            <th>yang</th>
            <th>18</th>
        </tr>

        <tr>
            <th>2</th>
            <th>tuo</th>
            <th>13</th>
        </tr>
    </tbody>
</table>

tr 　　定义表格行标签

th 　　填入表格标题首行数据单元格标签, 自带加粗和居中

td 　　填入表格数据单元格标签

table 属性

border　　表格边框粗细
cellpadding　　内边距文本内容与边框的距离
cellspacing　　外边距表格内单元格中间的边距
width　　宽像素单位百分比.（最好经过css来设置长宽）
bgcolor　　　　背景颜色

rowspan　　单元格竖跨多少行
colspan　　单元格横跨多少列（即合并单元格）

tr / td / th 属性

bgcolor　　行背景颜色
width / height　　　宽 / 高
align　　水平方向文本对齐 ( 默认居左 )
- 可取值　　left / right / center

valign　　

可取值　　top /

ps:

　　知道这些都没啥用. 咱们不会使用这些东西来处理咱们的样式

　　可是结构相关属性须要重点理解

　　　　合并单元格的时候, 不会帮助你删掉被合并的单元格,

　　　　而是将被合并的单元格日后推, 所以破坏原有结构

　　　　所以必需要你手动删除被推出的单元格

　　跨列合并:　　删除当前行多余的单元格

　　跨行合并:　　删除其后行多余的单元格

　　tbody / thead / tfoot 不是必填项. 浏览器也会帮咱们自动添加

　　默认全部行自动加入到 tbody 中

form 表单

概念

　　表单收集用户信息并向服务器提交，从而实现用户与Web服务器的交互

表单属性

accept-charset 　　规定在被提交表单中使用的字符集（默认：页面字符集）　　　　　　
action 　　规定向何处提交表单的地址（URL）（提交页面）　　　　　　
autocomplete 　　规定浏览器应该自动完成表单（默认：开启）　　　　　　
enctype 　　规定被提交数据的编码（默认：url-encoded）　　　　　
method 　　规定在提交表单时所用的 HTTP 方法（默认：GET）　　　　　　
name 　　规定识别表单的名称（对于 DOM 使用：document.forms.name）　　　　　　
novalidate 　　规定浏览器不验证表单 (浏览器会自带一个验证功能) 　　　　　　
target 　　规定 action 属性中地址的目标（默认：_self）

input系列标签

text    　　　    单行输入文本     <input type=text" /> password       密码输入框       <input type="password" /> date    　　　   日期输入框       <input type="date" /> checkbox      复选框　　　      <input type="checkbox" checked="checked" /> radio    　　  单选框    　　    <input type="radio" /> submit        提交按钮　　      <input type="submit" value="提交" /> reset    　　  重置按钮    　　  <input type="reset" value="重置" /> button    　　 普通按钮　　      <input type="button" value="普通按钮" /> hidden    　   隐藏输入框    　  <input type="hidden" /> file    　 　   文本选择框    　  <input type="file" />

属性说明

name　　表单提交时的“键”,目的为提交后端的数据标识符(注意和id的区别)

value　　

　　表单提交时对应项的值

　　type="button" / "reset" / "submit"时

　　　　为按钮上显示的文本内容 , 必填

　　type="text" / "password" / "hidden" 时

　　　　为输入框的初始值, 设置为默认值 , 不设置也不要紧, 用户输入能够覆盖默认值做为 value 传回

　　type="checkbox" / "radio" / "file" 时

　　　　为输入相关联的值 , 必填

checked　　radio 和 checkbox 默认被选中的项

readonly　　text 和 password 设置只读 disabled：禁用,全部input均适用

ps：

1. 当 input 中有文件上传的时候必需要对 form表单作如下更改

<form action="/xxx" method="post" enctype="multipart/form-data">
    ...
</form>

2. 当有 AJAX 提交的时候不要用 submit ，要用 button

3. 一组 radio / checkbox 类型的时候, 必需要求 name 值同样才能够指定单选或者复选

4. 功能按钮 submit / reset 自带 value 为 "提交" / "清空" , 且不须要设置 name 属性, value 能够设置自定义显示文本

select 标签

<form action="" method="post">
<select name="city" id="city">
<option value="1">北京</option>
<option selected="selected" value="2">上海</option>
<option value="3">广州</option>
<option value="4">深圳</option>
</select>
</form>

属性说明

multiple　　布尔属性，设置后为多选，不然默认单选
disabled　　禁用
selected　　默认选中该项
value　　定义提交时的选项值

label标签

label 元素不会向用户呈现任何特殊效果。

<form action="">
<label for="username">用户名</label>
<input type="text" id="username" name="username">
</form>

<label> 标签的 for 属性值应当与相关元素的 id 属性值相同。

可实现点击label标签的时候自动跳转到 for所指定的的标签.实现相同的点击效果

textarea多行文本

<textarea name="" id="" cols="30" rows="10"></textarea>

属性说明

name　　名称
rows　　行数
cols　　　　列数
disabled　　禁用