html网页构建难点,(超详细)HTML重难点标签突破

1.a标签

标签属性:

href 跳转的链接或锚点 href 其实是 hyper reference 超链接的缩写

href的取值如下

链接

百度一下

百度一下

百度一下

链接到此项目根目录下的a目录下的b目录下的c目录下的3.HTML

链接到此页面同一目录下3.HTML

伪协议用法

javascript伪协议

链接到此页面同一目录下3.HTML

上面的用法通常用来解决a标签没有任何响应的需求，:;之间不写任何东西即可，因为href属性值为空会刷新页面，为#会是页面回到顶部

锚点用法

点我滚动到ID为bottom的元素的位置

发邮件

点我发邮件

电话

点我打电话给18888888888

a 标签链接到超文本文件能直接打开，遇到非超文本文件提示下载

跳转到文本文档

跳转到图片上

下载压缩文件

下载可执行文件

target 指定页面的打开方式

百度一下

百度一下

百度一下

百度一下

百度一下

百度一下

rel = noopener 防止一些BUG

download 此属性表示不是打开页面而是下载页面，不是所有浏览器都支持，尤其是手机浏览器

2.table表格标签

table 表格标签 常用属性如下 :

border 边框 默认双条线 单位 px 只对 一般为1px

width 整个表格的宽度 单位 px

height 整个表格的高度 单位 px

align 此表格在浏览器中的对齐方式

cellspacing 单元格和单元格之间的距离 单位 px

thead 表头

tbody 表格体

tr 表格行 常用属性如下

height 高度

align 设置当前行里面每个单元格的文字的水平对齐方式

valign 设置当前行里面每个单元格的文字的垂直对齐方式

th 列或行的表头

td 列数据 常用属性如下

width

height

align 设置单元格内文字的水平对齐方式 left 左 center 中 right 右

valign 设置单元格内文字的垂直对齐方式 top 上 center 中 bottom 下

注意 ：设置了当前单元格的宽度 整个列都会受到影响，设置了当前单元格的高度 整个行都会受到影响

tfoot 表尾

table的结构中间只能有thead，tbody(必须有tbody否则浏览器也会给你补上)，tfoot，不能再放其他东西了，而td单元格里面放啥都行

示例：

序号	姓名	电影	评分
1	刘德华	拆弹专家	9.0
2	郭富城	无双	9.1
3	甄子丹	追龙	8.9
4	张家辉	贪玩蓝月	5.0

单元格的合并

行合并: rowspan 上下合并

列合并： colspan 左右合并

合并单元格步骤 :

确定要合并的n个格

删掉多余的格，只留一个

在剩余的唯一的格子上 写入 colspan 或者 rowspan 把几行/列合成一个就写几

表格常用的CSS属性

table-layout

table-layout: auto; /* 大多数浏览器采用自动表格布局算法对表格布局。表格及单元格的宽度取决于其包含的内容。 */

table-layout: fixed; /*表格和列的宽度通过表格的宽度来设置，某一列的宽度仅由该列首行的单元格决定。在当前列中，该单元格所在行之后的行并不会影响整个列宽。 */

border-collapse

border-collapse:collapse; /* 表格边框合并 不设置的话默认不合并*/

border-spacing

border-spacing:0; /* 表格单元格之间的间距 一般都设置为0才好看 */

3.img标签

作用：发出get请求，展示一张图片

属性：

alt 图片加载失败的描述文字

height 图片的高 宽高只设置一个另一个值会等比缩放 都设置很可能会失真

width 图片的宽

src 图片的路径 也可以是图片的链接

两个重要的事件：

onload 在图片加载成功时触发

onerror 在图片加载失败时触发

响应式的CSS样式：

max-width:100%; /* 各种屏幕都适用 */

可替换元素：在 CSS中，可替换元素(replaced element)的展现效果不是由 CSS 来控制的。这些元素是一种外部对象，它们外观的渲染，是独立于 CSS 的。

简单来说，它们的内容不受当前文档的样式的影响。CSS 可以影响可替换元素的位置，但不会影响到可替换元素自身的内容。某些可替换元素，例如 元素，可能具有自己的样式表，但它们不会继承父文档的样式。

CSS 能对可替换元素产生的唯一影响在于，部分属性支持控制元素内容在其框中的位置或定位方式

4.form标签

作用:发get或post请求，然后刷新页面

属性：

action 发送请求的地址

method 发送请求的方法 get post

autocomplete 属性值 on off 开启状态下会根据form里面的input输入框的name值提示相应的输入内容

target 与a标签相同 表示要跳转的页面位置

重要事件：

onsubmit ： 表单按钮提交时触发

button按钮与input按钮的区别

发送

两者的区别就是button标签按钮里面可以嵌套别的标签，后者不可以

5.input标签

作用： 让用户输入内容

属性:

type 类型类属性值

button 按钮

checkbox 多选框 一组的多选框需要相同的name值

radio 单选框 一组的单选框需要相同的name值

submit 触发提交事件功能的按钮

file 上传文件 multiple 可以传多个文件

number 输入数字

password 输入密码 内容不可见

text 输入文本

tel 输入电话

emali 输入邮箱

hidden 不可见的输入框 一般于js提交不需要用户输入的数据

search 用于搜索字符串的单行文字区域

color 选择颜色

其他属性

name 一般form表单里面的所有input必须要有这个属性，方便数据的传递

autofocus 自动聚焦

checked 默认选中 多用于下拉框 或者 单选和多选

disabled 不可点击

placeholder 占位符

value 值

pattern 规定用于验证输入字段的模式。 正则表达式等

maxlength 规定输入字段的最大长度，以字符个数计。

required HTML5 自带验证器 不输入内容会提示输入内容后才可提交

重要事件

onchange 输入能容改变时触发

onfocus 聚焦时触发

onblur 失去焦点时触发

6.textarea 文字域标签

用来输入多个文字简介等内容，默认情况下用户可以缩放大小，可通过CSS中resize属性设置为不可缩放

属性cols 列数 rows 行数

7.select 下拉选项标签

方敏

陆望舒

庄晓曼