1.1 认识html
- 1.什么是html
html是超文本标记语言
超文本 - 除了文字以外，还可以对图片、视频、音频、超链接、按钮、输入框等进行标记。
标记语言 - 不是编程语言，和MacDown语法一样，只是通过不同的标记让内容显示出来。
如果语法出错，不会影响其它正确标记的效果。
- 2.什么是html文件
文件后缀.html的文件；可以直接通过浏览器打开。一般情况下，html代码就写在html文件中。
- 3.html版本
狭义的H5 - html第5个大版本（支持移动网页开发。）
广义的H5 - html5+css3+js；统称H5
- 4.网页结构 - 树结构
整个网页是一个html标签，其中包含head和body标签。
- 5.标签
html就是通过不同的标签对网页内容进行标记的。
a.结构
双标签：<标签名 属性名1=属性值1 属性名2=属性值2>标签内容</标签名>
单标签：<标签名 属性名1=属性值1 属性名2=属性值2>
或<标签名 属性名1=属性值1 属性名2=属性值2/>
b.说明
标签名：是html提供的标签，不能随便命名，标签名前不能随便加空格。
属性：属性是放在单标签或双标签开始标签中，以 属性名=值 的形式出现，不同属性之间用空格隔开
属性顺序不会影响结果。
标签内容：双标签开始和结束标签之间的就是标签内容，标签内容可以是任何内容。（可以写文字也可以放其它任意标签。）
- 6.head标签
head标签主要包含以下内容：
meta标签：元标签 - charset="UTF-8"；设置编码方式
title标签：设置网页标题
link标签：导入外部文件（设置图标，导入css文件）
style标签：导入css代码
script标签：导入js文件和导入js代码；任何地方都可以出现
base标签：设置网页中的基本url
- 7.body标签
注意：html中不区分大小写，html=HTML
<!--DOCTYPE：对html版本进行说明
html：当前使用的是html5
-->
<!DOCTYPE html>
<!--网页基本结构-->
<html>
<!--head中除了title和其图标可见，其它都不可见。-->
<head>
<!--设置网页中文本编码方式-->
<meta charset="UTF-8">
<!--设置网页标题-->
<title>一剑光寒十九洲</title>
</head>
<!--网页内容部分，全是可见的-->
<body>
仰天大笑出门去，我辈岂是蓬蒿人！
</body>
</html>
1.2 文本标签
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>文本标签</title>
</head>
<body>
- 1.标题标签（h1-h6）
网页中标题的部分使用标题标签
我不是标题
<h1>我是标题1</h1>
<h2>我是标题2</h2>
<h3>我是标题3</h3>
<h4>我是标题4</h4>
<h5>我是标题5</h5>
<h6>我是标题6</h6>
- 2.段落标签（p）
双标签
网页中一段文字就用一个p标签；一个p标签的内容在一段显示，如果有多个段落需要多个p标签。
注意：html中在文本内容里面输入回车，在网页上显示时换行无效。
<p>我是段落1</p>
<p>我是段落2</p>
- 3.文本符号和强制换行标签
a.空格符号：
空一个像素
 一个空格键
