Web html

表单标签

Input 标签

Text：文本框 <input type=”text” placeholder=”请输入用户名” name=”” id=””>

Password:密码框 ·<input type="password" placeholder=”密码”>

radio：单选框，name 相同的为一组，一组中只有一个被选中，checked 为默认选中 <input type="radio" name="sex">男 <input type="radio" name="sex"checked>女

Checkbox:多选框 <input type="checkbox" checked>多选 1 <input type="checkbox">多选 2 file：上传文件 <input type="file" multiple>

submit、reset、button：按钮 submit:<input type="submit"value="免费注册"> reset:<input type="reset" value="重置">button:<input type="button"value="普通按钮">

button 标签 作用：提交信息（和 js 一起使用) 语法：<button> 代码: <button>我是按钮</button> select、

option 标签 作用：select 标签为下拉菜单的整体；option 标签为下拉菜单的每一项代码: <select name=""id=””> <option>北京</option> <option selected>上海</option> <option>广州</option> </select>

textarea 标签 作用：可输入多行文本的表单控件 语法：<textarea ></textarea> 属性: cols: 文本区域可见宽度 row:本文区域内可见行行数 代码: <textarea cols="10” rows=”10”>文本域</textarea>

文本标签

文本标签：<h1></h1>

段落：<p></p>

加粗：<b></b>,<strong></strong>

倾斜：<i></i>,<em></em>

下划线：<u></u><ins></ins>

删除线：<s></s>,<del></del>

上标：

下标： 按原文显示，保留空格和换行符：<pre></pre> 图片标签 <img src=”” alt=””>

列表标签：

列表标签无序列表: <ul> <li></li> </ul>

有序列表：<ol> <li></li> </o>

自定义列表： <dl> <dt></dt> <dd></dd> </dl> 表格布局：

1. 表格合并 一． 行行合并：删下面的，留上面的，在留的那行左边括号里写 rowspan，合并了几行，数值就取几，无单位二．

列列合并：删右边的值，留左边的，在左边值代码的括号里写 clospan，合并了几行，数值就取几，无单位

表格 table 标签： <table></table>表格标签

<caption></caption>表格标题

<tr></tr>行

 <th></th>列标题或行标题

<td></td>列

行分组标签: <thead></thead>表格头部

<tbody></tbody>表格主体

<tfoot></tfoot>表格尾部

table html 里的属性：

width 表格宽度，建议在 css 中设置

height 表格高度，建议在 cSs 中设置

border 表格边框，建议在 css 中设置 bgcolor 表格背景，建议在 css 中设置

bordercolor 边框颜色，建议在 css 中设置

table 的 css 属性： table-layout 定义列宽度

fixed：固定列宽（不指定宽平均分) border-collapse 合并单元格边框 前提：单元格边框不能合并 empty-cells 用于隐藏没有内容的单元格 前提：单元格不能合并

hide：隐藏 生效前提：单元格不能合并 hide：隐藏 caption-side 设置表格标题位置

top：在表格上面，默认 bottom：在表格下面

cellspacing 单元格之间间距，建议在 cSs 中设置  align=""水平对齐方式：

left 左对齐（默认值)

right 右对齐

center 居中对齐

v-align=""垂直对齐方式：

top 顶对齐

bottom 底对齐

middle 居中对齐（默认值）

baseline 基线对齐

colspan="合并的单元格数”合并列，横向合并 rowspan="合并的单元格数”合并行，纵向合并 rules=""添加分割线：

none 没有分割线（默认值） cols 列之间的分割线 rows 行之间的分割线 all 行和列之间的分割线 groups 组织间的分割线

路径

绝对路径（了解）相对路径（常用）路径分类:

·同级目录 当前文件和目标文件在同一目录中。

代码步骤：直接写目标文件的名字即可。

方法一：< img src="目标图片.gif">

方法二：< img src="/目标图片.gif"> 下级目录 目标文件在下级目录中。

代码步骤: < img src="目标所在文件夹的名字/目标图片.gif"> 上级目录 目标文件在上级目录中。

代码步骤: 1.先出当前文件夹，到上一级目录→../。2.此时看到目标文件→直接写目标文件。< img src="./目标图片.gif">

媒体标签图片标签： 场景：在网页中显示图片。

代码：<img src="" alt=""> 特点:1.单标签 2.img 标签需要展示对应的效果，需要借助标签的属性进行设置。

src 属性： 属性值：目标图片的路径。

alt 属性: 属性值：替换文本 ·当图片加载失败时，才显示 alt 的文本。当图片加载成功时，不会显示 alt 的文本。

title 属性： 属性值：提示文本。 当鼠标悬停时，才显示的文本。 注意点：title 属性不仅仅可以用于图片标签，还可以用于其他标签。

width 和 height 属性： 属性值：宽度和高度（数字)。 注意点:如果只设置 width 或 height 中的一个，另一个没设置的会自动等比例缩放（此时图片不会变形)。 如果同时设置了 width 和 height 两个，若设置不当此时图片可能会变形。

音频标签: 场景：在页面中插入音频。 代码: <audio src="./music.mp3" controls> </audio>

常见属性:

src 属性:音频的路径

controls 属性：显示播放的控件

autoplay 属性:自动播放（部分浏览器不支持）。 loop 属性：循环播放注意点：音频标签目前支持三种格式：MP3、Wav、视频标签：场景：在页面中插入视频. 代码：<video src="/video.mp4"controls></video>

常见属性:

src 属性: 视频的路径

controls 属性：显示播放的控件

autoplay 属性:自动播放（谷歌浏览器中需配合 muted 实现静音播放）。

loop 属性：循环播放注意点：视频标签目前支持三种格式：MP4、WebM、Ogg 链接标签场景：点击后，从一个页面跳转到另一个页面。 称呼：a 标签、超链接、锚链接 代码：<a href=“跳转目标” target=“目标窗口的弹出方式”>文本或图像</a>

target 属性： 场景：用于指定链接页面的打开方式。 取值:

_self：默认值，在当前窗口中打开（覆盖原网页）。

_blank：在新窗口中打开（保留原网页）。 特点: 1.双标签，内部可以包裹内容。 2.如果需要 a 标签点击后去指定页面，需要设置 a 标签的 href 属性. 3.暂时没有确定链接目标时，通常将<a>标签的 href 属性值定义为“#” （即 href="#")，表示该链接暂时为一个空链接。

Css 选择器（美化 HTML 标签） 1. Css 写在 style 标签里面；style 标签写在 head 标签中，title 标签下