Skip to content

HTML

https://www.w3school.com.cn/html/html5_intro.asp

https://developer.mozilla.org/zh-CN/docs/Learn/HTML

doctype的意义是什么？
让浏览器以标准模式渲染；让浏览器知道元素的合法性

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
<!DOCTYPE html>
<html lang="zh">
<head>
  <meta charset="UTF-8">
  <title>Page Title</title>
</head>
<body>

</body>
</html>

每个网页都包含 DOCTYPE、html、head 和 body 元素，它们是网页的基础。
在这个页面中，可以定制的内容包括两项，一是赋予 lang 属性的语言代码，二是<title>和</title>之间的文字

<body>开始标签以上的内容都是为浏览器和搜索引擎准备的。
<!DOCTYPE html>部分(称为 DOCTYPE)告诉浏览器这是一个 HTML5 页面。DOCYTPE 应该始终位于页面的第一行。

https://developer.mozilla.org/zh-CN/docs/Web/HTML

常见元素

header 区域的元素：
meta, title, style, link, script, base

body 区域的元素：

  • div/section/article/aside/header/footer
  • p, span/em/strong
  • table/thead/tbody/tr/td
  • ul/ol/li/dl/dd
  • a
  • form/input/select/textarea/button 表单元素

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"> viewport用来适配移动端

<base href="/">

重要属性

  • a[href, target]
  • img[src, alt]
  • table td[colspan, rowspan]
  • form[target, method, enctype]
  • input[type, value]
  • button[type]
  • select>option[value] 下拉框
  • label[for] 单选框或复选框说明

默认样式

CSS Reset

https://meyerweb.com/eric/tools/css/reset/

https://yuilibrary.com/yui/docs/cssreset/

1
2
3
4
5
6
<style>
  * {
    margin: 0;
    padding: 0;
  }
</style>

http://necolas.github.io/normalize.css/

图像

<img src="/images/logo.png" width="258" height="39" />

  • alt 属性
    alt属性用来为图像定义一串预备的可替换的文本
    <img src="boat.gif" alt="Big Boat">
  • title 属性
    鼠标放到图片上时可以显示 title 属性中的内容
  • jpg 图片：有损压缩，会影响画质，文件体积小，不支持透明通道
  • png 图片：无损压缩，不影响画质，文件体积大，支持透明通道
  • gif 图片: 动图

span 标签

<span>标签是没有语义的，它的作用就是为了设置单独的样式用的
好日子<span style="font-size:30px;color:red;">红红火火</span>
好日子红红火火

链接

  • 空链接, 回到页面的最顶上
    <a href="#">链接文字</a>
  • target 属性 <a href="http://www.nocilantro.cn" target="_blank">欢迎访问不要香菜个人网站</a>
    欢迎访问不要香菜个人网站
  • 文本可以替换成图片，此时点击图片即可打开链接
  • id 属性
    id 属性可用于在一个 HTML 文档中创建书签标记
    <a id="tips">Useful Tips Section</a>
  • 书签标记：锚点
    <a href="#tips">Visit the Useful Tips Section</a>

换行标签

<br>

列表

  • 无序列表: 内容列表，ul+li 无顺序关系
1
2
3
4
<ul style="list-style-type:circle">
    <li>无序列表1</li>
    <li>无序列表2</li>
</ul>

  • 有序列表: 内容列表 ol+li 有顺序关系

  • 自定义列表: 内容标题+内容 列表 dl+dt+dd

1
2
3
4
5
6
<dl>
<dt>Coffee</dt>
<dd>- black hot drink</dd>
<dt>Milk</dt>
<dd>- white cold drink</dd>
</dl>
Coffee
- black hot drink
Milk
- white cold drink

文本格式化标签

标签 描述
<b> 定义粗体文本
<em> 定义着重文字
<i> 定义斜体字
<small> 定义小号字
<strong> 定义加重语气
<sub> 定义下标字
<sup> 定义上标字
<ins> 定义插入字
<del> 定义删除字

布局

1
2
3
4
5
<!-- div: 容器 -->
布局：
<div style="background: yellow; height: 100px;">导航</div>
<div style="background: blue; width: 20%; float: left; height: 300px;">菜单</div>
<div style="background: red; width: 80%; float: left; height: 300px">内容</div>
导航
菜单
内容

