HTML基础

HTML基础

浏览器内核

1.Trident内核

​ 该内核程序在1997年被IE4首次采用，现在的IE浏览器基本上都上这个内核

2.Gecko内核

​ 刚开始的Netscape6采用的此内核，现在的火狐也采用此内核

3.WebKit内核

​ 是苹果公司自主研发的内核，也是Safari浏览器的内核,Google Chrome和国产浏览器高速模式也使用此内核

4.Blink内核

​ 由Google和Opera Software开发的浏览器排版引擎，在Chrome(28及往后版本)、Opera中使用

渲染引擎

​ 渲染引擎的职责就是渲染，即在浏览器窗口中显示所请求的内容。默认情况下，渲染引擎可以显示html、xml文档及图片，它也可以借助插件（一种浏览器扩展）显示其他类型数据，例如使用PDF阅读器插件（所以想做浏览器插件的同学必须知道浏览器的工作原理），可以显示PDF格式，将由专门一章讲解插件及扩展，这里只讨论渲染引擎最主要的用途——显示应用了CSS之后的html及图片。
​ 不同的浏览器有不同的渲染引擎，对于渲染引擎的使用总结如下：

Trident(MSHTML)内核：IE,MaxThon,TT,The World,360,搜狗浏览器等
Gecko内核：Netscape6及以上版本，FF,MozillaSuite/SeaMonkey等
Presto内核：Opera7及以上
Webkit内核：Safari,Chrome等

HTML标签

html一般大致分为三个部分,head头部，一般用来放各种编码格式和链接外部文件，body主题部分，html的代码写在这里,有的尾部用来放script

标题p标签

<!--作为标题来显示内容-->
<h1></h1>
<h2></h2>
<h3></h3>
<h4></h4>
<h5></h5>
<h6></h6>
<!--h4字体的大小就是浏览器默认的字体大小，即16px,谷歌浏览器的大小不能小于12px
如果规定的字体大小小于12px也会被放到到12px去显示
-->

a标签

<!--通过a标签来定义一个链接-->
<a href='XXX'></a>
<!--href里写链接地址-->

p标签

<!--段落标签，写文字-->
<p>
    111111
</p>

img标签

<!--src里写图片的地址，alt表示图片未加载或出错时显示的文字,对于图像标签一般只写宽高其中的一个，以免失真-->
<img src='' alt='' width=''>

列表标签

 <!-- 无序列表 style='list-style-type:circle圆' -->
        <ul>
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
        </ul>
        <!-- 有序列表 type规定序号类型,A a i...-->
        <ol>
            <li>A</li>
            <li>B</li>
            <li>C</li>
            <li>D</li>
        </ol>
        <!-- 自定义列表 -->
        <dl>
            <dd>A</dd>
            <dd>B</dd>
            <dd>C</dd>
            <dd>D</dd>
        </dl>

大部分情况下，用的都是list-style:none;取消列表前面的点

属性

对于在标签内添加的我们称为属性(也可以在css中添加)，属性总是以名称/值对的形式出现

常见属性

属性	描述
class	为Html元素定义一个或多个类名
id	定义元素唯一id
style	规定元素的行内样式
title	描述元素的额外信息

链接外部文件

<link rel="stylesheet" href="./css/01-html.css">
<!--此例子是写在头部（head）的，意思是链接外部css文件01-html.css-->
<!--也可以用@import，link与import的区别在于，当运行到link时，html文件与css文件
会同时进行，即当运行到html内标签的时，如果css中有对应的style则会对此标签进行css的样式更改(即渲染)
，而import是会当程序加载完后在运行，在网速比较慢的情况下读取Html时候css未渲染，会出现闪烁现象
-->
<!--如果链接的是js文件，js在操作DOM（标签）的样式的时候，@import中的css不能被js控制-->

块级元素和行内元素

行内元素

又称为内联元素，行内元素的大小是靠本身内容的大小，宽高都设置无效

常见的特点:

• 与其他行内元素并排显示
• 设置宽高无效
• 默认的宽度就是文本长度
• 水平方向的padding和margin可以用
• 只能容纳文本元素和行内元素

a标签内可以放块级元素，但是连接里不能再放连接

标签	作用
a	标签定义超链接
abbr	表示一缩写形式
acronym	定义只取首字母缩写
b	定义字体缩写
bdo	可覆盖默认的文本方向
big	定义大号字体加粗
br/	定义换行
code	定义计算机代码文本
label	标签
select	创建单选或多选菜单
span	组合文档中的行内元素
small	定义小号字体

块级元素

块级元素通常独自占用一行，宽高和边距都可以设置

特点

• 独占一行

• 可以设置宽高边距

• 宽度默认为所在容器的宽高

• 可以容纳行内元素和块级元素

  部分标签内不能放块级元素p、h1~h6、dt

标签	作用
caption	定义表格标题
address	定义地址
dd	定义列表中定义条目
div	定义文档中的分区或节
dl	定义列表
dt	定义列表中的项目
fieldset	定义一个框架集
form	创建 HTML 表单
h1~h6	定义标题
hr	定义一条水平线
p	定义段落
table	定义表格
li	标签定义列表项目
ul	定义无序列表
ol	定义有序列表

对于行内元素和块级元素之间的转换，用

display:inline//转为行内元素

display:block//转为块级元素

display:inline-block//转为行内快元素

想要让块级元素合并成同一行，不转为行内元素的情况下，可以用浮动

给块级元素加上float:left/right，可以让他们往同一方向浮动，即可以合并为同一行

空元素

对于没有结束标签即没有内容的html元素称为空元素，

常见的空元素有

<area>
<base>
<br>
<col>
<colgroup> 
<command>
<embed>
<hr>
<img>
<input>
<keygen>
<link>
<meta>
<param>
<source>
<track>
<wbr>