Part01:HTML介绍
1、HTML概述:
- 超级文本标记语言,用来编写网页;
- 网页的内容包含:HTML代码、CSS代码、JavaScript代码等内容。
- HTML代码:用于展示需要显示的数据;
- CSS代码:使显示的数据更加好看;
- JavaScript:使整个页面显示的数据具有动画效果;
- 网页根据内容是否改变分为:静态页面、动态页面。
- 静态页面:编写之后在浏览器不再改变的网页。HTML就是用于编写静态网页。
- 动态页面:会根据不同的情况展示不同的内容。
2、HTML语言特点:
- HTML写成的代码不需要编译,直接使用浏览器打开就行。
- HTML文件的扩展名是*.html (常用) 或*.htm。
- HTML结构都是由标签组成。
- 标签名是预先定义好的,我们需要了解其功能;
- 标签名不区分大小写;
- 通常情况下标签由开始标签和结束标签组成;如
- 如果没有结束标签,建议以/结尾,称为自闭和标签;如
3、HTML编写规范:
- //根标签 * //头标签,保存网页中最重要的的信息,一般打开网页不可见 * //头标签中有多个子标签: * //保存网页编码,关键字等信息 *
//网页的标题,可见 * //身体标签,写显示在网页上的内容,不支持键盘换行 - 开始标签中可以写属性
- 书写格式:属性名=“属性值”
- 注释格式:
<!-- 注释 -->
Part02:HTML常用标签介绍
1、文字标签
- 标题标签:
<h1>——<h6>
:不同大小的标题,h1最大,依次变小;- 特点:自动换行,并且行与行之间有一定的空白
- 水平线标签:
<hr/>
:一条水平线- 属性:
- size:水平线的粗细,单位px;
- noshade:没有阴影,纯色;noshade=“noshed”;
- 字体标签:
<font>
:可以设置字体,大小,颜色等- 属性:
- size:文字的大小,值只有1-7,7最大;
- face:设置字体(如宋体、楷体、黑体等)
- color:文字的颜色,值有两种形式:
- a.颜色的英文单词;
- b.#RGB(如:#FF0022)
- 格式化标签:
<b>
:加粗<i>
:倾斜
- 段落标签:
<p>
:为文字分段落- 特点:上下有一定的空白空间
- 换行标签:
<br/>
:换行
2、图片标签:
<img>
:插入图片- 属性:
- src:值为图片路径
- width:宽度,值可以写数值(单位px),也可以写百分比(与原图相比)
- height:高度,值可以写数值(单位px),也可以写百分比(与原图相比)
3、列表标签
<ul>
:无序列表,每一个列表项都是一个图案<ol>
:有序列表,每一个列表项都有一个序号- 列表中必须有列表项
<li>
- 共同属性:
-
type:设置有序列表的序号和无序列表的图案
-
ol中type的取值:1(默认)、a、A、i(小写罗马数值)、I(大写罗马数值)
-
ul中type的取值:circle(空心原点)、disc(实心原点,默认)、square(小方点)
代码:<ol> <li>哈哈</li> <li>呵呵</li> <li>嘿嘿</li> </ol> <ul> <li>吃饭</li> <li>睡觉</li> <li>打豆豆</li> </ul>
-
效果图:
4、超链接标签:
<a>
:可以被点击,点击之后可以跳转到别的页面- 属性:
- href:值为跳转的网页地址,也可以为本地的*.html文件,值#表示跳转到本页面(该属性不写超链接无效)
- target:指的是跳转后的目标位置
- 值“_self”表示在本网页打开超链接网页
- 值“_blank”表示在一个空白的新网页打开超链接网页
- 值framename表示在指定的框架里打开,framename为框架名
5、表格标签:
<table>
- 子标签:行
- 表头:内容默认加粗并且居中
- 每一行有一个个单元格组成
- 标签的属性: * border:表格边框大小,默认不显示边框 * width:宽度,单位px * height:高度,单位px * align:表示整个表格在网页中显示的位置 * 值:left(默认)、center 、right * bgcolor:表格背景颜色
- 行标签的属性:
- align:表示该行中所有单元格中的内容在表格中的位置
- 单元格标签的属性:
-
align:表示该单元格中的内容在表格中的位置
-
rowspan:跨行合并,具体的值表示所跨的行数
-
colspan:跨列合并,具体的值表示所跨的列数
代码:<table border="1" width="300" height="100"> <tr bgcolor="#c0c0c0" align="center"> <td colspan="3">a</td> </tr> <tr align="center"> <td>4</td> <td>5</td> <td>6</td> </tr> <tr align="center"> <td>7</td> <td>8</td> <td>9</td> </tr> </table>
-
效果图:
Part03:HTML框架集介绍
1、<frameset>
标签:框架集,把页面分割为几个部分
注意⚠️:标签不能和标签同在,使用标签时要把标签删除;
-
属性:
- Rows:把页面以行的形式分割,值为百分百形式,*表示剩余部分;
- cols:把页面以列的形式分割,值为百分百形式,*表示剩余部分;
-
子标签
<frame>
//主页面代码 <!—页面分为三行,第一行占10%,第二行占80%,第三行占10%--> <frameset rows="10%,*,10%"> <frame src="top.html"/> <!--第二行中又分为两列--> <frameset cols="20%,*"> <frame src="left.html"/> <frame name="right"/> </frameset> <frame src="bottom.html"/> </frameset> //第二行第一列的代码 <ul> //超链接在框架名为right的地方显示 <li><a href="mg.html" target="right">么古</a></li> <li><a href="yjy.html" target="right">右脚丫</a></li> </ul>
效果图: