前言
编译器: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>