Day01-HTML

1.浏览器的内核

​ 浏览器内核包括两部分:渲染引擎和js引擎。渲染引擎负责读取网页内容，整理讯息，计算网页的显示方式并显示页面，js引擎是解析执行js获取网页的动态效果。

浏览器内核	名称
IE浏览器内核	Trident内核，也是俗称的IE内核；
Chrome浏览器内核	以前是Webkit内核，现在是Blink内核；
Safari浏览器内核	Webkit内核；
Firefox浏览器内核	Gecke内核，俗称Firefox内核；
Opera浏览器内核	最初是自己的Presto内核，现在是Blink内核；

2.web标准构成

• Web标准不是某一个标准，而是由W3C和其他标准组织定制的一系列标准的集合。
• 主要包括结构（Structure）、表现（Presentation）和行为（Behavior）三个方面。

含义	内容
结构	用于对网页元素的进行整理和分类，指的就是HTML
表现	用于设置网页元素的版式、颜色、大小等外观样式，指的就是CSS
行为	指网页模型的定义以及交互的编写，主要指的就是JavaScript

3.HTML常用标签

3.1标题标签

标题特点：加粗、上下有边距

<h1>一级标签</h1>
<h2>二级标签</h2>
<h3>三级标签</h3>
<h4>四级标签</h4>
<h5>五级标签</h5>
<h6>六级标签</h6>

3.2段落标签

表示文本的段落，上下有边距，独占一行段落后面由空白撑开

<p> 文本内容 </p>

3.3换行标签

强制换行

<br>

3.4水平线标签

加一个水平线

<hr/>

3.5div标签

html中使用最多的标签

<div> 块内容 </div>
<div> 块内容 </div>
<div> 块内容 </div>

是块级标签，独占一行

3.6span标签

span标签可以作为包含文本内容的标签，可以通过span标签设置内容的美化效果

<span> 文本内容 </span>
<sapn> 文本内容 </sapn>
<span> 文本内容 </span>

是行内元素

3.7标签总结

标签名	定义	说明
<h1>~<h6>	标题标签	作为标题使用，并且依据重要性递减
<p></p>	段落标签	可以把HTML文档分割为若干段落
<hr/>	水平分割线
<br/>	换行标签	强制文本换行
<div></div>	div标签	用来设置布局，一行只能有一个div标签
<span></span>	span标签	用来设置布局，一行上可以有多个span标签

4.文本格式化标签

标签	显示效果
<b> </b> <strong> </strong>	文本为粗体样式显示
<i> </i> <em> </em>	文本为斜体样式显示
<s> </s> <del> </del>	文本为加删除线样式显示
<u> </u> <ins> </ins>	文本为加下划线样式显示

5.图像标签img

添加图像标签如下

<img src=""/>

属性：

• src：该属性指定图片的所在的位置，可以是相对路径，也可以是绝对路径。

• alt：该属性指定一段文本，用来作为图片的提示信息、

• height：指定图片的高度，属性值可以是百分比，也可以是像素值。

• width：指定图片的宽度，属性值可以是百分比，也可以是像素值。

• title：光标放上去的提示信息。

  1.在同一文件夹：<img src="logo.gif"/>
  2.图片在HTML下一文件夹：<img src="img/logo.gif"/>
  3.图片位于HTML上一文件夹：<img src="../logo.gif"/>
  

6.链接标签

<a herf="跳转目标地址" target="目标窗口的弹出方式">文本或图像</a>

属性：

• herf：用于指定链接的目标的地址
• target：窗口的打开方式属性值有_self和_blank两种，_self为默认值，在覆盖当前窗口打开，_blank为在新窗口中打开方式。

注意点：

1.外部链接需要添加 http://www.baidu.com

2.内部链接可以直接访问 <a href="index.html">首页</a>

3.href属性值定义为"#“(href=”#")，表示该链接暂时为一个空链接

4.不仅可以创建文本超链接，在网页中各种网页元素图像，表格，音频，视频等都可以添加超链接

7.锚点定位

可以通过创建锚点链接，可以快速定位到目标内容

创建锚点链接分为两步：

1. 使用<a href="#id名">链接文本</a>创建链接文本（被点击的元素）

   <a href="#com">链接文本</a>
   

2. 使用相对应的id名标注跳转目标的位置。(找目标位置元素)

   <h1 id="#com">关于我们</h1>
   

8.网页的icon图标

• 添加icon图标

<link rel="icon" href="http://baidu.com/favicon.ico"

• meta元素作用

搜索引擎的关键字
<meta name="keywords" content="弱点工程，弱点工程...."/>
页面显示内容
<meta name="description" comtent="和智电子科技有限公司, 是一家集施工研发,销售,服务于一体的高新技术企业,公司已成功承揽过各类企业弱电工程,酒店弱电工程,政府弱电工程,安防监控工程,智能弱电工程,综合布线工程等。"

9.特殊字符

显示结果	描述	实体名称
	空格	&nbsp
	全角空格	&emsp
<	小于号	&lt
>	大于号	&gt
©	版权	&copy