1、HTML的概念
HTML:叫做超文本标记语言,可以用来制作网页
2、HTML的快速入门
A.HTML的后缀名
a.HTML
b.HTM
B.HTML采用浏览器打开
原因: 浏览器当中嵌入了解析HTML语法的内核.
C.HTML的基础语法
<html>
<head>
<title> </title>
</head>
<body>
</body>
</html>
D.注意事项
HTML标签只能"包裹嵌套",不能"交叉嵌套"
HTML的常用标签
1、HTML的注释写法
<!-- 这是注释 -->
2、标题标签(数字越小,字越大)
<h1></h1> 一级标题
<h2></h2> 二级标题
<h3></h3> 三级标题
<h4></h4> 四级标题
<h5></h5> 五级标题
<h6></h6> 六级标题
3、字体标签 font
A.标准格式
<font> 字体的设置 </font>
B.常见属性
a.字体大小的设置 size="1" 范围1-7 数字越大,字体越大
b.字体颜色的设置 color="red" 红色 #00FF00 绿色
c.字体标签的设置 face="楷体" 一定要是自己系统当中有这个字体
C.加粗,斜体,下划线
<b>字体会加粗</b>
<i>字体会倾斜</i>
<u>字体下划线</u>
4、格式化标签
A.换行
<br> 也可以 <br/> 只有一半(无需包裹.只写一半)
B.段落
<p> 长段文字 </p>
C.水平线
<hr>
a.宽度 width 直接写数字表示像素,加上百分号表示比例.推荐百分号
b.高度 size 直接写数字表示像素,加上百分号表示比例.推荐百分号
c.颜色 color
d.对齐方式 align="right" left在左边 center在中间 right在右边
<hr color="#FF9900" width="20%" size="8%" align="right">
D.居中标签的效果
<center> 标签名称 ... </center>
5、特殊指令
A.空格效果
6、图片标签 img
A.基本格式
<img src="路径"> <!-- 可以是网络路径,也可以是相对路径,不推荐绝对路径-->
B.设置图片的大小对齐位置
a.大小设置 width 宽度, height 高度
b.设置对齐方式 align
<img src="mm01.png" width="10%" height="10%" align="right"/>
C.相对路径的问题
a.图片和网页在同一个目录 <img src="mm01.png"/>
b.图片在其他目录,网页 <img src="../img/mm01.png"/> 网页在src图片在img ../返回上一层
c.图片在其他目录,网页 <img src="img/mm01.png"/> 图片在网页的子目录
7、列表标签
A.有序列表 ol
<ol type="1" start="100">
<li> Java </li>
<li> UI </li>
<li> Python </li>
<li> PHP </li>
<li> 前端 </li>
</ol>
B.无序列表 ul
<ul>
<li> Java </li>
<li> UI </li>
<li> Python </li>
<li> PHP </li>
<li> 前端 </li>
</ul>
8、超链接标签
A.基础语法
<a href="http://www.baidu.com" target="_blank"> 点击访问百度网址 </a>
B.属性
href 可以是内网地址,可以是外网地址,可以是图片,可以是文本
target 不写默认是在自己的页面打开,设置 _blank 在新的页面打开
9、span和div标签
A.两个标签
<span> 有多大空间占据多大空间 </span>
<div> 独占一行 </div>
B.语义化标签
<header> </header> HTML5后的头标签.
<footer> </footer> HTML5后的脚标签.
10、表格标签
A.基础代码
<table border="1px" align="center" width="80%">
<tr>
<th> 表头第一列 </th>
<th> 表头第二列 </th>
<th> 表头第三列 </th>
</tr>
<tr>
<td> 第一行第一列 </td>
<td> 第一行第二列 </td>
<td> 第一行第三列 </td>
</tr>
<tr>
<td> 第二行第一列 </td>
<td> 第二行第二列 </td>
<td> 第二行第三列 </td>
</tr>
</table>
B.合并单元格
a.两个属性
colspan:合并列
rowspan:合并行
b.操作步骤
I.确定是合并行 还是 合并列
II.确定第一次出现的单元格是哪一个
III.删除其他不要的行或者列