HTML基础1——html元素（文本标题段落表格列表等）、html属性（可度量不可度量属性）
文章目录
- HTML基础
-
- 两个概念
- 常用html元素
-
- 段落
- 文本
- 标题、分割线、注释
- 列表
- 表格
-
- border属性
- colspan和rowspan属性
- 其他属性align, bgcolor等
- html属性
-
- 不可度量属性
-
- src属性
- alt属性
- 对齐
- 可度量属性
-
- 文字
- 线条
- 图片
- 必须结合属性的元素
-
- 图片、音频、视频
- 超链接
-
- href属性
- target属性
HTML基础
两个概念
学习html语言需要掌握两个基本概念：html元素、html属性。
html由html元素来组成。html元素使用成对的tags，tags中间为内容（using a start tag and an end tag, and with the content in between），此外有一些单独出现的tags（如br, hr, img等）。
html属性用来修饰html元素，比如p标签可以使用align属性来标识对齐，比如font标签可以用size和color标识文本的大小与颜色。
一些html元素必须结合属性使用，如图像元素必须指定src属性。
常用html元素
段落
paragraphs使用
来标识，使用
来强制换行（
也可，加上结束符是为了兼容XHTML，具体可参考stackoverflow的解释)。新的段落会自动加上一个空白行（所以才需要br来换行）
例子：
<html>
<head>
<title>hello worldtitle>
head>
<body>
<p>This is a paragraphp>
<p>This is another paragraphp>
<p>This is <br />a line breakp>
body>
html>
文本
HTML支持多种文本风格。
需要注意的是浏览器将em和i标签都显示为斜体，实际上em表示着重（不同的是em存在&emsp加上分号表示四个空格之类的用法）；将stong和b标签都显示为粗体，实际上strong也表示着重。
示例如下：
<html>
<head>
<title>hello worldtitle>
head>
<body>
<p>regular textp>
<p>regular text<b>bold textb>p>
<p>regular text<strong>strong textstrong>p>
<p>regular text<big>big textbig>p>
<p>regular text<small>small textsmall>p>
<p>regular text<i>italic texti>p>
<p>regular text<sub>subscripted textsub><p>
<p>regular text<sup>superscripted textsup><p>
<p>regular text<ins>inserted textins><p>
<p>regular text<del>delted textdel>p>
body>
html>
标题、分割线、注释
标题的标签从h1-h6，分割线为hr，注释为!–your comment–
示例如下：
<html>
<head>
<title>hello worldtitle>
head>
<body>
<h1>first sectionh1>
<h2>first part of first sectionh2>
<h1>second sectionh1>
<hr>
body>
html>
列表
有序列表为ol标签，无序为ul标签；每列用li标签
<ul>
<li>redli>
<li>blueli>
<li>greenli>
ul>
效果为
- red
- blue
- green
表格
表格由table标签开始和结束
表格按照行堆叠，行标签为tr；每个行标签下包括多个列标签，列标签为td。例如
<table>
<tr><td>atd><td>btd><td>ctd>tr>
<tr><td>dtd><td>etd><td>ftd>tr>
table>
效果为
| a | b | c |
| d | e | f |
border属性
对一些html元素如图片可以增加边缘即border属性，指定px值，例子为：
<table border="10px">
<tr><td>atd><td>btd><td>ctd>tr>
<tr><td>dtd><td>etd><td>ftd>tr>
table>
效果为
| a | b | c |
| d | e | f |
colspan和rowspan属性
表示表格跨多行和多列
例子：
<table>
<tr><td>atd><td>btd><td>ctd>tr>
<tr><td colspan="3">dtd>
table>
效果为
| a | b | c |
| d | ||
其他属性align, bgcolor等
align, bgcolor等也可结合表格使用
例子：
<table align="center" border="10px">
<tr><td bgcolor="yellow">atd><td>btd><td>ctd>tr>
<tr><td colspan="3">dtd>
table>
效果为
| a | b | c |
| d | ||
html属性
不可度量属性
src属性
src（source属性）用于指定媒体文件的url地址（或本地相对路径）
例子（插入图片）
<img src="https://bkimg.cdn.bcebos.com/pic/0b46f21fbe096b63df6a7b5b01338744ebf8ac4d">
alt属性
对于图片、音频视频等可能存在导入不成功的问题，增加一个alt属性在导入失败时显示提示文本。
例子
<img src="a_wrong_url" alt="load failed">
对齐
例子
<p align="center">aligned to centerp>
常用的就是居中、左对齐、右对齐
可度量属性
文字、线条、图片等html元素都有大小粗细等属性。
文字
文字的大小颜色可以这样指定：
<font size="3" color="purple">examplefont>regular text
线条
线条的长短指定可以使用
<hr width="20px">
<hr width="20%">
图片
使用height和width指定图片的高度和宽度，可以指定长度（px)或比例（%）
<img src="img_url" hight=50% width=50%>
必须结合属性的元素
图片、音频、视频
用img、audio、video标签指定，必须指定src属性(source属性)。
例子（插入图片）
<img src="https://bkimg.cdn.bcebos.com/pic/0b46f21fbe096b63df6a7b5b01338744ebf8ac4d">
超链接
用a标签指定
href属性
a标签必须指定href属性（Hypertext REFerence属性）。
例子：
<a href="https://www.baidu.com">www.baidu.coma>
target属性
a标签可以指定target属性，这决定如何打开链接（如打开新标签页等方式）
属性值_blank标识链接在新标签页打开
<a href="https://www.baidu.com" target="_blank">www.baidu.coma>