b.换行标签（br）
单标签
剩下的百度！
<p> 我是段落3</p>
<p> 我是段落4<br/>我是下一行</p>
- 4.文字效果标签
a.文字加粗
b标签:双标签；单纯对文字进行加粗
strong标签:双标签；除了对文字加粗，还有强调的意思。
b.倾斜
i标签：双标签；单纯对文字进行倾斜
em标签：双标签；除了对文字倾斜，还有强调的意思。
c.水平线标签<hr />
单标签
hr标签：hr所在位置设置一条水平线
<p>文字<b>加粗</b></p>
<p>文字<strong>强调加粗</strong></p>
<p>文字<i>倾斜</i></p>
<p>文字<em>强调倾斜</em></p>
<p>文字<em><strong>强调加粗倾斜</strong></em></p>
<hr />
- 5.单纯的文字标签font
单纯的显示一段文字，多个font标签之间不会自动换行，多个p标签可以。
<font>我是font标签</font>
</body>
</html>
1.3 列表标签
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>列表标签</title>
</head>
<body>
- 列表标签
如果网页中多个内容，它们属于相同意义的内容，就可以用一个列表标签将他们放在一起。
- 1.无序列表（ul-li）
ul标签：代表整个列表
li标签：代表列表中的元素
注意：双标签之间可以是任意内容。
<p>高考学科</p>
<ul>
<li>数学</li>
<p>数学是比较简单的。</p>
<li>语文</li>
<li>英语</li>
<li>物理</li>
<li>化学</li>
<li>生物</li>
</ul>
- 2.有序列表（ol-li）
ol标签：代表整个列表
li标签：代表列表中的元素
<p>把大象装进冰箱的步骤：</p>
<ol>
<li>打开冰箱门</li>
<li>把大象塞进去</li>
<li>关上冰箱门</li>
</ol>
- 3.自定义列表dl-dt-dd
dl标签：代表整个列表
dt标签：列表中的分组
dd标签：每个分组中的元素
<dl>
<dt>四川省</dt>
<dd>成都市</dd>
<dd>广安市</dd>
<dt>辽宁省</dt>
<dd>大连</dd>
<dd>沈阳</dd>
</dl>
</body>
</html>
1.4 图片标签
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>图片标签</title>
</head>
<body>
- 图片标签（img）
网页上几乎所有的图片都是使用img标签直接或间接显示的
- 1.src属性：设置图片地址
a.本地图片：值为本地图片路径，一般使用相对路径。
b.网络图片：值为网络图片的url
- 2.title属性：设置图片标题
当鼠标停留在图片上才会显示出来。
- 3.alt属性：设置图片加载失败的提示信息
只有在图片加载失败时才会显示。
<img src="img/小狐狸1.png" alt="没有小狐狸1！" title="小狐狸"/>
<img src="img/小狐狸.png" alt="没有小狐狸！" title="小狐狸"/>
<img title="百度" src="https://www.baidu.com/img/bd_logo1.png?qua=high">
</body>
</html>
1.5 超链接标签
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>超链接标签</title>
</head>
<body>
<p>图1</p>
<img id="img1" src="img/533.jpg" alt="" />
<p>图2</p>
<img id="2" src="img/533.jpg" alt="" />
<p>图3</p>
<img src="img/533.jpg" alt="" />
-
超链接（a）
点击可以跳转到其它页面的内容就是超链接
<a href="">内容</a>
- 1.内容
超链接在网页中可点击的内容，可是文字或图片
<!--文字超链接-->
<a href="http://www.baidu.com">百度一下</a>
<!--图片超链接-->
<a href="">
<img src="img/校长.jpg"/>
</a>
<hr />
- 2.href属性：点击后跳转目标的地址
a.设置另一个网页的地址：跳转到指定网页
b.设置成另一个本地html路径：跳转到本地网页中
c.设置成当前页面标签对应的选择器：让当前网页滚动到指定位置
d.设置为空：刷新网页（会重新请求数据）
<a href="04-图片标签.html">本地网页</a>
<br />
<a href="#img1">回到图1</a>
<br />
<a href="#2">回到图2</a>
<br />
<a href="">刷新</a>
<br />
- 3.target属性
_self（默认值）：在当前页面中显示新的网页
_blank：在新的页面显示新的网页
<a href="http://www.baidu.com" target="_blank">新-百度一下</a>
</body>
</html>
1.6 表格标签
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>表格标签</title>
</head>
<body>
- 表格标签（table-tr-td）
table标签：代表整个表格
tr标签：代表表格中的一行
td标签：代表表格中每一个单元格
- 1.border：设置边框宽度（单位是像素）
默认情况下是设置整个表格边框的宽度为border，同时设置每个单元格的边框宽为1。
- 2.bordercolor：设置边框颜色
html中的颜色值：
a.颜色英文单词：red、black、yellow、pink等
b.rgb对应的16进制值：例如 #00ff00（绿色）、#ff0000（红色）
-
3.sellspacing:设置表格中单元格与单元格之间，以及单元格与边框之间的间距。
-
4.sellpadding:设置表格中内容到单元格边框之间的间距,单位是像素。
默认情况下，单元格的大小跟当前列中的内容的大小有关。
- 5.bgcolor：设置背景颜色
作为table属性：设置整个表格的背景颜色
作为tr属性：设置整行的背景颜色
作为td属性：设置单元格的背景颜色
- 6.width:设置宽度
作为table属性：设置整个列表宽度
作为td属性：设置当前列的宽度
-
7.height:设置宽度
作为table属性：设置整个列表高度
作为tr属性：设置当前行的高度 -
8.align：设置水平对齐方式
left（默认）：左对齐（默认）
right：右对齐
center：居中
作为table属性：让整个列表在网页中左右对齐和居中
作为tr属性：让一行中所有的单元格中的内容，在单元格中左右对齐和居中
作为td属性：让一个单元格中的内容，在单元格中左右对齐和居中
注意：html中所有的属性值都是写在双引号中的，双标签中内容是任意的。
<table border="1" bordercolor="#000000" cellspacing="0"
cellpadding="10" bgcolor="yellow" width="1000"
height=200 align="center">
<!--第一行-->
<tr height="100" align="center">
<!--第一行第一列-->
<td width="300">姓名</td>
<!--第一行第二列-->
<td>成绩</td>
<!--第一行第三列-->
<td>是否留级</td>
</tr>
<!--第二行-->
<tr bgcolor="pink">
<td align="center">小明</td>
<td>33</td>
<td>是</td>
</tr>
<!--第三行-->
<tr>
<td>小花</td>
<td bgcolor="red" align="right">99</td>
<td>是</td>
</tr>
</table>
</body>
</html>
1.7 复杂的表格
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>复杂的表格</title>
</head>
<body>
- 1.合并
colspan：列合并
rowspan:行合并
<table width="1000" height="500" bgcolor="white"
cellspacing="0" border="1">
<!--第一行-->
<tr bgcolor="white">
<td>11</td>
<td>12</td>
<td>13</td>
<!--当前单元格是由3列合成的一列-->
<td colspan="3">14</td>
</tr>
<!--第二行-->
<tr>
<td>21</td>
<td>22</td>
<!--当前单元格是2行合一行-->
<td rowspan="2">23</td>
<!--当前单元格是3列合1列，两行合一行-->
<td rowspan="2" colspan="3">24</td>
</tr>
<!--第3行-->
<tr>
<td>31</td>
<td>32</td>
</tr>
<!--第4行-->
<tr>
<td>41</td>
<td>42</td>
<td>43</td>
<td>44</td>
<td>45</td>
<td>46</td>
</tr>
</table>
</body>
</html>
007 表格练习
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<table border="1" cellspacing="0" cellpadding="5">
<tr>
<td>11</td>
<td>12</td>
<td>13</td>
<td>14</td>
<td>15</td>
</tr>
<tr>
<td rowspan="2">21</td>
<td>22</td>
<td colspan="2">23</td>
<td>24</td>
</tr>
<tr>
<td>31</td>
<td colspan="3">32</td>
</tr>
<tr>
<td>41</td>
<td>42</td>
<td colspan="2">43</td>
<td>44</td>
</tr>
<tr>
<td>51</td>
<td>52</td>
<td colspan="2">53</td>
<td>54</td>
</tr>
</table>
</body>
</html>
网友评论