JavaWebDay06_HTML概述,快速入门,常用标签(重点),综合案例。

最新推荐文章于 2021-09-23 23:43:28 发布

日常劝退自己

最新推荐文章于 2021-09-23 23:43:28 发布

阅读量140

点赞数 1

分类专栏： Web第六天文章标签： HTML概念、常用标签、案例

本文链接：https://blog.csdn.net/weixin_43904518/article/details/85879419

版权

Web第六天专栏收录该内容

1 篇文章 0 订阅

订阅专栏

JavaWebDay06

课程大纲

1、HTML概述和快速入门 -->理解
2、HTML的常用标签 ------>重点 
3、HTML综合案例

第一章 HTML概述和快速入门

1、HTML的概念

HTML:叫做超文本标记语言

2、HTML的作用

做网页的.

3、HTML的快速入门

A.HTML的后缀名
	a.HTML
	b.HTM

B.HTML采用浏览器打开（为什么可以使用浏览器打开HTML）
	原因: 浏览器当中嵌入了解析HTML语法的内核.

C.HTML的基础语法
	<html>
		<head>
			<title> </title>
		</head>
		<body>
		</body>
	</html>

D.注意事项
	HTML标签只能"包裹嵌套",不能"交叉嵌套"
	包裹嵌套（正确）：  <a><b></b></a>
	交叉嵌套（错误）：  <a><b></a></b>

第二章 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.空格效果 &nbsp;
B.请参考 CHM格式笔记. -> E扩展补充 -> b阶段html -> 04特殊字符编码表对照

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="A">
		<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.基础语法
	<a href="http://www.baidu.com" target="_blank"> 点击访问百度网址 </a>
	
B.属性
	href 可以是内网地址,可以是外网地址,可以是图片,可以是文本
	target 不写默认是在自己的页面打开,设置 _blank 在新的页面打开

9、后期学习的标签

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