第二次学习 HTML语法基础
标题和段落
场景：在新闻和文的页面中，都离不开标题，用来突出显示文童主题
代码：h系列标签
1标题标签
<h1>1级标题</h1>
<h2>2级标题</h2>
<h3>3级标题</h3>
<h4>4级标题</h4>
<h5>5级标题</h5>
<h6>6级标题</h6>
语义：1一6级标题，重要程度依次递减
特点:文字都加粗 文字都变大,并且从hl一h6文字逐渐减小 独占一行 h1一般在网页中只用一次 用于标题和logo
注意:标题在vscode中的一个操作技巧.
ctrl+d,把同一行的相同的都选中改了.
2段落标签
段落标签
场景：在新闻和文章的页面中，用于分段显示
代码：<p>我是一段文字</p>
语义：段落
特点:段落之间存在间隙 独占一行
vscode中:查看_自动换行_代码可换行显示.Alt+Z
3换行标签
场景：让文字强制换行显示
代码：<br>
语义：换行
特点：单标签 让文字强制换行
4水平线标签
场景：分割不同中题内容的水平线
代码：<hr>
语义：主题的分割转换
特点：单标签 在页面中显示一条水平线
文本格式化标签
场景：需要让文字加粗、下划线、侦斜、删除线 等效果
b /strong 加粗
ｕ /ins 下划线
ｉ /em 倾斜
ｓ /del 删除线
都是双标签，效果都是一样的．只是根据作者感觉某处的重要程度来决定使字母，还是单词．
作者感觉重要程度高些的地方，用单词表示的．
图片-基本使用
图片标签的介绍
场景：在网页中显示图片
代码：<img src=＂（可以用./开头）图片的地址＂alt=＂图片无法显示时出现的文字＂＞
属性注意点：
1，标签的属性写在开始标签内部
2，标签名与属性之间必须以空格隔开
3，标签上可以同时存在多个属性
4．属性之间以空格隔开
5，属性之间没有顺序之分
特点：单标签 img标签需要展示对应的效果，需要借助标签的属性进行设置！
图片-属性
图片标签的alt属性
1.属性名：alt 属性值：替换文本 当图片加载失败时，才显示alt的文本
2.属性名：title 属性值：提示文本 当鼠标悬停时，才显示的文本
注意点：title属性不仅仅可以用于图片标签,还可以用于其他标签.
3.属性名：width和height 属性值：宽度和高度（数字）
注意点：如果只设置width或height中的一个，另一个没设置的会自动等比例缩放（此时图片不会变形）如果同时设置了width和height两个，若设置不当此时图片可会变形
绝对路径
场景：页面需要加载片，需要先找到对应的图片
路径可分为：绝对路径 (实际中用少：友情链接) 相对路径（常用）
1.绝对路径：指目录下的绝对位置，可直接到达目标位置，通常从盘符开始的路径
盘符开头：D:\day01\images\1.jpg
完整的网络地址:www.itcast℃n/2018czgw/im…
拓展计算机知识:mac电脑中不分(没有)盘符,默认写/,/代表根目录
相对路径-同级和下级
相对路径：从当前文件开始出发找目标文件的过程 当前文件指的就是你现在编辑的这个html文件所在的位置.
相对路径分类：
1. 同级目录: ./
当前文件和你目标文件都在同一个文件夹中
代码步骤：直接与目标文件的名字即可
方法一：<img src="目标图片.gif">
方法二：<img src="./目标图片.gif">
2. 下级目录: 直接写文件夹名字
我在大厅，你累了去卧室休息了，我现在要找到你！
代码步骤:
① 先知道在哪个文件夹里面-文件夹名字
② 进入这个文件夹-/(用/来表示文件夹)
③ 此时看到目标文件直接写目标文件名字
3.上级目录: ../ 上两级：../../
代码步骤．
①先出当前文件夹，到上一级目录 ../(点点斜杠)
②此时看到目标文件直喊她-直接写目标文件
超链接
代码：<a href="想要跳转的网页地址（空链接只写一个#）">超链接文字</a>
如果跳转到本地文件，用相对路径就可以了
原来的页面被关掉：用新的窗口打开添加新的属性，target=“_blank“即超链接新窗口打开
音频标签和视频标签
1. 音频标签
代码：
常见属性：（属性值和名称一样不显示=““）
① controls 显示音频控制面板
② loop 循环播放
③ autoplay “ 自动播放（浏览器禁用自动播放）
2. 视频标签：
代码：
常见属性：（属性值和名称一样不显示=““）
① controls 显示视频控制面板
② loop 循环播放
③ muted 静音播放
④ autoplay 自动播放（浏览器在静音状态下自动播放）
列表-使用场景
列表分为:无序列表 有序列表 定义列表
1. 无序列表
代码：
<ul>
<li>第一项</li>
<li>第n项</li>
</ul>
注意：<ul>里面只能包含<li>标签，其他内容都放在<li>标签内
**2.** **有序列表**
代码：<ol>
<li>第一项</li>
<li>第n项</li>
</ol>
注意：
- 里面只能包含
- 标签，其他内容都放在
- 标签内
3.定义列表
代码：
<dl> <dt>列表标题</dt> <dd>列表描述/详情</dd> </dl>注意：
<dl>里面只能包含<dt><dd>标签，其他内容都放在<dd><dt>标签内表格-认识
1.代码：table嵌套tr,tr嵌套td（内容单元格）/th(表头单元格：加粗居中)
<table> <tr>*第一行* <td>内容</td> </tr> <tr>*第二行* <td>内容</td> </tr>注意：有几行就有几个tr 有几列就有几个td
2.常见属性：
Border
表格-结构标签（了解）
作用：让表格结构更清晰，但是在网页中看不到效果（对浏览器来说）
thead 表格头部 表格头部内容
tbody 表格主体 主要内容区域
tfoot 表格底部 汇总信息区域
表格-合并单元格
作用：合并同类信息
步骤：①明确合并的目标
②保留最左最上的单元格，添加属性（取值是数字表示合并的单元格数量）
跨行合并 保留最上单元格，添加属性rowspan
跨列合并 保留最左单元格，添加属性colspan
③ 删除其他单元格
表单-input基本使用
1.input系列标签的基本介绍
场景：在网页中显示收集用户信息的表单效果，如：登录页、注册页
标签名：input（单标签） 可以通过type属性值的不同，展示不同效果
代码：
<input name=“名称” type=“ ”>type属性值： ①text 输入单行文本 ②password 密码框 ③radio 单选框
④checkbox 多选框 ⑤file 上传文件
2.占位文本placeholder属性
<input type=" " **placeholder**="占位文本 ">4. 单选框单选功能和默认选中
name 名称一样只能选择一个 即可实现单选功能
在某个input单选框内添加checked属性 即可设置默认选中
5. 上传多个文件
在input标签内加multiple属性
6. 多选框默认选中
在input标签内加checked属性 即可设置默认选中
表单-下拉菜单
select嵌套option
代码：
<select> <option>选项1</option> <option>选项n</option> **<option selected>****默认选中</option>** </select>注意：没有selected时,默认选中第一个.
表单-文本域
textarea 文本域标签（双标签）
场景:在网页中提供可输入多行文本的表单控件，例如：发表评论
代码：
<textarea *name=”” id=””* cols=”” rows=””>常见属性:name和id是后台时所需，在这里先不做讲解
**cols:**规定了文本域内可见宽度
**rows:**规定了文本域内可见行数
注意：右下角可以拖拽改变大小，实际开发时针对于样式效果推荐用CSS设置.
表单-label标签
作用：
1.网页中某个标签的说明文本，例如：
<input type="radio" ><label>说明文本</label>2.用label标签绑定文字和表单控件的关系，增大表单控件的点击范围(适用于文本框、密码框、上传文件、单多选框、下拉菜单、文本域等)
label两种写法
① label标签只包裹内容，不包裹表单控件 设置label标签的for属性和表单空间的id属性相同
<input type=“radio”id=“xlr”><label for="xlr">说明文本</label>② 使用label标签包裹文字和表单控件，不需要属性(通常用第二种)
<label><input type=“radio”name=”gender”>女</label>表单-按钮
场景：在网页中显示不同功能的按钮表单控件
代码：<button type=“ ”>按钮
type属性值 说明
submit（默认属性） 提交按钮：点击之后提交数据给后端服务器
reset 重置按钮：点击之后恢复表单默认值
button 普通按钮：默认无功能，之后配合js添加功能
注意：
如果需要实现以上按钮功能，需要配合form标签使用.
form使用方法：用form标签把表单标签一起包裹起来即可.
< input type="button" value =" 变通按钮">(value给按钮改名字的)
语义化（div和span）标签和字体实体
1. 没有语义的布局标签
作用：只是用于布局网页（划分区域 摆放内容）
div标签：一行只显示一个（独占一行）
内容span标签：一行可以显示多个 内容
2. 字符实体
作用：在网页中显示预留字符
 ；显示空格 <；显示小于号 >；显示大于号
