HTML 标签语言
概念
超文本标记语言， 是一种用于创建网页的标记语言
ps：
不是编程语言
利用标签来描述网页
扩展名：.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> 定义了网页标题，在浏览器标题栏显示。
<body></body> 之间的文本是可见的网页主体内容。
标签的分类
标签的分类一
自闭合标签：单标签
闭合标签：双标签
标签的分类二
块级标签：就是独占一行，可以自行设置宽高！如：先学到的 div,p,h1-h6
内联标签：按内容占位，高度和广度是由自己的内容填充的 如： a,br,img
判断块级标签和内联标签的方法
1. 是否独占一行（可以通过设置背景颜色去判断）
2. 是否可以单独为元素设置高度和宽度。
标签关系
标签嵌套会产生 祖先 和 后代 , 父子, 兄弟关系
父子关系
外层 父元素 内层 子元素
在使用嵌套的时候 推荐使用父子结构来实现下拉菜单效果
祖先和后代
外层所有元素统称 祖先元素
内层元素称为 后代元素
兄弟关系
平级元素之间互为 兄弟元素
head 内的常用标签
meta
设置标签属性 设置字符编码
<meta charset="UTF-8">
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; > 空格 ¥ ¥ 人民币符号 © © 版权符号
特殊标签
图片标签
<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 禁用