HTML 内容总结
W3C School:https://www.w3school.com.cn/
MDN:https://developer.mozilla.org/zh-CN/
1.
HTML 语法规范
-
1.1 基本规范
- HTML 标签是由尖括号包围的关键词，例如< html >
- HTML 标签大部分成对出现，称为双标签，例如< html >< /html >
- HTML 标签少部分为单标签，例如< br />， < img > (html5规定单标签可以也不用反斜杠)
-
1.2 标签关系
-
包含关系（父子关系）
<head> <title></title> </head> -
并列关系 (兄弟关系)
<head></head> <body></body>
-
2.
HTML 基本结构标签
-
第一个HTML页面
-
每一个网页都会有一个基本的结构标签（也称骨架标签），页面内容也是在这些基本标签上书写，HTML页面也称HTML文档 （demo.html）
<html><!-- 页面中最大的标签 称为根标签--> <head><!-- 文档的头部--> <title>我的第一个HTML页面</title><!-- 文档的标题--> </head> <body><!-- 文档的主体--> 内容部分 </body> </html>
-
3.
开发工具
-
VSCode
-
基本使用
- 新建文件（Ctrl+N）
- 保存（Ctrl+S）
- Ctrl+加号健，Ctrl+减号键 可以放大和缩小视图
- 生成页面骨架结构 （输入！按Tab键 ）
- 利用插件在浏览器中预览页面 （单击鼠标右键，在弹出窗口中点击“open in DefaultBrowser”）
-
安装插件
-
- Chinese 中文简体 -> install->重启
- open in browser ->install ->重新加载
- Auto RenameTag ->install ->重新加载 （用于改标签的插件）
- CSS Peek ->install-》重新加载 （追踪样式）
-
WebStorm
-
骨架新增代码的解释（位置固定）
- < !DOCTYPE > 文档类型声明标签
- 作用：告诉浏览器使用哪种HTML版本来显示网页
- lang 语言
- 作用：当前文档显示的语言
- en：英文
- zh-CN：中文
- 作用：当前文档显示的语言
- charset 字符集 （防止乱码）
- UTF-8：万国码
- < !DOCTYPE > 文档类型声明标签
4.
HTML 常用标签
-
标题标签< h1 > -< h6 > 双标签 ：标题重要性（字体大小）依次递减
-
段落标签< p > 双标签：定义段落 ，段和段中间缝隙大
-
换行标签 < br /> 单标签 ：强制换行，段和段中间缝隙小
-
文本格式化标签
-
粗体：
- < strong >内容< /strong > 推荐使用
- < b >内容< /b >
-
斜体：
- < em >内容< /em > 推荐使用
- < i >内容< /i >
-
删除线：
- < del >内容< /del > 推荐使用
- < s >内容< /s >
-
下划线：
- < ins >内容< /ins >推荐使用
- < u >内容< /u >
-
-
< div >和< span >标签 双标签：盒子 没有语义 可以认为用来装其他标签或内容的
- div ： 一个独占一行 ，大盒子
- span ：一行可以有多个， 小盒子
-
图像标签和路径
< img src=“图像路径” alt=“xinyue” title=“我是悬停文字”/>
-
图像标签 < img /> 单标签：用于定义html页面中的图像
- 必须属性
- src：用于指向图像路径
- 非必须属性：
- alt：用于替换文本，图像不能显示时，显示的文字
- title：用于提示文本，鼠标放到图像上，显示的文字
- width：设置图像的宽度
- height：设置图像的高度
- border：设置图像的边框粗细
- 必须属性
-
路径
-
相对路径：目标相对于HTML页面的位置
相对路径分类 符号 说明 同一级路径 图像文件位于HTML文件同一级 如< img src=“baidu.gif” /> 下一级路径 / 图像文件位于HTML文件下一级,imges位于HTML文件同一级 如< img src=“imges/baidu.gif” /> 上一级路径 …/ 图像文件位于HTML文件上一级 如< img src="…/baidu.gif" /> -
绝对路径：
- 目标在电脑中的位置：“ C:\Users\Administrator\Pictures”
- 完整的网络地址：“https://static.firefoxchina.cn/202102/VI4zYAPuVcJwz0olg4bmIxd6BxNNNgwh6HlBupVN.jpeg”
-
-
-
超链接标签< a > : 从一个页面链接到另一个页面
-
链接的语法格式 ：< a href=“跳转的目标路径” target=“目标窗口的弹出方式”>文本或图像</ a>
-
必须属性
-
href：用于指定链接目标的url地址
-
target：用于指定链接页面的打开方式
方式 意义 _self 默认值：在当前窗口打开 _blank 在新窗口打开 _top 一个页面可能会有很多层，top是指最顶层的框架 _parent 常用在iframe和frame中的子页面访问父页面中的对象
-
-
-
链接的分类
-
外部链接：href=“ http://www.baidu.com” ，网站与网站之间的跳转
-
内部链接：href=" demo.html"， 网站内部页面之间的跳转
-
空连接：如果当时没有确定链接目标时，< a href="#">首页</ a>
-
下载链接：如果href里面地址是一个文件或者压缩包，会下载这个文件 < a href=“img.zip”>首页</ a>
-
网页元素链接：在网页中的各种网页元素，都可以添加超链接 （标签之间可以嵌套）
-
锚点链接：点击链接，可以快速定位到页面中的某个位置
-
在链接文本的href属性中，设置属性值为某个标签的id名 ，如
< p id='two'>< /p> < a href="#two">第二季< /a>
-
-
-
5.
HTML 中的注释和特殊字符
-
5.1注释 程序不执行
“< !–” 开头 ," -->"结尾 ，快捷键 ：ctrl+/
-
5.2 特殊字符
特殊字符 描述 字符的代码 空格符  ； < 小于号 < ; > 大于号 > ; & 和 & ; ￥ 人民币 ¥ ; © 版权符号 © ; ® 注册商标 ® ; ° 摄氏度 ° ; ± 正负号 ± ; × 乘 × ; ÷ 除 ÷ ; ² 平方 ² ; ³ 立方 ³ ;
6.
表格标签
-
6.1表格的主要作用
- 用于显示，展示数据
-
6.2表格的基本语法
<table><!--表格标签--> <thead><!--表格的头部--> <tr><!--表格行--> <th></th><!--表头 展示的内容加粗居中显示--> </tr> </thead> <tbody><!--表格的主体--> <tr> <td></td><!--单元格--> </tr> </tbody> </table><!--两行一列-->- < table >< /table > : 用于定义表格标签
- < tr >< /tr > : 用于定义表格的行的标签
- < td >< /td > : 用于定义表格中的单元格
-
6.3表头单元格标签
- < th >< /th > : 展示的内容加粗居中显示
-
6.5 表格属性
属性名 属性值 描述 align left 、center 、right 规定表格相对周围元素的对齐方式 border 1或“ ” 规定表格单元格是否有边框 ，默认为 “ ”，没有边框 cellpadding 像素值 规定单元格边沿与里边内容之间的空白，默认为1像素 cellspacing 像素值 规定单元格之间的空白，默认2像素 width 像素值或百分比 规定表格的宽度 height 像素值或百分比 规定表格的高度 -
6.5表格结构标签
- < thead >< /thead > : 定义表格的头部，< thead >内部必须拥有< tr >标签。一般位于第一行
- < tbody >< /tbody > : 定义表格的主体，主要用于放数据本体
-
6.6合并单元格
- 合并单元格方式
- 跨行合并：rowspan=“合并单元格个数”
- 跨列合并：colspan=“合并单元格个数”
- 目标单元格
- 跨行合并：最上侧单元格为目标单元格，写合并代码
- 跨列合并：最左侧单元格为目标单元格，写合并代码
- 合并单元格方式
7.
列表标签 （用于布局）
-
7.1无序列表（并列关系）
- < ul >< li >< /li >< /ul >
-
7.2有序列表（并列关系）
- < ol >< li >< /li >< /ol >
-
7.3自定义列表 （父子关系）
- < dl >< dt >哥哥< /dt >< dd >对哥哥的解释说明< /dd >< /dl >
8.
表单标签
-
8.1为什么需要表单
- 为了收集用户信息
-
8.2表单的组成
-
表单域
-
< form >标签用于定义表单域，以实现用户信息的收集和传递
-
< form >会把它范围内的表单信息提交给服务器
-
常用属性
属性 属性值 作用 action url地址 用于指定接收并处理表单数据的服务器程序的url地址 method get/post 用于设置表单数据的提交方式，其取值为get/post name 名称 用于指定表单的名称，以区分同一个页面中的多个表单域
-
-
表单控件
-
input 输入表单元素 < input > : 单标签
-
常用属性
-
type：用于指定控件类型
属性值 描述 button 可点击按钮 checkbox 复选框 file 输入字段和“浏览”按钮，供文件上传 hidden 隐藏的输入字段 image 图像形式的提交按钮 password 密码字段，该字段中的字符被掩码 radio 单选按钮 reset 重置按钮，清除表单中的所有数据 submit 提交按钮，把表单数据发送到服务器 text 单行输入字段，可在其中输入文本，默认宽度20个字符
-
-
其他属性
属性 属性值 描述 name 自定义 定义input元素的名称 （单选框和复选框必须拥有相同的名字） value 自定义 规定input元素的值 checked checked 规定此input元素首次加载时应当被选中 maxlenght 正整数 规定输入字段中的字符的最大长度 name和value是每个表单元素都有的属性值主要给后台人员使用
单选框和复选框必须拥有相同的name值
-
-
select 下拉表单元素
<select> <option>内容1</option> <option selected>内容2</option><!--selected：默认选择--> </select>- 父标签 < select >< /select >
- 子标签< option >< /option >
-
textarea 文本域元素
<textarea cols="50" rows="5">文本域</textarea>- cols：每行显示多少字
- rows：显示几行
-
-
提示信息
-
< lable >标签：为input元素定义标注（标签）
-
用于绑定一个表单元素，当点击< lable >标签内的文本时，浏览器就会自动将焦点（光标）转到或者选择对应的表单元素上用来增加用户体验
<label for="nan">男</label> <input type="radio" name="sex" value="男" id="nan">男
-
-
-
909
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
