HTML简介，结构，标签以及标签语义

1.HTML基本结构

1.1文档声明

声明帮助浏览器正确地显示网页 ;

定义这个文档的类型，浏览器会先识别这句话，会按照这个类型去解析这个文档；

HTML 也有多个不同的版本，只有完全明白页面中使用的确切 HTML 版本，浏览器才能完全正确地显示出 HTML 页面；

一般高版本兼容低版本，所以在工作中我们默认写高版本就可以了(html5文档声明)

文档声明不区分大小写；

文档声明必须放在第一行(因为浏览器是从上到下解析的)

必须写文档声明，如果不写就会发生怪异事件；

文档声明不是一个标签，它只是一个声明；

HTML5
<!DOCTYPE html>

HTML 4.01
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

XHTML 1.0
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

html根元素

此元素告诉浏览器其自身是一个html文档

是由开始标签和结束标签组成的，HTML文件里面所有的内容都会放在这个元素内

语言类型 lang="en"

因为我们写的都是中文的，所以可以把这句话删掉

head头部元素

head 元素是所有头部元素的容器 , head内的元素可包含脚本，指示浏览器在何处可以找到样式表，提供元信息，等等。

以下标签都可以添加到 head 部分：<title>、<base>、<link>、<meta>、<script> 以及 <style>

title 标题

title 标签定义文档的标题。

html文档名称一个页面只有一个title元素

title元素里面的内容是放文字，一般显示在浏览器的页卡位

title 元素能够定义浏览器工具栏中的标题

提供页面被添加到收藏夹时显示的标题

显示在搜索引擎结果中的页面标题

base元素

base 标签为页面上的所有链接规定默认地址或默认目标（target）：

<head>
<base href="http://www.ls_zhainaya.cn/images/" />
<base target="_blank" />
</head>

link元素

link 引入外部CSS和网页标题前面的小图标（一般放在head头部内）
```
<link rel="stylesheet" type="text/css" href="index.css" />
<link rel="icon" href="icon.png" type="image/x-icon" />
```
- rel 不能缺少的 icon 图标
- href=”” 图标的地址或者路径
- type 类型 “image/x-icon” 图标可以省略，但是不建议省略

meta 元信息

meta 规定了html文档的元信息；

charset 文档编码 UTF-8 国际 gb2312 国标

name=”keywords” content=”关键字的内容”

name=”description” content=”描述网站的一句话”

script 元素

Script 标签用于定义客户端脚本，比如 JavaScript

style元素

style 标签用于为 HTML 文档定义样式信息，您可以在 style 元素内规定 HTML 元素在浏览器中呈现的样式

<head>
<style type="text/css">
body {
     
     background-color:yellow}
p {
     
     color:blue}
</style>
</head>

body元素

扫描二维码关注公众号，回复： 12475686 查看本文章

定义整个文档的主体部分，所有展示给用户的内容，都要在这个元素内

body中常用的html元素，文本内容，音频，视频，图片，表单等

2.HTML常用的标签

HTML 超链接 - a标签

超链接可以是一个字，一个词，或者一组词，也可以是一幅图像，您可以点击这些内容来跳转到新的文档或者当前文档中的某个部分。

当把鼠标指针移动到网页中的某个链接上时，箭头会变为一只小手

我们通过使用 <a>标签在 HTML 中创建链接

超链接a标签的标签属性：

href=“要跳转的链接地址” , 禁止a标签的链接跳转的行为href=“javascript:void(0)” 、 href=“javascript:;”

target="_blank" 在新窗口打开，当前的窗口还在

target="_self" 在当前窗口打开，当前窗口被覆盖

<a href="https://www.baidu.com" target="_blank">百度首页</a>

HTML 插入图片 - img标签

源属性 src: 图像的 URL 地址;

替换文本属性 alt: 该属性用来为图像定义一串预备的可替换的文本。替换文本属性的值是用户定义的;在浏览器无法载入图像时，替换文本属性告诉读者她们失去的信息。此时，浏览器将显示这个替代性的文本而不是图像。为页面上的图像都加上替换文本属性是个好习惯，这样有助于更好的显示信息，并且对于那些使用纯文本浏览器的人来说是非常有用的;

