[编程经验] HTML基础标签

作者：CC下载站日期：2018-04-15 22:09:21 浏览：3060 分类：web

HTML基础标签

!-- HTML标签 --
html
!-- 网页头部 --
head
!-- 设置字符集为UTF-8 --
meta charset="utf-8"
!-- 链接CSS样式表（外部样式表）--
link rel="stylesheet" href="css.css"
!-- 网站标题 --
titleHTML基础标签/title
!-- 内部样式表 --
style
*{
margin: 0px;
padding: 0px;
}
/style
/head
body
!-- 标题标签（h1---h6） --
h1我是H1/h1
!-- 段落标签 --
p我是段落P/p
!-- 链接标签 --
a href=""我是a链接/a
!-- 图像标签 --
img src=""
!-- 水平线 --
hr
!-- 换行标签 --
br
/body
/html

块级元素
注释：默认情况下，HTML 会自动地在块级元素前后添加一个额外的空行，比如段落、标题元素前后。

a标签：HTML 链接语法
a href="url"Link text/a
HTML 链接 - target 属性
使用 Target 属性，你可以定义被链接的文档在何处显示。
_blank:新窗口打开
_parent:父窗口打开
_self:当前窗口
atarget="_blank"Visit W3School!/a

img:图像标签（img）和源属性（Src）
在 HTML 中，图像由 img 标签定义。
img 是空标签，意思是说，它只包含属性，并且没有闭合标签。
要在页面上显示图像，你需要使用源属性（src）。

src 指 "source"。源属性的值是图像的 URL 地址。

定义图像的语法是：
img src="url" /

替换文本属性（Alt）
img src="boat.gif"
在浏览器无法载入图像时，替换文本属性告诉读者她们失去的信息

图像对齐
img src ="/i/eg_cute.gif" align ="left"
带有图像的一个段落。图像的 align属性设置为"left"。图像将浮动到文本的左侧。
网页布局

HTML5 语义元素
header 定义文档或节的页眉
nav 定义导航链接的容器
section 定义文档中的节
article 定义独立的自包含文章
aside 定义内容之外的内容（比如侧栏）
footer 定义文档或节的页脚
details 定义额外的细节
summary 定义 details 元素的标题

HTML 块元素(独占一行)
块级元素在浏览器显示时，通常会以新行来开始（和结束）。
例子：h1, p, ul, table

HTML div 元素
HTML div 元素是块级元素，它是可用于组合其他 HTML 元素的容器。
div 元素没有特定的含义。除此之外，由于它属于块级元素，浏览器会在其前后显示折行。

HTML 内联元素
内联元素在显示时通常不会以新行开始。
例子：b, td, a, img

HTML span 元素
HTML span 元素是内联元素，可用作文本的容器。
span 元素也没有特定的含义。