HTML 文档结构
HTML(Hyper Text Markup Language 超文本标记语言)基本文档结构是指组成一个基本的HTML页面所必须的元素标签。它的根节点是由一个文档声明 “<!doctype html>
” 和一个“<html>
”标签组成的,而<html>
标签下级(又称“子节点”)又包含“<head>
”和“<body>
”两个主要的标签,具体编写格式如下:
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
</body>
</html>
HTML 标签
HTML标签是由标签名、属性名、属性值和内容组成。
HTML 元素类别
html 元素分为 块级元素(block)、行内元素(inline)以及行内块元素(inline-block)。
display:block
block元素会独占一行,多个block元素会各自新起一行。默认情况下,block元素宽度自动填满其父元素的宽度。block元素可以设置width、height属性。块级元素及时设置了宽度,仍然会独占一行。block元素可以设置margin、padding属性。
display:inline
inline元素不会独占一行,多个相邻的行内元素会排在同一行里,直到一行排列不下,才会新换行,其宽度随元素的内容而变化。inline元素设置width、height属性无效。inline元素的margin和padding属性,水平方向的padding-left、padding-right、margin-left、margin-right都产生边距效果,但竖直方向的padidng-top、padding-bottom、margin-top以及margin-bottom不会产生边距效果。
display:inline-block
简单来说就是将对象呈现为inline对象,但是对象的内容作为block对象呈现。之后的内联对象会被排列在同一行内。比如我们可以给一个link(a元素)inline-block属性值,使其具有block的宽度高度特性又具有inline的同行特性。
HTML 常用标签
文本标签
标题:h1~h6
文本:span
段落:p
强调:em
粗体:b
斜体:i
删除线:s
上标:sup
下标:sub
语义化标签
头部:header
尾部:footer
导航:nav
文章:article
章节:section
侧栏:aside
地址:address
时间:time
标记:mark
布局:div
引用:blockquote
文档主要内容:main (块级标签)
详细信息:details,一般与 summary 标签一起使用,summary 作为details的第一个子标签使用
格式化标签
换行:br
水平分割线:hr
HTML 常用转义字符
":
"
&:
&
<:
<
>:
>
©:
©
®:
®
;¥:
¥
空格:
HTML 图片 ‘img’
html 图片 使用 ‘img’标签
常用属性
src:指定图片链接地址(必须)
width/height:设置宽度/高度
title:设置图片标题,鼠标悬浮在图片上时显示
alt:设置提示,当图片加载失败时会显示
HTML 超链接 ‘a’
a 标签是一个行内元素
常用属性
href:指定链接地址
target:规定“href”属性中指定的网页或文件以何种方式行进跳转或打开,其值包括:_blank、_self、_parent、_top以及iframe的name属性的值
利用超链接跳转到本页锚点
将a标签的“href”属性设置为“#”+“指定元素的ID值”后,该超链接不再是进行页面间的跳转或是文件的打开了,而是将页面滚动到本页面中ID属性值和“href”属性值“#”后的值所对应的值的地方,页面滚动的目标元素的上边缘将和浏览器内容窗口上边缘重合。
<div id="anchor"></div>
<a href="#anchor">点击跳转到锚点</a>
利用超链接下载指定文件
加上“download”属性,并指定一个文件下载后的名称即可。
超链接的回到顶部按钮
将href属性值设置为‘#top’即可。
嵌入式框架 iframe
常用属性
name:设置iframe的名称
width:设置iframe的宽度,值可以为像素(不用添加“px”单位)和百分数
height:设置iframe的高度,值可以为像素(不用添加“px”单位)和百分数
src:设置iframe元素内需要显示页面或文件的URL地址,该属性的值可以由与之关联的a标签点击设置(通过将a标签的“target”属性的值设置为该iframe的“name”属性的值进行关联)
frameborder:设置是否显示边框(0 表示不显示边框/ 1 表示要显示边框)
scrolling:设置是否允许滚动(quto/yes/no)
HTML 列表
html 列表包括无序列表、有序列表以及定义列表,其显示类型为块级元素。
无序列表 ul
常用属性
- type:列表项目符号类型(disc(默认)/circle/square)
使用示例
<ul>
<li>无序列表01</li>
<li>无序列表02</li>
<li>无序列表03</li>
</ul>
有序列表 ol
常用属性
type:列表项目符号类型(1(默认)/A/a/I/i)
reversed:倒序
start:起始值
使用示例
<ol>
<li>有序列表01</li>
<li>有序列表02</li>
<li>有序列表03</li>
</ol>
定义列表 dl
定义列表分为两层:第一层为定义的列表dl;第二层分为两个部分,即dt和dd,dt用于定义列表中的项目,dd用于描述定义的项目,它们的显示类型都为“块级元素(block)”。相对于“无序列表”和“有序列表”,这种列表由于其自身的结构原因,对需要进行名词性描述的列表更为适用。
使用示例
<dl>
<dd>HTML</dd>
<dt>创建Web页面</dt>
<dd>CSS</dd>
<dt>设置页面样式</dt>
<dd>JavaScript</dd>
<dt>让页面动态起来</dt>
</dl>
列表嵌套使用
无序列表与有序列表嵌套使用方式一致,这里以无序列表为例:
<ul>
<li>Web前端工程师
<ul>
<li>HTML</li>
<li>CSS
<ul>
<li>Bootstrap</li>
<li>LESS</li>
<li>SASS</li>
</ul>
</li>
<li>JS
<ul>
<li>JavaScript</li>
<li>jQuery</li>
<li>AngularJS</li>
<li>...</li>
</ul>
</li>
</ul>
</li>
<li>其他开发工程师</li>
</ul>
运行效果
HTML 表格
html 表格使用 ‘<table>
’标签
相关概念
thead:表头(表格标题及头部信息不等)
tbody:表中(表格显示的内容部分)
tfoot:表尾(表格说明与备注部分)
tr:行
th:单元格,作为行或列的标题呈现
td:单元格,作为内容单元格呈现
caption:表格主标题,位于表格之外
表格常用属性
width/height:设置宽度/高度
border:设置边框
align:设置表格对齐方式(left/center/right)
cellspacing:设置单元格与单元格之间的间距
cellpadding:设置单元格与内容之间的间距
bgcolor:设置表格背景颜色
background:设置背景图片
colspan:跨列 ‘
<td colspan="2"></td>
’rowspan:跨行 ‘
<td rowspan="2"></td>
’