【前端】HTML

• ！+ 回车 = 快速生成代码框架
• lang 语言
• charset 浏览器解码规则

1.HTML标签

注释标签：ctrl + /

标题标签：<h1></h1> - h6 数字越大，字体越小

段落标签：<p></p> 标签内回车解析为 空格

换行标签：<br/> 或 <br'>

2.格式化标签

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

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

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

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

3.img标签_src属性

img必须搭配src使用，src指定图片路径

<img src="绝对路径 / 相对路径" alt="图片无法显示" title="这是一张图片" width="10px" border="4px">

• alt：替换文本，当文本不能正确显示时会显示一个替换的文字
• title：提示文本，鼠标放到图片上会有提示
• width/height：控制高度宽度，改一个就行，另一个会等比例缩放
• border：边框，参数是宽度的像素

4.a标签

4.1href属性

超链接

<a href="https://www.baidu.com/">跳转到百度</a>

<a href="#">在当前页面</a>

4.2target属性

打开方式默认为_self，如果是_blank则用新的标签页打开

5.表格标签

• table：表示整个表格，其后设置表格参数
• tr：表示表格的一行
• td：表示一个单元格
• th：表示表头单元格，会居中加粗，指一个
• thead：表格的头部区域，指一行

表格参数

• align：表格整体相对于周围元素的对齐方式，align="center/right/left"
• border：边框 ""表示没边框
• cellpadding：内容距离边框的距离
• cellspacing：单元格之间的距离
• width/height：设置尺寸

合并单元格：

6.列表标签

6.1无序列表

快速生成列表： ul>li*4 + 回车 = 4行无序列表

无序列表属性：

type属性：写在ul后，type="disc/square/circle" ，更改序列形状

6.2有序列表

快速生成列表： ol>li*4 + 回车 = 4行有序列表

有序列表属性：

type属性：写在ol后，type="a/A/i/I/1" ，更改序列形状

其中 a/A:小/大写英文字母 i/I:小/大写罗马数字 1:数字编号(默认)

start属性：start="2"，编号从2开始

6.3自定义列表

快速生成列表： dl>dt>dd*4 + 回车 = 4行列表

dt后为自定义列表标题

表单标签：完成和服务器的一次交互

表单域：包含表单元素的区域，form标签

<form action="https://www.baidu.com/"> </form>

表单控件：输入框，提交按钮等，input标签，写在form标签内

姓名<input type="text"> /*文本框*/
密码<input type="password"> /*密码框*/
性别<input type="radio" name="gender">男 /*单选框*/
   <input type="radio" name="gender" checked="checked">女
爱好<input type="checkbox">画画 /*复选框*/
    <input type="checkbox">唱歌
/*按钮框*/
<input type="button" value="我是个按钮" onclick="alert('hello')"> /*普通按钮*/
<input type="submit" value="提交" name="course"> /*提交按钮*/
<input type="reset" value="清空"> /*清空按钮*/
<input type="file"> /*选择文件*/

7.lable标签_for属性

写在单选框或复选框代码前，点击"文字"效果等同于点击"框"

8.select标签_option属性

下拉选择，使用selected设置默认选项

9.texarea标签

长文本框

<texarea name="" id="" cols="30" rows="10"></texarea>

10.无语义标签

没有固定的用途，啥都可以干

div独占一行，span不独占一行

<div>

    <span>吃饭</span>

    <span>睡觉</span>

</div>

<div>吃饭</div>

<div>睡觉</div>

11.特殊字符

空格：&nbsp;

小于号：&lt;

大于号：&gt;

按位与：&amp;

---