2018-10-29day1-HTML标签基础
2018-10-29 本文已影响0人
MW演员
一、web标准
- a.结构标准（HTML）：决定网页的内容；
- b.表现标准（css）：决定网页内容的布局和样式；
- c.行为标准（JavaScript）：决定网页中的行为和动作（变化）；
二、HTML
- 1、超为本标记语言
标记语言：通过不同的标记让内容以指定的格式展示出来，特点：标记出错不会影响其他的标记解释。 - 2、超文本：除了文文本以外还可以标记图、超链接、音频、视频、flash、输入框按钮等。
三、HTML文件
就是后缀是.HTML的文件，可以直接用浏览器打开（展示效果），
四、HTML结构
-
1、一个HTML标签包含一个HTML标签和两个平行的head标签和body标签（如下）
<html>
<head></head>
<body></body>
</html> -
2、head中的内容除了title和icon以外，其他的都不可见
-
3、body里的内容一般显示在网页上，一般都是可见的
五、<!DOCTYPE html>标签
- 1、用来说明HTML版本的
注意：<!DOCTYPE html>中的HTML代表的就是HTML5的版本，其他版本的对应去写
注意：HTML标记对大小写不敏感（可以全部大写、也可以全部小写、也可以大小写混合使用） - 2、mate标签：
<meta charset="utf-8" /> - 3、title标签
- 设置网页标题
- <title>百度一下，你就知道</title>
六、标签的语法
- 1、单标签和双标签（双标签页也称常规标签）
注意：标签就是标记，属性位置没有要求（没有先后顺序） - 2、双标签：<标签名 属性名1：属性值2 属性名2：属性值2....>内容</标签名>
- 3、单标签：<标签名 属性名1：属性值..../>(有斜杠)
<标签名 属性名1：属性值....>（无斜杠）
注意：HTML重点额标签不能自己随便命名，标签名和<以及标签名和/之间都不能有空白> - 4、属性：属性可有可无，属性和属性值之间用冒号连接，多个属性之间用空格隔开
- 5、标签内容：在开始标签和结束标签之间，标签的内容可以是任意的（也可以是文本也可以是其他标签）
七、head中的标签（title、base、mate、link、style、script）
- 1、mate：设置网页的元数据（单标签）
- 2、mate属性：name=“属性名” content=“内容”
- 3、title：设置标题的
- 4、mate：定义元数据（）
八、body中的标签
- body中的的标签主要是用来在网页中显示信息的
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>文本标签</title>
</head>
<body>
<!-- 标题标签 -->
<h1>标题1</h1>
<h2>标题2</h2>
<h3>标题3</h3>
<h4>标题4</h4>
<h5>标题5</h5>
<h6>标题6</h6>
<!-- 段落标签
1、一个段落一个p标签，特点：每个p标签里面的内容显示完成以后会自动换行
-->
<p> 我飞机交付的甲方扩大开放活动空间发快递</p>
<p> 放大立即分解了发热了看见了金风科技</p>
<!-- 特殊功能标签
1、在HTML中文本中的换行、空格、tab等都是无效的（空白字符）
2、换行<br>, 或者 (空格)
-->
<hr />
<p>
床前明月光，<br>
疑是地上霜。<br>
举头望明月，<br>
低头思故乡。
</p>
<!--
字体相关的标签
1、<b></b>(加粗字体):只是单纯的加粗文本
2、<strong></storng>：加粗的文本。有强调的作用
3、i标签（倾斜）：效果上的倾斜，单纯的倾斜
4、em标签（倾斜）：具有强调的作用
5、<hr />（水平线）
-->
<hr />
<p>
<b>床前明月光，</b><br>
<strong>疑是地上霜。</strong><br>
举头望明月，<br>
<strong><i>低头思故乡。</i></strong>
</p>
</body>
</html>
九、列表
- 列表标签（有序列表、无序列表、自定义列表）
1、有序列表（ol和li）
<ol>标签:代表一个列表
<li>标签:列表元素
2、无序列表（ul和li）
<ul>标签:代表一个列表
<li>标签:列表元素
3、自定义列表（dl和dt、dd）
<dl>标签:代表一个列表（分组）
<dt>标签:列表分组名
<dd>标签:列表分组内容，多个分组就用多个dd
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>列表标签</title>
</head>
<body>
<!-- 有序列表 -->
<h3>有序列表</h3>
<ol>
<li>第一</li>
<li>第二</li>
<li>第三</li>
<li>第四</li>
<li>第五</li>
</ol>
<!-- 无需列表 -->
<h3>无需列表</h3>
<ul>
<li>第一</li>
<li>第二</li>
<li>第三</li>
<li>第四</li>
<li>第五</li>
</ul>
<!-- 自定义列表 -->
<h3>自定义列表</h3>
<dl>
<dt>教学部</dt>
<dd>教师1</dd>
<dd>教师2</dd>
<dd>教师3</dd>
<dt>财务部</dt>
<dd>财务1</dd>
<dd>财务2</dd>
<dd>财务3</dd>
<dd>财务4</dd>
</dl>
</body>
</html>
十、图片标签
1、<image src = "图片地址（可以是本地、也可以是网络图片URL）">
src属性:本地图片，地址可以是本地绝对路径、绝对路径，一般讲图片放在image文件夹中
title:设置图片标题（鼠标停留在图片上显示的内容）
alt:设置图片加载失败的提示信息
2、超链接标签<a></a>
格式:<a href="">内容</a>
内容：可以是文本、图片
href:跳转的目标地址(网络地址、本地的HTML地址、什么也不写就是刷新、还在当前网页跳转到指定的位置)
targets属性：跳转方式
target值：self（默认值）原网页被覆盖、_blank(在新的页面中打开网页)原网页还在
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>图片和超链接</title>
</head>
<body>
<!-- image标签 -->
<img id="top" src="img/new.jpg" title="路飞" alt="没有图片">
<!-- 超链接文本 -->
<br>
<a href="http://www.baidu.com" target="_blank">百度一下</a>
<br>
<a href="03-列表标签.html"><img src="img/aa.jpg" title="路飞" alt="没有图片"></a>
<br>
<a href="">刷新</a>
</body>
</html>
十一、表格标签
table:表格的开始
th:表头
tr:行
td:单元格
注意：写行式可以使用快捷键 td*3 + Tab键
table的属性
border：规定表格单元是否拥有边框。
bordercolor：设置边框颜色(可以是英文单词、rgb十六进制数（#ffff）)
cellspacing:表示单元格和单元格之间的间隙（有默认值）
cellpadding:单元格边框和内容之间的距离
width：宽度作用于table（会根据内容的大小按比例去分配每一行的宽度）
height：高度作用于table（会根据内容的大小按比例去分配每一行的高度）
注意：可以单独设置每一行高度和每一列的宽度
2、背景颜色
bgcolor:背景颜色
a. 作为table的属性，就是设置整个table的背景颜色
b. 作为tr的属性，就是只对某一行起作用
c. 作为td的属性就是只对某一个单元格f起作用
3、对齐方式
align：值有center、lift、right
作用于table则是让其在父标签中居中
作用于tr时，是把整行的内容在单元格中居中
作用于td让指定的单元格的内容居中、左或右对齐
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>表格标签</title>
</head>
<body>
<table border="1" bordercolor="#ff0000" cellspacing="0" cellpadding="20" bgcolor="aliceblue">
<tr bgcolor="aqua" align="right">
<td>Data1eef</td>
<td>Data1f</td>
<td>Data1</td>
</tr>
<tr bgcolor="cadetblue">
<td bgcolor="white">Data2fd</td>
<td>Data2</td>
<td>Data2</td>
</tr>
<tr>
<td>Data3</td>
<td>Data3fsdf</td>
<td>Data3</td>
</tr>
</table>
<br>
<!-- 细线表格
第一步：设置整个表格的背景颜色（边框颜色）和每个单元格的背景颜色（表格内容的颜色）不一样
第二步: 设置cellspacing的值的宽度
-->
<table border="0" bordercolor="#ff0000" cellspacing="1" cellpadding="" bgcolor="aliceblue" accesskey=""
width="300" height="200">
<tr bgcolor="aqua">
<td>Data1eef</td>
<td>Data1f</td>
<td>Data1</td>
</tr>
<tr bgcolor="azure">
<td>Data2fd</td>
<td>Data2</td>
<td>Data2</td>
</tr>
<tr bgcolor="blanchedalmond">
<td>Data3</td>
<td>Data3fsdf</td>
<td>Data3</td>
</tr>
</table>
<br />
<!-- 单独设置宽和高 -->
<table border="0" bordercolor="#ff0000" cellspacing="1" cellpadding="" bgcolor="aliceblue" cellpadding="10">
<tr bgcolor="aqua" height="50">
<td width="100">Data1eef</td>
<td>Data1f</td>
<td>Data1</td>
</tr>
<tr bgcolor="azure" height="50">
<td width="60">Data2fd</td>
<td>Data2</td>
<td>Data2</td>
</tr>
<tr bgcolor="blanchedalmond" height="70">
<td width="140">Data3</td>
<td>Data3fsdf</td>
<td>Data3</td>
</tr>
</table>
</body>
</html>
十二、合并列和行
- 1、确定列表的最大行数
- 2、确定每一行的有多少个单元格
- 3、确定每个单元格是否有合并现象
- rowspan: 行合并
- colspan: 列合并
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>复杂的表格</title>
</head>
<body>
<table border="1" cellspacing="0" bordercolor="black" width="600" height="400">
<tr>
<td>111</td>
<td colspan="2">222</td>
</tr>
<tr>
<td></td>
<td rowspan="2">333</td>
<td rowspan="2">444</td>
</tr>
<tr>
<td>555</td>
</tr>
<tr>
<td>666</td>
<td>777</td>
<td>888</td>
</tr>
</table>
<br />
<table border="1" cellspacing="0" width="600" height="500">
<tr>
<td colspan="2"></td>
<td colspan="4"></td>
</tr>
<tr>
<td></td>
<td></td>
<td rowspan="3" colspan="2"></td>
<td rowspan="2"></td>
<td rowspan="2"></td>
</tr>
<tr>
<td></td>
<td></td>
</tr>
<tr>
<td colspan="2"></td>
<td colspan="2"></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td colspan="2"></td>
</tr>
</table>
</body>
</html>
