一、HTML概述
1.1什么是HTML
Hyper Text Markup Language是超文本标记语言。简单来说就是搭建网页的一门技术，。
超文本： 具有普通文本特性，还可以加入视频，图片，超链接等。
标记语言： 使用预定义好的标签来描述文本，教给浏览器解析完成超文本的效果。
1.2 HTML 的书写规范
- html文件扩展名为：html或htm（dos文件系统，文件名长8个字符，扩展名长3个字符）
- 双标签格式：<开始></结束>
- 单标签格斯：<开始/>
- html语法不严谨，不区分大小写
- 标签内可以添加属性，格式：属性名=“属性值” 属性名=“属性值”。html双引号和单引号效果一样
- 标签与标签之间可以嵌套，但不能乱嵌套。
二、HTML标签（重点）
- 文本标签
<!--
1)标题
<hn></hn>
n 的取值范围：1--6 数值越大，字体越小
常用属性： align：对齐方式 ：left左侧（默认），center 居中
right 右侧。在html5中作废了， div+css样式
2）字体
<font></font> 在html5中作废了， span+css样式
常用属性：
size：大小
取值：1--7，数值越大，字体越大，默认值为（3）
color：颜色
方式一：英文单词
方式二：光的三原色：红（0--255）绿（0--255）蓝（0--255）
face：类型
取值：宋体，楷体，隶书等
3）粗体： <b></b> bold
4)斜体： <i></i> italic
5)换行符： <br/>
6)水平线：<hr/> 常用属性：
color： 颜色
size： 大小，取值没有范围限制
width： 宽度
方式一：像素 px（默认） 方式二：百分比 %
align：对齐方式 取值：center（默认）
7）段落： <p></p>
常用属性：align： 对齐方式 取值：left（默认）
-->
代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>01_文本标签</title>
</head>
<body>
<h1 align="center">我是标题1</h1>
<h3 align="center">biaoti3</h3>
<font size="3" color="#b2172b" face="楷体">ziti</font><br/>
<b>woshi cu ti</b><br>
<i>woshi xie ti</i><br/>
<!--水平线-->
<hr color="red" size="7" width="500px" align="left"/>
<hr color="red" size="7" width="400px" align="right"/>
<!-- 文本标签 -->
<p align="center">hahahhaha </p>
<p align="center">hahahhaha </p>
<p align="center">hahahhaha </p>
<p align="center"><font color="#663399">hahahhaha</font> </p>
</body>
</html>
- 超链接标签
<!-- html5 版本提供语义化标签，本身没有含义，只为了方便阅读
头部<header></header>
身体：<main></mian>
尾部：<footer></footer>
-->
<!--
超链接： <a></a>
常用属性： href：页面跳转地址
相对路径（网站内部使用）：
./ 当前目录
../ 上级目录
绝对路径（网站外部使用）：http，https开头的网址
mailto 作用：打开本地邮箱客户端发送邮件
例：mailto:banzhang123@163.com?subject=上门服务&body=小宝剑99大宝剑999
target：打开方式
取值：_self(本页面跳转)、_blank（新页面跳转）
title： 鼠标上移显示的标题
-->
代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>03_超链接标签</title>
</head>
<body>
<a href="../index.html">默认访问也</a><br>
<a href="mailto:banzhang123@163.com?subject=上门服务&body=小宝剑99大宝剑999">推广邮件</a>
</body>
</html>
- 列表标签
<!--
列表：
有序列表：<ol>/ol<>
常用属性： type：排序类型 取值：1（默认） I i（罗马字符） a A （英文字母）
无序列表：<ul></ul>
常用属性： type：显示类型 取值：disc 实心圆（默认） ，circle（空心圆），square（实心方块）
子标签：<li></li> 列表项
-->
代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>04_列表标签</title>
</head>
<body>
<ol type="A">
<li>hahahha</li>
<li>ahha</li>
<li>htmllmtms</li>
</ol>
<ul type="square">
<li>gdahdgadga </li>
<li>gdahdgadga </li>
<li>gdahdgadgasdsa </li>
<li>gdahdgadga sad ad </li>
</ul>
</body>
</html>
- 图像标签
<!--
图像 <img/> 常用属性：
src：图像文件的路径
相对路径
绝对路径
alt：图片丢失时显示文字描述
width：宽度，注意：会自动影响高度（纵横比缩放）
hight：高度
title：鼠标上移显示的标题
-->
代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>05_图像标签</title>
</head>
<body>
<img src="../img/girl3.jpg" width="300px" alt="喜欢的妹子" title="dab也喜欢这个妹子"><br>
<img src="../img/boy.png" alt="nan">
</body>
</html>
- 块级标签和内联标签
<!--
html代码块中标签分为两大类
块级标签：
特点：独自占用一行
例如：h3，div
内联标签
特点： 在一行内显示，内容有多少就占用多少
例如：font，span
-->
代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>06_块级标签和内联标签</title>
</head>
<body>
<h3>woshi块级标签</h3>
<div style="background-color:red ">我是块级标签</div>
<font>我是内联标签</font>
<span style="background-color: orange">我是内联标签</span>
</body>
</html>
- 简单表格
<!--
表格外边框：<table></table>
常用属性：
border： 边框
width： 宽度
height：高度
align：对齐方式 取值：left（默认）
cellspacing：单元格与单元格的间距（边距），一般情况下设置为0.
cellpadding：单元格与内容的间距（边距），一般情况下设置为0.
行：<tr></tr>
单元格：<td></td>
常用属性：
rowspan:跨行
colspan:跨列
-->
代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>07_简单表格</title>
</head>
<body>
<table border="1" width="300px" align="center" cellpadding="0" cellspacing="0">
<tr align="center">
<td colspan="2">1</td>
<td>3</td>
</tr>
<tr align="center">
<td>4</td>
<td>5</td>
<td rowspan="2">6</td>
</tr>
<tr align="center">
<td >7</td>
<td>8</td>
<!--<td>9</td>-->
</tr>
</table>
</body>
</html>
- 标题表格
<!--
表格外边框：<table></table>
常用属性：
border：边框
width：宽度
hight：高度
align：对其方式 left（默认）
cellspacing：单元格与单元格的间距（边距），一般情况下设置为0
cellpadding：单元格与内容的边距，一般设置为0
行：<tr></tr>
常用属性：
align：内容对齐方式
bgcolor：背景色
单元格：
<th></th> 列标题（加粗，居中）
<td></td>
常用属性： rowspan： 跨行 colspan：跨列
表格标题
<caption></caption>
表格语义化标签
头部<theda></thead>
身体:<tbody></tbody>
尾部：<tfoot></tfoot>
-->
代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>08_标题表格</title>
</head>
<body>
<table border="1" width="300px" align="center" cellspacing="0" cellpadding="0">
<caption>学生表</caption>
<tr bgcolor="red">
<th>学号</th>
<th>姓名</th>
<th>年龄</th>
</tr>
<tr align="center">
<td>1</td>
<td>图图</td>
<td>25</td>
</tr>
<tr align="center">
<td>2</td>
<td>甜甜</td>
<td>12</td>
</tr>
</table>
</body>
</html>
- 实体字符
<!--
空格：&nbps;&nbps;&nbps;&nbps;<br>
版权： ©<br>
人民币：¥<br>
<hr> //显示标签<hr>
-->
2.2 练习
- 学生成绩表
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>09_学生成绩表</title>
</head>
<body>
<table border="1" align="center" width="500px" cellpadding="0" cellspacing="0">
<caption>学生成绩表</caption>
<tr align="center">
<td>学号</td>
<td>姓名</td>
<td>性别</td>
<td>成绩</td>
</tr>
<tr align="center">
<td>1</td>
<td>龙琳</td>
<td>女</td>
<td>100</td>
</tr>
<tr align="center">
<td>2</td>
<td>杨枫</td>
<td>男</td>
<td>90</td>
</tr>
<tr align="center">
<td>3</td>
<td>林雅</td>
<td>女</td>
<td>100</td>
</tr>
</table>
</body>
</html>
扫一扫
4149
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