鼠标移上属性 title: 鼠标移上的图片文字描述说明

<img src="logo.jpg" alt="zhainan" title="zhainan"  width="100"  height="100" >

HTML 标题 - h1 ~ h6 标签
浏览器会自动地在标题的前后添加空行；默认情况下，HTML 会自动地在块级元素前后添加一个额外的空行，比如段落、标题元素前后

标题（Heading）是通过 <h1> - <h6> 等标签进行定义的

<h1>定义最大的标题；

<h6>定义最小的标题；

标题很重要

请确保将 HTML heading 标签只用于标题。不要仅仅是为了产生粗体或大号的文本而使用标题；

搜索引擎使用标题为您的网页的结构和内容编制索引；

因为用户可以通过标题来快速浏览您的网页，所以用标题来呈现文档结构是很重要的。

应该将 h1 用作主标题（最重要的），其后是 h2（次重要的），再其次是 h3，以此类推；

HTML 段落 - P标签

可以把 HTML 文档分割为若干段落；

浏览器会自动地在段落的前后添加空行（<p>是块级元素）

<p>This is a paragraph</p>
<p>This is another paragraph</p>

HTML 区块 - div 和 span标签
HTML <div>元素

HTML <div>元素是块级元素，它是可用于组合其他 HTML 元素的容器。

<div>元素没有特定的含义。除此之外，由于它属于块级元素，浏览器会在其前后显示折行。

如果与 CSS 一同使用，<div>元素可用于对大的内容块设置样式属性。

<div>元素的另一个常见的用途是文档布局。它取代了使用表格定义布局的老式方法。使用 <table> 元素进行文档布局不是表格的正确用法。<table> 元素的作用是显示表格化的数据

HTML <span>元素

HTML <span> 元素是内联元素，可用作文本的容器。

<span> 元素也没有特定的含义。

当与 CSS 一同使用时，<span> 元素可用于为部分文本设置样式属性。

HTML三大列表 - ul li、ol li、dl dt dd
无序列表

无序列表是一个项目的列表，此列项目使用粗体圆点（典型的小黑圆圈）进行标记;

无序列表始于 <ul> 标签。每个列表项始于 <li>;

列表项内部可以使用段落、换行符、图片、链接以及其他列表等等;

有序列表

有序列表也是一列项目，列表项目使用数字进行标记;

有序列表始于<ol>标签。每个列表项始于 <li>标签;

列表项内部可以使用段落、换行符、图片、链接以及其他列表等等;

定义列表

自定义列表不仅仅是一列项目，而是项目及其注释的组合；

自定义列表以 <dl> 标签开始。每个自定义列表项以 <dt> 开始。每个自定义列表项的定义以 <dd> 开始；

定义列表的列表项内部可以使用段落、换行符、图片、链接以及其他列表等等；

HTML 文本格式化标签

HTML 嵌套网页 - Iframe
iframe语法：该URL指向不同的网页

<iframe src="URL"></iframe>

iframe设置高度与宽度

height 和 width 属性用来定义iframe标签的高度与宽度

属性默认以像素为单位, 但是你可以指定其按比例显示 (如：”80%”)

<iframe src="demo_iframe.htm" width="200" height="200"></iframe>

iframe移除边框

frameborder 属性用于定义iframe表示是否显示边框。

设置属性值为 “0” 移除iframe的边框

<iframe src="demo_iframe.htm" frameborder="0"></iframe>

使用iframe来显示目标链接页面

iframe可以显示一个目标链接的页面

目标链接的属性必须使用iframe的属性，如下实例:

<iframe src="demo_iframe.htm" name="iframe_a"></iframe>
<p><a href="http://www.baidu.cn" target="iframe_a">baidu</a></p>

HTML 字符实体

3.HTML标签语义化

含义: 合理的标签做合理的事情

为什么要遵循标签语义化：

