HTML:Hyper Text Markup Language(超级文本标签语言)
有两部分组成:
作用:告诉浏览器使用的是HTML的哪个版本
语法:在网页的最顶端编写:
<!doctype html>
作用:表示页面的开始和结束
语法:在文档类型声明的下面编写一对<html>标记
<html></html>
Html标签里面有两个标签,分别是
<head></head>
作用:表示网页的头部<body></body>
作用:表示网页的身体,以后页面中所有的要显示的内容,都要写在body标签里HTML语法
标记语法
标记又叫标签或者元素,在网页中表示一些功能,必须使用<>括起来,标记分为两大类封闭类型标记
也叫双标记,必须成对出现,有开始和结束标签。
语法:<标记>内容</标记>
eg:<html>
<head>
<body>
<title>
<p>
<b>
<s>
<u>
<i>
<sup>
<sub>
<h1>~<h6>
<pre>
非封闭标记
也叫单标记,或空标记,只有一个标记组成,即表示开始也表示结束。
语法:<标记>或者<标记/>
eg:<!doctype html>
<meta>
<br>
<hr>
标签的嵌套
在一个标签中,出现另外一个标签,从而形成层叠关系,里面的标签又称为“子标签”,外面的标签又称为“父标签”
推荐写法:
在子元素前,使用一个Tab缩进,表示层级关系注释
不会在页面中显示,只是让程序员方便读代码
语法:<!--注释的内容-->
注意:注释标签不能嵌套,也不能出现在其他标记结构中>
eg:<head <--错误的注释 -->>
<head>
中的内容指定网页的编码格式<meta charset=”utf-8”>
指定网页的标题<title>捞月亮的渔夫</title>
转义字符
表示一个空格
< 表示一个<
> 表示一个>
© 表示©
¥ 表示 ¥
<br> 表示回车或换行
<b></b> 加粗
<i></i> 斜体
<u></u> 下划线
<s></s> 删除线
<sub></sub> 下标
<sup></sup> 上标
作用:在页面中以醒目的方式显示文本<h1>这是一级标签</h1>
<h3>这是三级标签</h3>
<h5>这是五级标签</h5>
允许通过属性对标签进行修饰
语法:
属性必须声明在开始标签中
<标签 属性名=”属性值”></标记>
多个属性之间用空格隔开
<标签属性名=”属性值”属性名=”属性值”></标记>
eg:<h1>~<h6>、<p>
<h1 align="center">骆驼祥子</h1>
骆驼祥子表示一段文字,独占一行
标签:<p></p>
保留HTML代码中的回车和空格
语法:<pre></pre>
用于表示网络中任意资源(图片、视频、音频、文件)的位置(或路径)
URL:统一资源定位符(Uniform Resource Locator)
相对路径口诀:
同目录,直接用(直接填写图片名)
子目录,先进入,再使用
<img src="1/1.jpg" >
父目录,先返回,再使用
../表示返回上一级目录
<img>
语法:<a></a>
属性:<a>标签将不具有超链接的功能<a href="http://www.baidu.com">百度一下</a>
取值: 1._self:默认值,在当前的标签页中打开新网页 2._blank:在新标签页中打开新网页
让链接的href等于.rar或者.zip即可
<a href=”1.zip”>点我下载</a>
<a href=”mailto:邮箱地址”>联系我们</a>
<a href="mailto:2831843232@qq.com">
实现步骤:
第一步:定义锚点 方式一:使用任意标签的id属性定义锚点
<h1 id=”锚点名字”>化妆品区域</h1>
方式二:使用a标签的name属性,定义锚点<a name=”锚点名字”>化妆品区域</a>
第二步:链接到锚点<a href=”#锚点名字”>化妆品</a>
<a href=”#”>返回顶部</a>
在网页中独占一行,可以设置宽高
比如<h1>~<h6>,<p>,<hr>,<table>、div、ul、ol、li、pre、tr、td、form
和其他元素在一行显示,大部分行内元素不可以设置宽高
<a>,<img><b><s><u><i><sub><sup>,<span>
可以设置宽高的行内元素有:<img> input;
<span>:处理同一行文本的不同形式
作用:按照从上到下的方式来显示所有的数据,并且在数据前添加一些标识
由列表类型和列表项组成
有序列表:<ol></ol>
—Order list
无序列表:<ul></ul>
—Unorder list
用于表示列表中的数据:<li></li>
—List item
语法:<ol>
<li>篮球</li>
<li>足球</li>
<li>排球</li>
<li>台球</li>
</ol>
被嵌套的列表只能出现在<li>
中,不能乱放
通常用对某个名词的解释
语法:
<dl></dl>
—–definition list(定义列表)
<dt></dt>
定义要解释的名词
<dd></dd>
表示定义列表中对名字的解释内容
格式:
<dl>
<dt>《水浒传》</dt>
<dd>中国四大名著</dd>
</dl>
作用:用于描述整个网页的结构,提升标记的语义性
<header></header>
作用:定义网页或某部分内容的头部
<nav></nav>
作用:定义网页的导航链接部分
<section></section>
作用:表示网页的主体内容
<article></article>
作用:定义与文字描述相关的内容
<aside></aside>
作用:定义页面中侧边栏的信息
<footer></footer>
作用:定义某区域的底部信息
<table></table> 行:
表格的写法:
<table>
<tr> 行必须写在表里面
<td></td>单元格必须写在row里面
<td></td>
</tr>
<tr></tr>
</table>
<caption></caption>
必须写在<table>
标签的第一行,一个表格只能有一个标题<td>
标签都可以被<th>
标签替换,table header内容的标题<thead></thead>
表格中最上面的一行或几行,进行分组,就可以将这一行放在<thead>
标签里<tfoot></tfoot>
表格中最后一行进行分组的话,可以放在<tfoot>
标签中<tbody></tbody>
可以将若干个行,放在<tbody>
中,进行统一设置注意:若不对table中的数据进行分组,默认都在中<td>
里面.<table></table>
<input>或者<input />
<input type=”checkbox” id=”login”>
<label for=”login”>下次自动登录</label>