文章目录
- 002 html解释
- 003 浏览器知识
- 004 web标准的制定
- 005第一个网页
- 006 VSCode
- 008 HTML常用标签
- 010 不一般的hr标签
- 011 特殊符号
- 012 div和span标签
- 013 014 015 列表 - 有序、无序、定义列表
- 016 图片标签的路径
- 017 图片标签的属性
- 019 超链接标签
- 020 table表格
- 021 table标签的属性
- 022 tr标签的属性
- 023 td标签的属性
- 024 表格合并
- 025 表格案例
- 026 表单标签
- 095 表单进阶-单选框
- 096 表单进阶-复选框
- 097表单进阶-上传文件和隐藏字段
- 098 表单进阶-下拉菜单
- 099 表单进阶-文本域
- 100 表单进阶-字段集
- 101 HTML5基础与语法
002 html解释
- 网页是网站中的一页；
- 文件后缀名为html；
- html语言不是编程语言，而是一种标记语言，全称 超文本标记语言；
003 浏览器知识
- caniuse.com ，查询标签兼容浏览器的问题
- 常见浏览器：safari浏览器，chrome浏览器，qq浏览器，Edge（ie）浏览器，
004 web标准的制定
- W3C万维网联盟，非盈利组织；
- 标准三大部分
- HTML结构
- CSS表现：
- JS行为：
005第一个网页
- 文本最外层应该是< html>标签，相当于一个范围标记
- 基本语法
- 常规标签，也叫双标签 < 标记 属性= ”属性值“ ··· ···> < /标记>
- 单标签，也叫空标签 < 标记 / > (< 标记 属性=”属性值“ ··· ···/>）
- 注释 < !-- --> ：ctrl+/
<html>
<head>
<title>我的第一个网页</title>
</head>
<body>
<center> thank you</center>
</body>
</html>
006 VSCode
- Auto Rename Tag 插件，修改标签前半条，后半条自动修改；
- view-in-browser 插件，直接预览当前界面；
- live server 插件，浏览器内容随着文件更新实时变动。
- htmltagwrap 插件，选中一段文字，按下alt+w，直接给选中部分外层添加p标签，需要其他标签直接修改p就可以。
- 在现在这行后面新建一行，可以ctrl+回车（感觉比end+回车更顺手）
007 文档声明与字符编码
- < !DOCTYPE ***> ：告诉浏览器使用的是哪种html文档标准；
- lang属性，html标签，告诉浏览器代码中文本用的是什么语言，浏览器会有对应给用户的翻译，”en“英文，”zh-CN“中文，”ja-jp“日文；
- < meta charset=” “>：字符编码格式 ASCLL、UTF-8等，一般用UTF-8(unicode编码）
008 HTML常用标签
- 文本标题
< h1> 一级标题 < /h1>
< h2> 二级标题 < /h2>
< h3> 三级标题 < /h3>
< h4> 四级标题 < /h4>
< h5> 五级标题 < /h5>
< h6> 六级标题 < /h6>- 标题会独占一行，且与其他行有一定的间距；
- h1 权重最大，里面的内容为最重点内容
- 段落文本
< p> 段落< /p>- 标识一个段落，段落与段落之间有段距。
- 换行
< br/>- 单标签，给文本换行，无多余间距。
- 水平线
< hr/> 空标记 - 加粗文本
< b>加粗的文本 < b/> ：只是显示上加粗
**< strong>**强调的内容 < /strong>：不仅加粗，而且提示浏览器这是强调的重点 首选 - 倾斜文本
**< em>**强调 < /em> ：一样倾斜+强调 首选
< i> 倾斜< /i>：仅倾斜 - 删除线
< s> 文本
**< del>**强调 首选 - 其他
< u>下划线
< sub> 下标
< sup> 上标
010 不一般的hr标签
属性：
color=“blue” 颜色
width=“500” 宽度
align=“left” 对齐方式
noshade 无阴影
011 特殊符号
如何在文本中显示和标签相同的符号内容，类似与编程语言中的转义字符，&+特定标识，定义了不同的特殊符号
- < ; 左尖角符号<
- > ; 右尖角符号>
-   ; 空格（一个字符，受字体影响）
- &emsp ； 空格 （一个中文宽度）
- © ; 版权
- &trade ; 商标 tm
- ® ； 商标 R
012 div和span标签
- < div>：没有什么含义，但是独占一行，可以把页面分区
- < span>：独立标记一段文字，可对其单独修饰
013 014 015 列表 - 有序、无序、定义列表
ol里面第一层只能放il，li里面就可以随意嵌套；
- < ol> + < li>：有序列表，前面有序号
ol 属性 type：序号类型，只能是1，a，A，i，I，默认数字类型；start：开始序号，取值只能是符号的序数，也就是数字。 - < ul> + < li> ：无序列表，type属性：默认是黑色实心小圆点，可以取值为 disc黑色实心圆（默认）、circle 空心圆、square黑色小方块、none无样式等。
- < dl> + < dt> + < dd> ：定义列表，dd可以是文字也可以是图片，dt为相关内容
016 图片标签的路径
- 同级目录
src=“01.jpg”
src=“./01.jpg” - 上级目录
- 用两个点表示上级
src=“…/01.jpg” - 那么上上级就是
src=“…/…/01.jpg” - 可以多层，但是不要超出项目文件目录
- 用两个点表示上级
<img src="01.jpg">
<img src="./01.jpg">
<img src="htmlimg/02.jpg">
017 图片标签的属性
部分属性
- title：鼠标悬停上去之后的提示信息
- alt：图片不显示，显示失败后的提示信息
- width：宽度，px表示像素值，也可以不要px
- height：高度
这里宽度和高度的设置默认是等比例缩放
<img src="01.jpg" title="这是一张风景图" height="220px">
<img src="01.jpg" title="这是一张风景图" width="200px">
<img src="1.jpg" alt="图片加载失败" width="100px">
019 超链接标签
< a herf=“路径” title=“鼠标悬停提示信息” target=""规定在何处打开文档> 内容 < /a>
- target属性：规定在何处打开文档，取值有 _self（默认值，当前页面）、 _blank（新窗口）
- 路径：也可以是项目内部路径页面
- 内容：可以是文字、图片或者其他
020 table表格
- < table> ：表示表格
- < tr> ：行
- < td>：列
table标签必须紧邻着tr，tr也只能紧邻着td，td内可以放各种类型数据。
快捷键 table>tr2>td2+回车
| 1 | 2 |
| 3 | 4 |
<table>
<tr>
<td>1</td>
<td>2</td>
</tr>
<tr>
<td>3</td>
<td>4</td>
</tr>
</table>
021 table标签的属性
宽度和高度的设置除了用px以外，还可以用百分比，是相对父元素来比较的
- 宽度 width
- 高度 height
- 边框 border
- 边框颜色 bordercolor
- 背景颜色 bgcolor
- 水平对齐 align=" left / right / center ”
- 单元格间距 cellspacing
- 单元格与内容间的空隙 cellpadding
<table
border="1"
width="100px" height="100px"
align="center"
bordercolor="pink" bgcolor="purple"
cellspacing="0" cellpadding="30">
</table>
022 tr标签的属性
- 高度 height ，一行的宽度是不能设置的，它受table的限制
- 背景颜色 bgcolor
- 文字水平对齐 align=" left / right / center "
- 文字垂直对齐 valign=" top / middle / bottom "
<tr bgcolor="orange" align="center" valign="middle">
023 td标签的属性
单元格高度设置后影响一整列，高度影响一整行。
- 宽度 width
- 高度 height
- 单元格背景颜色 bgcolor
- 文字水平对齐 align=" left / right / center "
- 文字垂直对齐 valign=" top / middle / bottom "
<td width="10px" bgcolor="green">1</td>
024 表格合并
td 的属性，合并单元格
- colspan：列合并
- rowspan：行合并
<td colspan="2" rowspan="2">魏国</td>
025 表格案例
| 会员姓名 | 出生日期 | ||
| 身份证号 | |||
| 通信地址 | |||
| 联系电话 | |||
| 会员卡号 | |||
<table border="1" cellspacing="0" celllpadding="0" align="center" width="360">
<tr>
<td width="80" align="center">会员姓名</td>
<td width="100" align="center"></td>
<td width="80" align="center">出生日期</td>
<td width="100" align="center"></td>
</tr>
<tr>
<td width="80" align="center">身份证号</td>
<td colspan="3" align="center"></td>
</tr>
<tr>
<td width="80" align="center">通信地址</td>
<td colspan="3" align="center"></td>
</tr>
<tr>
<td width="80" align="center">联系电话</td>
<td colspan="3" align="center"></td>
</tr>
<tr>
<td width="80" align="center">会员卡号</td>
<td colspan="3" align="center"></td>
</tr>
</table>
026 表单标签
- 表单的作用：收集用户信息
< form>：表单标签
- action属性：表单内容提交信息的地址
- method属性：信息传输的方式
GET方式，传送的信息是暴露的；
POST方式，传送的方式是隐藏的。
< input />：配合form标签使用，必须紧跟
- type属性：定义输入框类型
text：文本框
password：密码框
submit：提交框，和submit型的button一模一样
button：按钮框，单纯的按钮
reset：清空效果，清空整个表单，等价于reset型的button
radio：单选框
checkbox：复选框
file：上传文件
image：图片代替提交按钮
hidden：隐藏按钮 - placeholder属性：描述输入字段预期效果的简短提示
- name：属性：必须设置，用于向后端传送用户输入的信息
- value属性
- checked属性：checked值，默认选中当前选项，值为checked时可以省略值
- disable属性，禁用属性，禁用时取值同属性名
< select> < option>：下拉菜单标签
- select的属性：
- size，显示几个选项，默认为1
- multiple，多选
- option 的属性
- value，提供给后端需要value值（不同选项不同）
- selected，默认选中
< textarea>：多行文本输入框
- cols：显示的列数
- rows：显示的行数
- 实际中常用css设置宽高
- pleaseholder：提前预置内容，有输入后删除
- 默认的value不用value属性，直接写在标签中间，会读入空格和换行
- css中设置resize属性，限制对其大小的设置，有 vertical水平、horizontal垂直、both两个方向、none不可重设
< filedset> < legend>：字段集
- 实现字段集，不需要自己布局，会自动根据内部表单调整。
- 字段集使得表单有分类，更清晰。
- 可以把filedset当作普通标签来设置css，比如换边框颜色，宽高等，legend可以设置分类标题的css，例如文字位置、颜色
095 表单进阶-单选框
<input type = "radio" name="aaa" id="man" checked="checked">
<label for="man">男</label>
- 一组内的name必须相同
- 用label标签绑定单选框，实现与单选框的绑定，点击文字即可自动选择
- 用checked默认选中其中一个
096 表单进阶-复选框
<input type = "checkbox" name="aaa" id="man" checked="checked">
<label for="man">男</label>
- 一组内的name必须相同
- 同样用label绑定
- 用checked默认选中其中部分
097表单进阶-上传文件和隐藏字段
file，选择文件
<input type = "file" name="" id="" >
image，图片代替提交按钮，并不是选择图片
<input type = "image" name="" id="" >
hidden，隐藏按钮：不显示，会自动提交信息，多用于提交用户信息
<input type = "image" name="" id="" >
disable = ”disable“ 禁用，只读
<input type = "image" name="" id="" disable >
098 表单进阶-下拉菜单
099 表单进阶-文本域
100 表单进阶-字段集
101 HTML5基础与语法
1.doctype不区分大小写
2.部分标记元素可省略
- 一些元素不允许写结束标记，如br、img、input
- 一些标签可以省略结束标记，如li、p、dt、dd
- 一些标签可以省略全部标记，如：html、head、body等
3.属性值单引号也可以
4.新增语义化标签
为了突出网页中的重点，新增一些对爬虫更友好的标签，无任何特殊样式。
- header：表示页面中一个内容区块或整个页面的标题
- section：表示页面中的一个内容区块
- footer：表示页面中的一个内容区块和整个页面脚注
- nav：侧边栏
- aside：导航栏
- article：与上下文无关的独立内容
- main：页面中的主要内容，ie不兼容
5.新增音视频标签 audio、video
- audio 音频标签
音频src地址， controls展示音频、 loop循环、 autoplay自动播放（谷歌禁用自动播放）、muted静音。
<audio src="" controls loop autoplay >
- video 视频标签
视频src地址， controls展示视频、 loop循环、 autoplay自动播放（谷歌默认禁用自动播放）、muted静音，静音时可以自动播放。
视频封面 poster = ”地址"，还可以设置宽高，也可以css设置。
<video src="" controls loop autoplay poster="">
6.增强表单input的属性
- type属性增强
- 颜色选择框 color
- 邮箱输入框 email
- 地址输入框 url
- 电话号码 tel
- 滑块效果 range，默认0-100，支持用min和max重设取值，value设置默认值，step设置步长
- 数字框 number ，min，max，step，value 均适用
- 搜索框 search
- 日期选择框 date、month、week
- 时间选择框 datetime-local
- autofoucs 设置焦点
- required 输入不能为空
- multple 邮箱中使用，支持多个地址，逗号隔开
- pattern 正则表达式
7.新增选项列表 datalist
让input输入框与datalist列表关联，可实现模糊搜索。
<input type="text" list="mylist">
<datalist id="mylist">
<option>电冰箱</option>
<option>电话</option>
<option>电话卡</option>
<option>电视机</option>
<option>洗衣机</option>
</datalist>
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
