HTML&CSS速查表 – 二十三画生

本文最后更新于125 天前，其中的信息可能已经过时，如有错误请发送邮件到3014096835@qq.com

HTML

标题标签<h1>

<h1>…</h1>（h1到h6重要程度依次降低

<h1>一级标题</h1>
...
<h6>六级标题</h6>

水平线标签<hr>

<hr>

样式

图片标签<img>

绝对路径：绝对磁盘路径，绝对网络路径
相对路径：./当前目录，../上级目录
width:宽度，height:高度，单位：px(像素) %(相对父级元素大小)

<img src="URL" width="" height="">

无语义标签<span>

无语意，仅用来分类

<span></span>

超链接<a>

href:指定资源url
target:指定在何处打开资源链接_self默认值，在当前页面打开_blank在空白页面打开

<a href="" target="">#</a>

视频标签<video>

src:规定视频的url
controls:显示播放控件
width:播放器的宽度
height:播放器的高度

<video src="URL" controls="controls"></video>

音频标签<audio>

src:规定音频的url
controls:显示播放控件

<audio src="URL" controls="controls"></audio>

段落标签<p>

<p>段落</p>

文本加粗标签<b> / <strong>

<b>粗体</b>
<strong>粗体</strong>

换行标签<br>

<br>

空格占位符 

表格标签<table>

<table> 定义表格整体可以包裹多个<tr>	border：规定表格边框的宽度 width：规定表格的宽度 cellspacing：规定单元之间的空间
<tr>表格的行	可以包裹多个<td>
<td>表格单元格	可以包裹内容，如果是表头单元格，可以替换为<th>

<table border="" width="" cellspacing="">
        <tr>
            <th>序号</th>
            <th>名称</th>
        </tr>
        <tr>
            <td>1</td>
            <td>2</td>
        </tr>
    </table>

表单标签<form>

属性

action：规定当提交表单时向何处发送表单数据，URL

method：规定用于发送表单数据的方式，GET，POST

GET使用URL提交
POST使用数据包提交

表单项

<input>定义表单项

属性：

text提交文本
password提交密码
radio单选项
checkbox选项框
file文件
date日期
time时间
datetime-local日期和时间
email邮箱
number数字
button按钮
reset重置
submit提交

<select>定义下拉列表

<textarea>定义文本域<label>

例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>表单</title>
</head>
<body>
    <form>
        姓名：<input type="text" name="username"><br>
        密码：<input type="password" name="password"><br>
        性别：<label><input type="radio" name="gender" value="nan">男</label>
              <label><input type="radio" name="gender" value="nv">女</label><br>
        爱好：<label><input type="checkbox" name="hobby" value="java">java</label>
             <label><input type="checkbox" name="hobby" value="game">game</label>
             <label><input type="checkbox" name="hobby" vlaue="sing">sing</label><br>
        图像：<input type="file" name="image"><br>
        生日：<input type="date" name="birthday"><br>
        时间：<input type="time" name="time"><br>
        日期时间：<input type="datetime-local" name="datetime"><br>
        邮箱：<input type="email" name="email"><br>
        年龄：<input type="number" name="number"><br>
        学历：<select name="degree">
                <option value="1">----请选择----</option>
                <option value="2">大专</option>
            </select><br>
        描述：<textarea name="description" clos="40" rows="10"></textarea><br>
        <input type="button" value="按钮">
        <input type="reset" value="重置">
        <input type="submit" value="提交">
    </form> 
</body>
</html>

CSS

CSS引入方式

行内样式：写在标签的style属性中
内嵌样式：写在style标签中
外联样式：写在一个单独的.css文件中（通过link标签在网页中引入）<link rel=”stylesheet” href = “”>

CSS选择器：

元素选择器
id选择器 #id
类选择器 .类
优先级：ID>类>元素

颜色属性：color:设置文本内容的颜色

字体大小：font-size:px;

文本样式：text-decoration规定添加到文本的修饰，none表示定义标准的文本

text-indent：设置首行缩进

line-hight：设置行高

text-align：设置文本对齐