纲要:
HTML概述
常用标签
HTML – 基础知识
一、概念:
HTML的英文全称是Hyper Text MarkUp Language,中文叫做“超文本标记语言”。它允许网页制作人建立文本与图片相结合的复杂页面,这些页面可以被网上任何其他人浏览到(原因: 浏览器当中嵌入了解析HTML语法的内核)。
扩展:
【标记语言:标记语言是一种将文本以及文本相关的其他信息结合起来,展现出关于文档结构和数据处理细节的电脑文字编码。】
基本语法:
<html>
<head>
<title> </title>
</head>
<body>
</body>
</html>
【注意事项】HTML标签只能"包裹嵌套",不能"交叉嵌套"
二、常用标签:
1)HTML的注释写法:
<!-- 这是注释 -->
2)标题标签(数字越小,字越大):
<h1> </h1> -- 一级标题
<h2> </h2> -- 二级标题
<h3> </h3> -- 三级标题
<h4> </h4> -- 四级标题
<h5> </h5> -- 五级标题
<h6> </h6> -- 六级标题
3)字体标签 font :
A、常见属性:
字体大小的设置 size=“1” 范围1-7 数字越大,字体越大
字体颜色的设置 color=“red” 红色 #00FF00 绿色
字体标签的设置 face=“楷体” 一定要是自己系统当中有这个字体
B、标准格式:
<font> </font> <!-- 字体的设置 -->
C 、字体设置:
<b> </b> <!-- 字体会加粗 -->
<i> </i> <!-- 字体会倾斜 -->
<u> </u> <!-- 字体下划线 -->
4)格式化标签:
A、换行:
<br> <br/> <!-- 换行可以只有一半(无需包裹.只写一半) -->
B、段落
<p> </p> <!-- 长段文字 -->
C、水平线
<hr> <hr>
<!--a.宽度 width 直接写数字表示像素,加上百分号表示比例.推荐百分号
b.高度 size 直接写数字表示像素,加上百分号表示比例.推荐百分号
c.颜色 color
d.对齐方式 align="right" left在左边 center在中间 right在右边 -->
例:<hr> <hr color="#FF9900" width="20%" size="8%" align="right">
D、居中标签
<center> 标签名称 </center>
5)特殊指令
<!-- 空格效果 -->
6)图片标签 img
<img src="路径"> <!-- 可以是网络路径,也可以是相对路径,不推荐绝对路径-->
例:<img src="mm01.png" width="10%" height="10%" align="right"/>
<!--设置图片的大小对齐位置
a.大小设置 宽度:width 、高度:height
b.设置对齐方式 align
-->
<!--相对路径的问题
a.图片和网页在同一个目录 <img src="mm01.png"/>
b.图片和网页不在同一目录 <img src="../img/mm01.png"/> ../ 返回上一层
c.图片在网页的子目录 <img src="img/mm01.png"/>
-->
7)列表标签
有序列表 ol
<ol type="A">
<li> Java </li>
<li> UI </li>
<li> Python </li>
<li> PHP </li>
<li> 前端 </li>
</ol>
无序列表 ul
<ul>
<li> Java </li>
<li> UI </li>
<li> Python </li>
<li> PHP </li>
<li> 前端 </li>
</ul>
8)超链接标签
<a href="http://www.baidu.com" target="_blank"> 点击访问百度网址 </a>
<!-- href 可以是内网地址,可以是外网地址,可以是图片,可以是文本
target 指定打开资源的方式
_blank 在新的页面打开
_self:默认值,在当前页面打开
-->
8)块标签
<span> </span> <!--有多大空间占据多大空间-->
<div> </div> <!--独占一行-->
9)语义化标签(了解)
<header> </header> <!--HTML5后的头标签.只是阅读性高一点,没有实质的作用-->
<footer> </footer> <!--HTML5后的脚标签.只是阅读性高一点,没有实质的作用-->
10)表格标签
<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>
<!-- 合并单元格
a.两个属性
colspan:合并列
rowspan:合并行
b.操作步骤
I.确定是合并行 还是 合并列
II.确定第一次出现的单元格是哪一个
III.删除其他不要的行或者列
-->
表格标签相关内容: