纲要:

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)特殊指令

		    &nbsp;       <!-- 空格效果  -->

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.删除其他不要的行或者列
             -->

表格标签相关内容:
HTML 基础知识

相关文章: