笔记来自(B站前端pink老师教程)
1 图像标签
img
图像标签的其他属性:
属性 | 属性值 | 说明 |
src | 图片路径 | 必须属性 |
alt | 文本 | 替换文本,图像不能显示的文字 |
title | 文本 | 提示文本 鼠标放在图像上,显示的文字 |
width | 像素 | 设置图像的宽度 |
height | 像素 | 设置图像的高度 |
border | 像素 | 设置图像的边框粗细 |
2 外部链接
a标签的属性:target 打开窗口的方式
1、_blank 新窗口打开页面
2、_self 当前窗口打开页面(默认)
3 超链接标签(重点)
1、下载连接:如果href里面地址是一个文件或者压缩包,会下载这个文件。
2、网页元素标签:在网页中的各种王亚元素,如文本、图像、表格、音频、视频等都可以添加超链接
4 锚点定位
锚点链接:点我们点击链接,可以快速定位到页面中的某个位置
在链接文本的href属性中,设置属性值为#名字的形式,如<a href="#two">第2集</a>
找到目标位置标签,里面添加一个id属性 = 刚才的名字,如<h3 id="two">第2集介绍</h3>
5 特殊字符
特殊字符 | 描述 | 字符的代码 |
空格符 | | |
< | 小于号 | < |
> | 大于号 | > |
& | 和号 | & |
¥ | 人命币 | ¥ |
© | 版本 | © |
® | 注册商标 | ® |
° | 摄氏度 | ° |
± | 正负号 | ± |
× | 乘号 | × |
÷ | 除号 | ÷ |
² | 平方2(上标2) | ² |
³ | 立方3(上标3) | ³ |
6 表格标签
属性名 | 属性值 | 描述 |
align | left、center、right | 规定表格相对周围元素的对齐方式 |
border | 1 或 "" | 规定表格单元是否拥有边框,默认为"",表示没有边框 |
cellpadding | 像素值 | 规定单元边沿与其内容之间的空白,默认1像素 |
cellspacing | 像素值 | 规定单元格之间的空白,默认2像素 |
width | 像素值或百分比 | 规定表格的宽度 |
height | 像素值或百分比 | 规定表格的高度 |
7 合并单元格三部曲
1、先确定跨行还是跨列
2、colspan 跨列 rowspan 跨行
3、删除多余的单元格
8 自定义列表(重点)
<dl>
<dt>名词1</dt>
<dd>名词1解释1</dd>
<dd>名词1解释2</dd>
</dl>
9 表单
9.1 表单域
<form action = "url地址" method="提交方式" name="表单域名称"></form>
属性 | 属性值 | 作用 |
action | url地址 | 用于指定接受并处理表单数据的服务器程序的url地址 |
method | get/post | 用于设置表单数据的提交方式,其取值为get或post |
name | 名称 | 用于指定表单的名称,以区分同一页面中的多个表单域 |
9.2 表单元素
<input type="属性值" />
1、type的属性值:
属性值 | 描述 |
button | 定义可点击按钮(多数情况下,用于通过JavaScript启动脚本) |
checkbox | 定义复选框 |
file | 定义输入字段和“浏览”按钮,供文件上传 |
hidden | 定义隐藏的输入字段 |
image | 定义图像形式的提交按钮 |
password | 定义密码字段。该字段中的字符被掩码 |
radio | 定义单选按钮 |
reset | 定义重置按钮,重置按钮会清除表单中所有数据 |
submit | 定义提交按钮。提交按钮会把表单数据发送到服务器 |
text | 定义单行的输入字段,用户可在其中输入文本,默认宽度为20个字符 |
2、input其他属性:
属性 | 属性值 | 描述 |
name | 由用户自定义 | 定义input元素的名称 |
value | 由用户自定义 | 规定input元素的值 |
checked | checked | 规定此input元素首次加载时应当被选中 |
maxlength | 正整数 | 规定输入字段中的字符的最大长度 |
3、注意:
(1)name是表单元素名字 这里性别单选按钮必须有相同的名字name 才可以实现多选1
(2)name 表单元素的名字,要求 单选按钮和复选框要有相同的name值
例如:
<input type="radio" name="sex"> 男
<input type="radio" name="sex"> 女
9.3 <label>标签
用于绑定一个表单元素,当点击<label>标签内的文本时,浏览器就会自动将焦点(光标)转到或者选择对应的表单元素上,用来增加用户体验。
for的值要与id的值对应
<label for="text">用户名:</label> <input type="text" id="text">
<input type="radio" id="man" name="sex"><label for="man">男</label>
<input type="radio" id="nv"><label for="nv">女</label>
9.4 <select>表单元素
在<option>中定义selected = "selected" 或直接写selected时,当前项即为默认选中项。
籍贯:
<select>
<option>北京</option>
<option>上海</option>
<option>广州</option>
<option>深圳</option>
<option selected>成都</option>
</select>
9.5 textarea 文本标签
cols 表示列, rows表示行(用CSS控制,不用记)
<textarea cols="50" rows="5">哇哈哈哈</textarea>
10. HTML练习案例
10.1 注册案例
1、选择生日,用的是select表单元素
2、提交是:<input type="submit" value="免费注册">
11. 查文档
w3cschool:w3school 在线教程
MDN:MDN Web Docs