利于SEO优化（也就是搜索引擎的抓取，搜索引擎的爬虫也依赖于标记来确定上下文和各个关键字的权重）；

在样式丢失的时候，还是可以比较好的呈现结构；

更好的支持各种终端，例如无障碍阅读和有声小说等；

利于团队开发和维护，W3C给我们定了一个标准，那么团队中都遵循这个标准，那么代码的差异就会缩小，在开发和维护的时候就可以提高效率；

日常工作中怎样遵循标签语义化：

尽量减少使用无意义标签，例如span和div；

尽量不使用标签本身的css属性，例如b、font、s等标签，如果需要这些样式，那么使用css样式来进行添加；

在需要强调的部分，使用strong、em，但是样式尽量使用css样式来描述；

表格搭建时，使用表格头部 表格身体 表格尾部 ；

列表搭建时，使用<ul>无序列表</ul> <ol>有序列表</ol> <dl>定义列表；

4.相对路径与绝对路径

绝对路径

指带域名的文件的完整路径和磁盘中指定文件的全部路径

网址(网站的尾部)–a标签用的比较多

<img src="D:/xm/assest/image/1.jpg" alt="">
<a href="http://www.ls_zhainanya.cn">aaaa</a>

相对路径

是指在同一个文件夹下，通过一个参考点来找到其他文件

返回上一级 …/

同级之间直接写文件名

下一级用 /

5.标签的嵌套规范

1.块元素可以包含内联元素或某些块元素，但内联元素却不能包含块元素，它只能包含其它的内联元素

<div><h1></h1><p></p></div> —— 对

<a href=”#”><span></span></a> —— 对

<span><div></div></span> —— 错

2.块级元素不能放在<p>里面

<p><ol><li></li></ol></p> —— 错

<p><div></div></p> —— 错

3.有几个特殊的块级元素只能包含内嵌元素，不能再包含块级元素

这几个特殊的标签是： h1、h2、h3、h4、h5、h6、p、dt

4.ul,li/ol,li/dl,dt,dd拥有父子级关系的标签；ul、ol下都只能跟li，dl下只能跟dt.dd

<ul><li><a></a></li></ul> —— 对

<ul><a></a><li></li></ul> —— 错

<dl><dt><a></a></dt><dd></dd></dl> —— 对

<dl><a></a><dt></dt><dd></dd></dl> —— 错

5.a标签不能嵌套a标签

<a><a></a></a> —— 错

6.用户体验和常用SEO优化技巧

SEO（Search Engine Optimization）了提升网页在搜索引擎自然搜索结果中的收录数量以及排序位置而做的优化行为。简言之，就是希望百度等搜索引擎能多多我们收录精心制作后的网站，并且在别人访问时网站能排在前面

网站结构优化
最主要的要求就是网站结构层次结构要少，最好的是扁平化的网站结构设计

控制首页的链接。网站首页的链接最好在100个以内。

网站结构扁平化铺开，最好是三层到底。结构大概是首页-分类页-详细页。

导航设置，最佳导航设置是面包屑导航，用户在点击每个目录名称时可以到达其所在位置，面包屑导航可以让用户始终知道自己所在的位置。

保证网页的加载速度。单页大小最好不要超过100K

网页代码优化

网页的title，keywords，description一定要写，要精简全面。

网页使用语义化代码。

a标签要设置title属性；外部链接还要设置rel属性– –rel=”nofollow”，nofollow值会使得网络爬虫不顺着链接爬出。

所有的标题使用h1标签，样式可以使用css设置。

br标签只能用于文本换行。

table一定要使用caption设置表格题目。

strong用来设置重标，em设置斜体。

img标签一定要设置其alt属性。

HTML简介，结构，标签以及标签语义

HTML简介，结构，标签以及标签语义

1.HTML基本结构

1.1文档声明

2.HTML常用的标签

3.HTML标签语义化

4.相对路径与绝对路径

5.标签的嵌套规范

6.用户体验和常用SEO优化技巧

猜你喜欢