html学习笔记（day1）

html 网页的框架

css 网页的表现

JavaScript 网页的行动

文本格式化标签：

加粗 下划线 倾斜 删除线有两组标签，区别在于是否有强调语气，有则使用第2组！

1、<b> <u> <i> <s>

2、<strong> <ins> <em> <del>

媒体标签

图片标签

<img src="" alt='图片未加载成功则显示这段字符串' title='鼠标悬停在图片上显示的字符串内容' width='' height=''>

注：

1、src、alt、title都为属性，括号后为属性值。

2、width、height属性若只设置一个，图片将等比例缩放，否则可能形变。

路径：相对路径（从当前文件开始查找）、绝对路径（通过盘符开始的路径，不常用）

../返回上一级目录，./同级目录，xxx/下级目录（xxx为下级目录文件名）

音频标签

<audio src="" controls autoplay loop>  

controls 显示控件

autoplay 自动播放，部分浏览器不支持

loop 循环播放

视频标签

<video src="" controls autoplay loop muted>

autoplay 谷歌浏览器需要配合muted属性实现自动播放但静音

超链接

链接标签

<a href="#" target="_self">链接</a>

href： 项目开发初期属性值可写入#空链接 

target： _self默认属性值，在当前目录跳转，_blank在新窗口跳转（保留原网页）

列表标签

• 无序列表

<ul>
    <li>第一项</li>
    <li>第二项</li>
</ul>

注：<ul></ul>标签内只能包含<li></li>标签 ，<li></li>标签可以包含任意内容。

• 有序列表

<ol>
    <li>第一项</li>
    <li>第二项</li>
</ol>

注：<ol></ol>标签内只能包含<li></li>标签  ，<li></li>标签可以包含任意内容。

• 自定义列表

<dl>
<dt>列表的第一项主题</dt>
<dd>第一项主题的第一条内容</dd>
<dd>第一项主题的第二条内容</dd>
<dt>列表的第二项主题</dt>
<dd>第二项主题的第一条内容</dd>
<dd>第二项主题的第二条内容</dd>
</dl>

注：<dl></dl>标签只允许嵌套<dt></dt><dd></dd>标签，<dt></dt><dd></dd>标签可以包含任意内容。

表格标签

<table>
<caption>整体表格的大标题标签</caption>
<tr>
<th>第一行第一列表头单元格标签</th>
<th>第一行第二列表头单元格标签</th>
</tr>
<tr>
<td>第二行第一个表格</td>
<td>第二行第二个表格</td>
</tr>
</table>

border:边框宽度，值为数字

width、height：表格整体的高宽度通常在css样式内设置

表格的结构标签（了解，可省略）

<thead></thead>,<tbody></tbody>,<tfoot></tfoot>用于包含<tr></tr>标签。

存在的意义：突出表格的各部分，使得表格语义更加清晰

单元格合并

1、先确定 要合并的单元格

2、根据左上原则，保留最左边最上边的单元格，删除其他单元格的内容

3、给保留的单元格设置：跨行合并rowspan='2'或者跨列合并colspan='2'

注：只有是同一个结构标签内的单元格才能合并（不能跨thead、tfoot，tbody）

表单标签

• input标签

<form action="">
<input type="text" placeholder="默认文本框显示提示信息">
<input type="password">
<input type="submit">
<input type="reset">
<input type="button">
<input type="radio">单选按钮
<input type="checkbox">多选框
<input type="file">上传文件
</form>

placeholder属性：在文本框显示提示信息。

name属性：用于输出为radio类型，将选项划分为一个组，实现只能单选一个内容。

multiple属性：用于输出为file类型，可以选中打开多个文件。

checked属性：默认选中状态，适用于单选框及多选框。

action属性：放入表单发送到的目标文件路径。

注意：提交按钮、重置按钮必须得在form表单域内才能发挥作用。

• select标签（下拉选框）

<select>
<option>选项一</option>
<option selected>选项二</option>
<select>

selected属性：用于<option></option>标签内设置选项默认值。

• label标签

将选框与内容结合为一体，选中内容也可以同时选中选框。

方法一：在表单标签中设置id，内容写在label标签内，并且设置for属性值与对应id相同

<input type="radio" id="nan"><label for="nan">男</label>

方法二：直接用label标签将表单标签与内容写在内部，删除for属性

<label><input type="radio">男</label>

• button按钮

<button type="submit">提交</button>
<button type="reset">重置</button>
<button type="button">普通按钮，要通过js配置功能</button>

注：谷歌浏览器button按钮默认type属性值为submit。

        由于button属性是双标签更便于包含图片、视频、文字等内容。

• textarea文本域标签

<textarea></textarea>

cols、rows属性：设置文本域长宽高，但实际开发推荐用css进行设置。

语义化标签

非语义布局标签：div（独占一行）、span

语义化布局标签--实际用于移动端：header、nav、footer、aside、section（网页区块）、article

字符实体

&nbsp;、&lt;、&gt;... ...