块级、行级元素，嵌套规则

  • 块元素 block ：独立成一行，可以设置宽高 默认宽高 100%
    • 文字类块元素: p、h1~h6
    • 容器类块元素: div、table tr td th、form、ul li oi dl dt dd
  • 行元素(inline)：不独立成一行，不可以设置宽高，内容决定宽高
    a、img、input、strong、em、del、span

  • inline-block 不独占一行，但可以设置宽高，例如select元素

  • 嵌套规则

    • 块元素可以嵌套行元素: <div>这是 div <a href="">这是a</a></div>
    • 行元素可以嵌套行元素: <a href="">这是个<strong>aa</strong></a>
    • 行元素不可以嵌套块元素
    • 文字类块元素不可以嵌套块元素
    • 容器类块元素可以嵌套块元素

a可以嵌套div,<a href="http://www.baidu.com"><div>hhhhh</div></a>

表单

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
<!-- 注册页面 -->
<!-- 默认为 GET 方式 -->
<form action="" method="POST"> 
    用户名:<input type="text" name="user"><br>
    密码:<input type="password" name="pas"><br>
    性别:<input type="radio" name="sex" value="male"> 男
        <input type="radio" name="sex" value="female"> 女
        <input type="radio" name="sex"> 中性
    <br>
    <!-- 复选 -->
    兴趣:<input type="checkbox" name="ckb" value="book">看书
        <input type="checkbox" name="ckb" value="eat">吃饭
        <input type="checkbox" name="ckb" value="play">打游戏
    <br>    
    城市: <select name="city">
            <option value="BJ">北京</option>
            <option value="SH">上海</option>
        </select>
    <br>
    <input type="submit">
</form>

有表单的地方都建议放一个form属性

form的作用有哪些？
直接提交表单；使用submit/reset按钮；便于浏览器保存表单；第三方库可以整体提取值；第三方库可以进行表单验证

按钮

1
<button type="submit">Submit</button>

还有一个type="reset"属性

表格

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
<table border="1">
    <tr>
        <th>部门</th>
        <th>姓名</th>
        <th>性别</th>
        <th>工资</th>
    </tr>
    <tr>
        <td>开发组</td>
        <td>小明</td>
        <td>男</td>
        <td>1w</td>
    </tr>
    <tr>
        <td>开发组</td>
        <td>小明明</td>
        <td>女</td>
        <td>1w</td>
    </tr>
    <tr>
        <td>开发组</td>
        <td>小小明</td>
        <td>男</td>
        <td>1w</td>
    </tr>
</table>
部门 姓名 性别 工资
开发组 小明 男 1w
开发组 小明明 女 1w
开发组 小小明 男 1w 
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<table border="1">
    <tr>
        <th>部门</th>
        <th>姓名</th>
        <th>性别</th>
        <th>工资</th>
    </tr>
    <tr>
        <td rowspan="4">开发组</td>
        <td>小明</td>
        <td>男</td>
        <td>1w</td>
    </tr>
    <tr>
        <td>小明明</td>
        <td>女</td>
        <td>1w</td>
    </tr>
    <tr>
        <td>小小明</td>
        <td>男</td>
        <td>1w</td>
    </tr>
    <tr>
        <td colspan="2">工资合计</td>
        <td>3w</td>
    </tr>
</table>
部门 姓名 性别 工资
开发组 小明 男 1w
小明明 女 1w
小小明 男 1w
工资合计 3w

字符实体

显示结果 描述 实体名称 实体编号
空格 &nbsp; &#160;
< 小于号 &lt; &#60;
> 大于号 &gt; &#62;
& 和号 &amp; &#38;
" 引号 &quot; &#34;
' 撇号 &apos; (IE不支持) &#39;
￠ 分 &cent; &#162;
£ 镑 &pound; &#163;
¥ 人民币/日元 &yen; &#165;
€ 欧元 &euro; &#8364;
§ 小节 &sect; &#167;
© 版权 &copy; &#169;
® 注册商标 &reg; &#174;
™ 商标 &trade; &#8482;
× 乘号 &times; &#215;
÷ 除号 &divide; &#247;

我是用<span style="color: red"><strong>&lt;br&gt;</strong></span>换行
我是用<br>换行

音标符

`音标符 字符 Construct 输出结果
̀ a a&#768; à
́ a a&#769; á
̂ a a&#770; â
̃ a a&#771; ã
̀ O O&#768; Ò
́ O O&#769; Ó
̂ O O&#770; Ô
̃ O O&#771; Õ