第一节：HTML（标签的使用）
1.什么是HTML
· HTML其实是HyperText Markup Language的缩写, 超文本标记语言
2.HTML的作用
· HTML就只有一个作用, 它是专门用来描述文本的语义的. 也就是说我们可以利用HTML来告诉浏览器哪些是标题, 哪些是段落.
o 这些用于描述其它文本语义的文本, 我们称之为标签. 并且这些用于描述文本语义的标签将来在浏览器中是不会被显示出来的
o 所以正是因为HTML的这些标签是专门用来描述其它文本语义的, 并且在浏览器中不会被显示出来, 所以我们称这些文本为"超文本", 而这些文本又叫做标签, 所以HTML被称之为"超文本标记语言"
3.网页基本结构:
<html>
<head>
<title></title>
</head>
<body>
</body>
</html>
1标签
１.1 单标签
◆注释标签 ctrl+/
<!— 内容 -->
◆ 换行标签
<!-- 换行标签 -->
第一段内容 <br/>第二段内容
◆ 水平线标签
<!-- 水平线标签 -->
<hr/>
１.2 双标签
文本内容
<!-- 水平线标签 -->
<p>这里面是一段文字内容</p>
特点：上下自动生成空白行。<br />换行不会生成空白行。
标题标签
h1-h6 取值到h6
<h1>标题标签1</h1>
<h2>标题标签2</h2>
<h3>标题标签3</h3>
<h4>标题标签4</h4>
<h5>标题标签5</h5>
<h6>标题标签6</h6>
文本标签（基本不用了）
<font>文本内容</font>
文本格式化标签
<font size="30px" color="red">font中的文字</font>
文本加粗标签
工作里尽量使用strong
<!-- 加粗标签 -->
<strong>加粗字体</strong> <b>加粗字体</b>
文本倾斜标签
工作里尽量使用em
<!-- 文本斜体标签 -->
<em>斜体文字</em> <i>斜体文字</i>
删除线标签
工作里尽量使用del
<!-- 删除线标签 -->
<del>斜体文字</del> <s>斜体文字</s>
下划线标签
工作里尽量ins
<!-- 下划线标签 -->
<ins>斜体文字</ins> <u>斜体文字</u>
◆注意：之所以工作里使用<strong></strong> <em></em> <del></del>
<ins></ins> 是因为更有语义化。
１.3 图片标签
<img src="lzl.png" alt="林志玲" title="我的女神" width="300" height="500"/>
Src 图片的来源 必写属性
Alt 替换文本 图片不显示的时候显示的文字
Title 提示文本 鼠标放到图片上显示的文字
Width 图片宽度
Height 图片高度
◆图片没有定义宽高的时候，图片按照百分之百比例显示，如果只更改图片的宽度或者高度，图片等比例缩放。
２ 路径
２.1 相对路径
相对于文件自身出发，就是相对路径。
◆文件和图片（html文档）在同一个目录(文件夹) ，直接写文件名。
<img src="kda.png" alt="KDA" title="KDA"/>
◆图片（html文档）在文件在下一级目录里。文件夹名称+/+图片（html）名称
<img src="KDA/ahri.png" alt=""/>
◆图片（html）在文件的上一级目录里，…+/+图片（html）名称
<img src="../kda.png" alt=""/>
◆图片在文件的上一级的其他目录里，…/文件夹名称/图片名称
<img src="../01-ppt/lzl.png" alt=""/>
★总结：找到下一级目录（文件夹）的图片（文件）用 /
跳出当前目录使用…/
２.2 绝对路径
<img src="D:\\学习\\前端\\HTML基础\\kda.png" alt=""/>
３ 超链接
指单击链接，就会跳转到链接指向的页面的链接，当然超链接也是可以链接图片，程序，甚至音乐，影像等非页面的元素的
<!-- 超链接标签 -->
<a href="02.html" title="图片标签" target="_self">超链接</a>
href 去往的路径（跳转的页面） 必写属性
title 提示文本 鼠标放到链接上显示的文字
target=”_self” 默认值 在自身页面打开（关闭自身页面，打开链接页面）
target=”_blank” 打开新页面 （自身页面不关闭，打开一个新的链接页面）
３.1 锚链接
1.先定义一个锚点
<p id="re">p中内容</p>
2.超链接到锚点
<a href="#re">回到顶部</a>
３.2 空链 不知道链接到那个页面的时候，用空链
<a href="#"></a>
４ 另存为 ctrl+shift+s
５ 特殊字符
６ 列表
６.1 无序列表
<ul>
<li></li> 列表项
<li></li>
<li></li>
</ul>
<ul type="circle">
<li>列表项</li>
<li>列表项</li>
<li>列表项</li>
</ul>
type=”square” 小方块
Type=”disc” 实心小圆圈
Type=”circle” 空心小圆圈
６.2 有序列表
<ol>
<li></li> 列表项
<li></li>
<li></li>
<li></li>
<li></li>
</ol>
<ol type="1" start="3">
<li>列表项</li>
<li>列表项</li>
<li>列表项</li>
<li>列表项</li>
<li>列表项</li>
</ol>
◆type=”1,a,A,i,I” type的值可以为1,a,A,i,I
start=”3” 决定了开始的位置。
６.3 自定义列表
<dl>
<dt></dt> 小标题
<dd></dd> 解释标题
<dd></dd> 解释标题
</dl>
<!-- 自定义列表 -->
<dl>
<dt>小标题</dt>
<dd>解释标题</dd>
<dd>解释标题</dd>
</dl>
７ 音乐标签
注意:此标签是h5 特有的,老版本不支持
<!-- 音乐标签 -->
<embed src="1.mp3" hidden="true">
8 Charset 编码
Ascll
Ansi 扩展的ASCII编码
Unicode 日文/韩文
Gbk 中文
Gb2312 中文
Big5 繁体
Utf-8 通用字符集
9 关键字
作用: 告诉搜索引擎当前网页的关键词, 在SEO中非常重要, 能够提高搜索命中率, 让别人更容易找到你
<!-- 关键字 -->
<meta name="keywords" content="新闻,时事,时政,国际,国内,社会,法治,聚焦,评论,文化,教育,新视点,深度,网评,专题,环球,传播,论坛,图片,军事,焦点,排行,环保,校园,法治,奇闻,真情">
10 网页描述
作用: 告诉搜索引擎当前网页的主要内容, 在SEO中非常重要, 当别人在搜索引擎中搜索到你的网站时会自动作为对你网站的描述信息展示给用户, 能够提高搜索命中率, 让别人更容易找到你
<!-- 网页描述 -->
<meta name="description" content="新浪网新闻中心是新浪网最重要的频道之一，24小时滚动报道国内国际及社会新闻。每日编发新闻数以万计。">
11 网页重定向
<!-- 网页重定向 -->
<meta http-equiv="refresh" content="5;http://www.baidu.com">
12 链接外部样式表(css)
<!-- 链接外部样式表文件 -->
<link rel="stylesheet" href="1.css">
13 设置icon图标
<!-- icon图标 -->
<link rel = "icon" href="favicon.ico">
14 表格
展示数据。 是对网页重构的一个有益补充。
<table> 表格
```
<table>
<tr> 行
<td></td> 列
<td></td>
<td></td>
</tr>
</table>
<table border="1" width="500" height="300" cellspacing="0" cellpadding="10" align="center" bgcolor="yellow">
<tr align="center">
<td>张三</td>
<td>18</td>
<td>挖掘机</td>
</tr>
<tr>
<td>李四</td>
<td>20</td>
<td>大前端</td>
</tr>
</table>
◆属性：
border=”1” 边框:1默认为2px
width=”500” 宽度
height=”300” 高
cellspacing=”2” 单元格与单元格的距离 : 0
cellpadding=”2” 内容距边框的距离
align=”left | right | center”
如果直接给表格用align=”center” 表格居中
如果给tr或者td使用 ，tr或者td内容居中。
bgcolor=”red” 背景颜色。
bordercolor=“green” 边框颜色
14.1 表格的标准结构
<table>
<thead>
<tr>
<td></td>
<td></td>
</tr>
</thead>
<tbody>
<tr>
<td></td>
<td></td>
</tr>
</tbody>
<tfoot>
<tr>
<td></td>
<td></td>
</tr>
</tfoot>
</table>
14.2表头和单元格合并
◆ 表头 <caption></caption>
colspan=”2” 合并同一行上的单元格
rowspan=”2” 合并同一列上的单元格
<table border="1" width="500" height="300" align="left">
<caption>表头</caption>
<tr>
<td colspan="2">张三 22</td>
<!--<td>18</td>-->
<td rowspan="3">挖掘机</td>
</tr>
<tr>
<td>李四</td>
<td>20</td>
<!--<td>大前端</td>-->
</tr>
<tr>
<td>王五</td>
<td>21</td>
<!--<td>大前端</td>-->
</tr>
</table>
14.3 表格标题、边框颜色、内容垂直对齐
◆表格标题 用法和td一样
标题的文字自动加粗水平居中对齐
<tr>
<th>张三</th>
<th>20</th>
<th>大前端</th>
</tr>
◆边框颜色
bordercolor="red"
◆内容垂直对齐方式
<td valign="bottom">张三</td>
valign=”top | middle | bottom”
15 表单
表单的作用是收集信息。
◆表单域
<form action="1.php" method="get">
属性：action:处理信息
method=”get | post”
Get通过地址栏提供（传输）信息，安全性差。
Post 通过1.php来处理信息，安全性高。
◆文本输入框
<!-- 文本输入框 -->
用户名：<input type="text" maxlength="6" readonly="readonly" disabled="disabled" name="username" value="前端">
maxlength=“6” 限制输入字符长度
readonly=”readonly” 将输入框设置为只读状态（不能编辑）
disabled=“disabled” 输入框未**状态
name=“username” 输入框的名称
value=“大前端” 将输入框的内容传给处理文件
◆密码输入框
<!-- 密码输入框 -->
密码：<input type="password" name="pwd">
★注意：文本输入框的所有属性对密码输入框都有效。
◆单选框
<!-- 单选框 -->
<input type="radio" name="gender" checked="checked">男
★只有将name的值设置相同的时候，才能实现单选效果。
★checked=”checked” 设置默认选择项。
◆下拉列表
<select multiple="multiple">
<option>下拉列表选项1</option>
<option>下拉列表选项2</option>
<option>下拉列表选项3</option>
<option selected="selected">下拉列表选项4</option>
</select>
属性：
multiple=”multiple” 将下拉列表设置为多选项
selected=”selected” 设置默认选中项目
<optgroup label="哈尔滨市">
<option>南岗区</option>
<option>道里区</option>
<option>香坊区</option>
<option>松北区</option>
</optgroup>
<optgroup></optgroup> 对下拉列表进行分组。
label=”” 分组名称。
◆多选框
<!-- 多选框 -->
<input type="checkbox" checked="checked">抽烟
<input type="checkbox" checked="checked">喝酒
<input type="checkbox" checked="checked">烫头
checked=”checked” 设置默认选中项
◆多行文本框
<!-- 多行文本框 -->
<textarea cols="130" rows="10"></textarea>
cols 控制输入字符的长度。
rows 控制输入的行数
◆ 文件上传控件
<!-- 文件上传控件 -->
<input type="file">
◆文件提交按钮
<!-- 文件提交按钮-->
<input type="submit">
★：可以实现信息提交功能
◆普通按钮
<!--普通按钮-->
<input type="button" value="普通按钮">
★不能提交信息，配合JS使用。
◆图片按钮
<!-- 图片按钮-->
<input type="image" src="按钮.jpg">
★图片按钮可实现信息提交功能
☆提交按钮与图片按钮的区别：唯一的区别就是type=image的input提交方式会把按钮点击的位置坐标x,y提交过去。
◆重置按钮
<!-- 重置按钮-->
<input type="reset">
★将信息重置到默认状态
◆表单信息分组
<form action="1.php" method="post">
<fieldset>
<legend>
分组信息
</legend>
</fieldset>
</form>
上一篇： C语言第一节
下一篇： 这四人都是顾命大臣，做了一件事却不得善终