前言
编译器：vs code 2019
快捷键：!（英文字符，快速创建html模板）
书写规范
HTML代码风格
- 尽量使用语义化标签
- 统一使用小写书写标签， 属性名也采用小写
- 闭合空的元素标签
- 属性值加引号
- 在写属性值时， 空格两边不要有等号
- 避免长的代码行
- 严格控制空行和缩进
- 多加注释
CSS代码风格
-
尽量不要采用内联样式
-
不要采用标签选择器
-
将相关类名写在相联的位置上，不要相隔太远， 不利于阅读
-
不要采用隐式的权重样式覆盖
-
属性书写顺序
-
定位属性： position, display, float, left, top, right, bottom, overflow
-
自身属性：width, height, margin, padding, border
-
文字样式：font , color
-
background
-
文本属性: text-align , text-overflow
-
其它属性
多加注释
提高浏览器回流， 提升DOM渲染性能
DOM树， CSS树 => render树 => 布局 ＝> 绘制
浏览器解析CSS顺序是按书写的顺序 => 顺序不当就会产生回流
基本结构标签：
<!DOCTYPE html> <!-- 声明标签，固定在<html>前，告诉浏览器当前页面采用HtML5版本显示 -->
<html lang="en"> <!-- lang定义当前文档显示的语言 en:英文 zn-CN:中文 -->
<head>
<meta charset="UTF-8"> <!-- charset存储字符集 统一使用UTF-8 -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
内容主体
</body>
</html>
常用结构标签
一、标题标签
特点：
（1）作为标题使用，一个标题独占一行
（2）默认加粗，序号越大，字体越小
（3）常用4号标题
<h1>一号标题</h1>
<h2>二号标题</h2>
<h3>三号标题</h3>
<h4>四号标题</h4>
<h5>五号标题</h5>
<h6>六号标题</h6>
二、段落标签
特点：
（1）把html文档分割成若干段落，不同段落之间会有间隔
（2）一个段落会根据浏览器的窗口自动换行，但是不会有间隔
<p>这是一个段落标签</p>
三、换行标签
特点：
（1）单标签
（2）强制换行，行与行之间没有间隔
这是第一行<br>这是第二行
四、文本格式化标签
特点:
（1）对文本字体进行标注
<strong>加粗</strong> 或 <b>加粗</b>
<em>倾斜</em> 或 <i>倾斜</i>
<del>删除<.del> 或 <s>删除</s>
<ins>下划线</ins> 或 <u>下划线</u>
五、布局标签（盒子）
特点：
（1）布局使用，划分区域
<div></div> 分割、分区，独占一整行
<span></span> 跨行、跨距，一行可有多个
六、图像标签
<img src="url" alt="替换文字" title="提示文本"/>
常用属性：
（1）alt图像显示不出来，用文字替换
（2）title提示文本，鼠标放到图像上提示信息
（3）width设置图像宽度
（4）height设置图像高度
（5）border给图像加边框
注：一般情况下只修改宽度或高度，图片会等比例进行缩放
url选择：
（1）同一级路径：直接写 “文件名”
（2）下一级路径：“文件夹/文件名”
（3）上一级路径："…/文件名"
七、超链接标签
<a href = "跳转url" target=”打开方式“> 文字信息 </a>
常用属性：
（1）target：打开窗口的方式，默认当前页面_self；新页面打开 _blank
（2）href = “#” 空链接
（3）href = “文件名” 下载链接
锚点链接设置：快速定位页面中的某个位置
（1）设置属性值 href = “#id名”
（2）目标位置设置id属性 id = “名称”
八、注释标签
快捷键：ctrl + /
<!-- 这是一段注释 -->
九、特殊字符
空格
小于号 <
大于号 >
十、表格标签
1、基本格式
<table>
<tr>
<td>第一行第一列</td>
<td>第一行第二列</td>
</tr>
<tr>
<td>第二行第一列</td>
<td>第二行第二列</td>
</tr>
</table>
常用属性: （写在table标签里）
（1）对齐方式：align = left / center / right
（2）边框：border
（3）单元格与内容之间的空白：cellpadding
（4）单元格与单元格之间的空白：cellspacing
（5）表格宽度：width
2、表头标签
<th> </th> 加粗居中
3、表格结构标签
<thead>表头</thead>
<tbody>表体</tbody>
4、合并单元格
rowspan：跨行合并 （目标单元格上侧）
colspan：跨列合并 （目标单元格左侧）
<table width = "500" height = "249" border="1" cellspacing = "0">
<tr>
<td></td>
<td colspan="2"></td>
</tr>
<tr>
<td rowspan="2"></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
</tr>
</table>
十一、列表标签
1、无序列表
<ul>
<li>选项一</li>
<li>选项二</li>
</ul>
特点：
（1）ul 标签中只能有 li 标签
（2）无序列表中没有顺序之分
（3）li 标签中可以放其他标签
2、有序列表
<ol>
<li>选项一</li>
<li>选项二</li>
</ol>
特点：
（1）ol 标签中只能有 li 标签
（2）li 标签中可以放其他标签
2、自定义列表
<dl>
<dt>标题</dt>
<dd>解释1</dd>
<dd>解释2</dd>
<dl>
特点：
（1）dl 标签中只能有 dt 和 dd 标签
十二、表单标签
1、基本框架
<form action="url" method="提交方式" name="表单域名称">
各种表单元素控件
</form>
2、元素控件
2.1 input 标签
<input type = "属性值" name = "元素名称" value = "提示文字">
特点：
（1）input为单标签
（2）type属性指定不同的控件类型
常用：
文本框
<input type = "text" name = "username" value = "请输入用户名" maxlength = "6">
密码框
<input type = "password" name = "pwd">
单选框
男 <input type = "radio" name = "sex" value = "男" checked = "checked">
女 <input type = "radio" name = "sex" value = "女">
复选框
吃饭 <input type = "checkbox" name = "hobby" value = "吃饭" checked = "checked">
睡觉 <input type = "checkbox" name = "hobby" value = "睡觉">
提交按钮
<input type = "submit" value = "提交按钮名称">
重置按钮
<input type = "reset" value = "重置按钮名称">
普通按钮 (结合JS使用)
<input type = "button" value="普通按钮名称">
上传文件
<input type="file">
label 标签： 用于绑定一个表单元素
<!-- 点击文字相当于点击按钮，for属性绑定元素id -->
<label for="sex">男</label>
<input type="radio" id="sex" >
2.2 select 标签
下拉框表单元素
<select>
<option selected="selected" >选项一</option>
<option>选项二</option>
<option>选项三</option>
</select>
2.3 textarea 标签
文本域表单元素，输入多行文本信息时使用
<textarea cols="每行字符数" rows="行数">默认文字</textarea>
830
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
