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>