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