# HTML
HTML:全称为HyperText Mackeup Language,译为超文本标记语言,不是一种编程语言,是一种描述性的标记语言,用于描述超文本中内容的显示方式。比如字体什么颜色,大小等。
html中,除了语义,其他什么都没有。
## 1.HTML结构
<html>
<head>
<title></title>
</head>
<body></body>
</html>
## 2.HTML中的标签:
标签:用“<>”包起来的内容。
Html标签
作用:作用所有html中标签的一个根节点。
Head标签
作用:用于存放title,meta,base,style,script,link
Body标签
作用:用于存放所有的html的结构标签p,h,a,b,u,i,s,em,del,ins,strong.
title标签
作用:用来设置页面的标题
meta标签:
常用用法:
1. Description:可以描述页面,可以用来使用百度程序(网络爬虫)来收录关键信息,以此提高页面的排名。
2. Keywords:关键词,可以用来提高页。面的关健词的比重(前升排名的一种方式。)
3. 字符集(编码格式):
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
Charset(字符集的格式):UTF-8.
### 常用标签
1.h系列的标签
作用:在页面上以标题的形式显示出文字。
代码:h1,h2,h3,h4,h5,h6,将文字放大,加粗.并且逐渐变小。(h1标签是最大的。)
2.p标签-段落标签
作用:用来标记当前页面上某一行文字单独为一个段落
代码:<p>这是段落</p>
特点:页面上的一个段落,单独占一行,并且与上下内容之间存在距离。
3.img标签
作用:在页面显示一张图片。
代码:<img src=”图片的路径” />
特点:就是显示图片.
| src | 图片显示的路径
| alt | 如果图片加载不出来会显示这个属性中的文字
| title | 介绍这张图片
两种路径:
a.绝对路径:从电脑的具体盘符开始寻找我们需要的
C:\other\01-html基础-{html标题}\1.jpg文件。
b.相对路径:两个文件一个文件相对于另外一个文件的位置。
两个文件处于同一目录:./
目标文件在上一级:../
目标文件在下一级:
4.a标签
作用:可以在一个页面跳转到另一个页面。
代码:<a href=”页面的路径”></a>
注意:在a标签之内必须有内容,如果没有,那么这个标签在页面上找不到。
a标签的其它用法:
1.可以不跳转(跳转到当前页面)
<a href=”#”>跳转</a>
2.在跳转的页面进行定位
<a href=”目标页面#id名”>跳转</a>
注意:使用时必须保证在目标页面有标签中的id名跟a标签中的id名保持一致。
3.可以在自己的页面进行定位。
A.设置a标签的href属性为“#id名”,
B.在页面的指定位置加入一个目标标签(可以是任意标签)
C.必须给这个标签设置一个id名:<p id=”mubiao”>这是目标</p>
4.页面之间的跳转
<a href=”其它页面的路径”>跳转</a>
5.可以用来下载
强烈建议不要使用,如果使用这玩意,将来网站的源码很有可能被直接下载。
a标签的属性
| href | A标签跳转的目标地址
| target | _blank:保留原始页面,再进行跳转
_self:在当前页面进行跳转
| base | 为页面上所有的a标签设置跳转的方式(base标签一般放在titile标签下面)
5.base标签
作用:用来统一指定跳转方式
属性:
_target:将来跳转到目标页面的方式
_self:直接在当前页面进行跳转
_blank:在新的页面进行跳转,当前页面会保留。
### 列表
1.无序列表ul
作用:显示一列没有排列顺序的数据。
代码:
<ul>
<li></li>
<li></li>
<li></li>
</ul>
注意:
1.无序列表中的数据没有先后顺序之分。
2.ul标签最好不要单独出现。
3.ul标签是用来管理li标签。
4.ul标签中最好只放li标签。
5.li标签中可以放其它标签。
6.li标签是一个容器。
2.有序列表ol
作用:显示一段有顺序的数据。
代码:
<ol>
<li></li>
<li></li>
<li></li>
</ol>
3.自定义列表dl
作用:显示一段数据,格式自己定义
代码:
<dl>
<dt></dt>
<dd></dd>
<dd></dd>
</dl>
处理兼容性:将所有的标签设置一个统一的样式。
### 表格table
代码:
<table>
<tr>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
</tr>
</table>
| 标签 | 作用 | 特点
| <th></th> | 起到表头的作用 | 其中的文字加粗,居中
| <caption></caption> | 给表格设置标题 | 在表格的最上面显示标题
| <thead></thead> | 用来存放当前列的表头 | 如果没有加css页面默认将表头中的高度设置变小
| <tbody></tbody> | 一般用来存放页面中的主体数据 | 如果不写会自动加上
| <tfoot></tfoot> | 一般情况不会出现
### 表单form
所有表单元素都需要在form标签中
属性 :action,将所有的数据提交到action指定的页面
type=reset的按钮只能在Form之中才能起作用。
作用:用来收集用户的信息,将来提交到服务器。
| 标签 | 属性 | 作用
| input | type | text:文本框
| password:密码框
| hidden:隐藏域
| radio:单选框
| checkbox:多选框
| button:按钮
| reset:重置
| image:图片按钮
| submit:提交
| hidden:隐藏域
| value | 用于设置默认值(text,password,button)
|select | option| 下拉框
|textarea | 文本域
注意点:如果想要多个radio或者checkbox组成一个选择集合,那么必须给每个radio以及checkbox都设置相同name属性。
如何给radion,checkbox设置默认值呢?
设置另外一个属性:checked=”checked”
背景属性:background
作用:用来给一些标签设置背景图片。
网友评论