HTML网页结构

1
2
3
4
5
6
7
8
9
<!DOCTYPE html>
<html>
    <head>
        ... 
    </head>
    <body>
        ....
    </body>
</html>

基础标签

h1-h6标签：Header

定义标题，用于给文本标题添加标题语义

1
<h1>xxxx</h1>

P标签：Pararaph

定义段落，告诉浏览器哪些是段落；Paragraph：段落

1
<p>xxxxxxxx</p>

hr标签：Horizontal Rule

定义水平线，再浏览器上显示一条分割线；Horizontal Rule：横向规则

1
2
<hr/> XTML规范
<hr>HTML规范

注释标签：Annotation

定义注释；Annotation：注释

1
<!--被注释的内容-->

img标签：image

定义图像，在网页上插入一张图片

1
<img src="xxx.jpg"/>

br标签：Break

定义简单的折行，让内容换行；Break：休息、打断

1
<br/>

a标签：anchor

定义超链接，从一个页面链接到另一个页面；anchor：锚

1
<a href="http://www.baidu.com">百度</a>

列表标签

ul标签：unordered list

定义无序列表，给一堆内容添加无序列表语义，列表中的条目不分先后

1
2
3
4
5
6
7
<h4>选择居住城市(CN)</h4>
<ul>
    <li>北京</li>
    <li>上海</li>
    <li>广州</li>
    <li>铁岭</li>
</ul>

ol标签：ordered list

定义有序列表；给一堆内容添加有序列表语义, 列表中的条目有先后之分

1
2
3
4
5
6
7
<h4>中国房价排行</h4>
<ol>
    <li>北京</li>
    <li>上海</li>
    <li>广州</li>
    <li>铁岭</li>
</ol>

dl标签：definition list

定义定义列表，给一堆内容添加列表语义, 通过dt罗列出列表的条目, 然后再通过dd给每个条目进行相应的描述

1
2
3
4
5
6
<dl>
    <dt>北京</dt>
    <dd>国家的首都, 看升国旗的地方</dd>
    <dt>上海</dt>
    <dd>魔都, 遍地是黄金的地方</dd>
</dl>

表格标签：table

  • table标签 定义表格
  • tr标签 定义行
  • td标签 定义单元格
1
2
3
4
5
6
7
8
9
10
11
<!--先定义一个表格, 然后通过tr告诉浏览器这个表格中一共有多少行, 然后再通过td告诉浏览器这一行中一共有多少个元素(一共有多少列)-->
<table>
    <tr>
        <td>1</td>
        <td>2</td>
    </tr>
    <tr>
        <td>3</td>
        <td>4</td>
    </tr>
</table>

image-20211215032125353

表单标签：form

定义供用户输入的 HTML 表单

1
2
3
<form>
    所有的表单内容，都要写在form标签里面
</form>

input标签

定义输入控件；input中的type属性有很多类型的取值, 取值的不同就决定了input标签的功能和外观不同

1
<input type="text"/>

image-20211215035333890

datalist标签

定义下拉列表，给输入框绑定待选项；可以手动输入其它答案

1
2
3
4
<datalist>
    <option>待选项内容</option>
    <option>待选项内容</option>
</datalist>
  1. 搞一个输入框
  2. 搞一个datalist列表
  3. 给datalist列表标签添加一个id
  4. 给输入框添加一个list属性,将datalist的id对应的值赋值给list属性即可

image-20211215040745407

textarea标签

定义多行的文本输入控件

  • cols属性表示columns“列”, 规定文本区内的可见宽度
  • rows属性表示rows“行”, 规定文本区内的可见行数
1
<textarea cols="30" rows="10">默认</textarea>

select标签

定义选择列表（下拉列表）,只能选择现有的，不能自由输入

1
2
3
4
5
6
7
选择籍贯:
<select>
    <option>北京</option>
    <option>河北</option>
    <option>河南</option>
    <option>山东</option>
</select>

image-20211215042455384

多媒体标签

video标签

定义视频内容

1
2
<video src="">
</video>

audio标签

定义音频内容

1
2
<audio src="">
</audio>

img标签：image

定义图像，在网页上插入一张图片

1
<img src="xxx.jpg"/>

details和summary标签

详情和概要标签；利用summary标签来描述概要信息, 利用details标签来描述详情信息，默认折叠

1
2
3
4
<details>
    <summary>概要信息</summary>
    详情信息
</details>

image-20211215043736307

meta标签

<meta>元素可提供有关页面的元信息（meta-information），比如针对搜索引擎和更新频度的描述和关键词。

元信息不会显示在客户端，但是会被浏览器解析。元信息可以被使用浏览器（如何显示内容或重新加载页面），搜索引擎（关键词），或其他 Web 服务调用。

keywords

实例 - 定义文档关键词，用于搜索引擎：

1
<meta name="keywords" content="HTML, CSS, XML, XHTML, JavaScript">

description

实例 - 定义web页面描述：

1
<meta name="description" content="HTM相关学习笔记">

author

实例 - 定义页面作者：

1
<meta name="author" content="作者名称">

refresh

实例 - 每30秒刷新页面：

1
<meta http-equiv="refresh" content="30">

Robts

告诉搜索引擎当前网页的作业, 写给网络爬虫看的内容

1
<meta name="robots" content="all|none|index|follow|noindex|nofollow" />
  • index: 告诉搜索引擎允许抓取当前页面
  • noindex:告诉搜索引擎不允许抓取当前页面
  • follow: 告诉搜索引擎可以从当前页面上找到链接，然后继续访问抓取下去
  • nofollow:告诉搜索引擎不允许从当前页面上找到链接, 拒绝其继续访问
  • all: 告诉搜索引擎允许抓取当前页面, 并且允许从此页找到链接继续访问
  • none: 告诉搜索引擎不允许抓取这个页面,并且不允许从此页找到链接、拒绝其继续访问
1
2
3
4
5
<!-- 不许抓取本页，但是可以顺着本页抓取索引别的链接 -->
<META NAME="ROBOTS" CONTENT="NOINDEX,FOLLOW">

<!-- 可以抓取本页，但是不许顺着本页抓取索引别的链接 -->
<META NAME="ROBOTS" CONTENT="INDEX,NOFOLLOW">