【学习笔记】:一天搞定HTML
PS:许多控制样式的标签在HTML5中都不推荐使用,建议使用CSS,如align,border等。
一、概念
HTML
的英文全称:Hypertext Marked Language
超文本标记语言。
超文本
超文本是一种组织信息的方式,它通过超链接的方法将文本中的文字、图表与其他信息媒体相关联。
标记语言
-
由标签构成的语言,格式:
<标签名称>
。 -
标记语言不是编程语言。
-
通过html的属性可以控制样式,但是不推荐使用。
二、语法
-
html文档后缀名
.html
-
标签分为:
- 围堵标签:开始和结束标签,如
<html> </html>
- 自闭合标签:开始标签和结束标签在一起,如
<br/>
- 围堵标签:开始和结束标签,如
-
标签可以嵌套:需要正确嵌套,不能你中有我,我中有你。
-
在开始标签中可以定义属性,属性由键值对构成,值需要用引号引起来。
-
html标签不区分大小写,但是建议用小写。
三、标签
1. 文件标签
<html>
:定义HTML文档<head>
:用于指定html文档的一些属性,引入外部的资源。<title>
:定义文档的标题<body>
:定义文档的主体<!DOCTYPE html>
:html中定义该文档是html文档
2. 文本标签
- 注释:
<!-- xxx -->
<h1>
to<h6>
:标题标签<p>
:段落标签<br>
:换行标签(空标签)<hr>
:水平线<b>
:字体加粗<i>
:字体斜体<font>
:字体标签(不赞成使用)
3. 图片标签
<img>
:图片标签
- 必需属性
- alt:规定图像的替代文本,如果图片没有正常加载,将会显示alt文本。
- src:规定显示图像的URL。
- 绝对URL:指向其他站点,如
src="https://www.baidu.com"
- 相对URL:如指向上一层同级目录images的1.png文件,
src="../images/1.png"
。
- 绝对URL:指向其他站点,如
- 可选属性
- width:图像宽度
- height:图像高度
4. 列表标签
-
有序列表
<ol type=''>
- type:规定列表的标记类型。
- start:规定有序列表的起始值。
- reversed:规定降序。
<li>
:定义列表项目
-
无序列表
<ul type=''>
- type:规定列表的标记类型,不赞成使用。
<li>
:定义列表项目
type属性可以选择标记类型
5. 链接标签
<a>
:定义一个超链接。- href:规定链接指向的页面的 URL
- target:规定在何处打开链接文档,如果不使用href,就不能有target。
- _self:默认在当前页面打开
- _blank:在空白页打开
6. div和span
<span>
:文本信息在一行展示,行内标签,内联标签。<div>
:每一个div占满一行,块级标签。
这俩标签配合id、class属性调整样式,格外有效。
7. 语义化标签
提高程序可读性。
<header>
<footer>
8. 表格标签
-
<table>
:定义表格-
width:表格宽度
-
border:表格边框长度
-
cellpadding:定义内容和单元格的距离
-
cellspacing:定义单元格之间的距离,如果为0,则线合为一条
-
-
<tr>
:定义行,一个<tr>
可以包含多个<td>
、<th>
。 -
<td>
:定义单元,正常字体左对齐。 -
<th>
:定义表头单元格,粗体居中。<td>
和<th>
跨行、列的属性:- rowspan:定义单元格可跨的行数。
- colspan:定义单元格可跨的列数。
-
<caption>
:表格标题,居中于表格上
下面这仨需要配套使用:
<thead>
:定义表头<tbody>
:定义表主体。<tfoot>
:定义脚注。
9. 表单标签
表单项中的数据想要被提交,必须指定其name属性
<form>
<form>
用于定义表单,可以定义一个范围,代表采集用户数据的范围。
<form>
属性-
action:指定提交数据的URL
-
method:指定提交方式共七种,get/post比较常用
- get:请求参数会在地址栏显式,参数大小有限制,不太安全
- post:请求参数不会在地址栏中显式,会封装在请求体中,参数大小没有限制,较为安全
-
target:规定在何处打开链接文档。
- _self:默认在当前页面打开
- _blank:在空白页打开
-
<input>
<input>
用于定义输入空间,搜集用户信息,根据不同的type属性值,拥有很多样式:
- text:默认文本框。
- password:密码框。
- radio:单选框。要想达到单选的效果,必须name值一致,且建议每种选择定义一个value。
- checkbox:复选框。复选框name值建议也一致,value值不一致。
- file:文件选择框。
- image:将图片作为提交按钮。
- submit:提交表单数据的按钮。
- reset:重置数据的按钮。
- button:普通按钮。
- email:邮箱。
<input>
标签还有其他的属性,比如:
- placeholder:定义输入字段的提示。
- checked:规定该元素首次加载被选中。
- value:
- 对于button、reset、submit:value值是按钮上显示的文本。
- 对于text、password、hidden:value是输入字段的初始值。
- 对于checkbox、radio、image:value是输入相关联的值。
表单其他元素
<textarea>
:定义多行的文本输入空间。
- cols:定义宽度。
- rows:定义行数。
- placeholder:定义预期提示字。
<select>
与<option>
:
<select>
定义单选或多选菜单。<option>
定义下拉列表中的一个选项。- selected:规定该选项首次显示时为选中状态。
- value:选项值。
<label>
:为<input>
元素定义标注。
- for属性:可以绑定到指定id的元素,在点击label文本的时候,就会自动聚焦到相关元素上,非常好用。
四、全局属性
全局属性可以应用于所有的HTML元素。
- id:规定元素唯一的id,作为链接锚。
- class:规定元素的一个或多个类名(不能以数字开头)。
- style:规定行内CSS样式。
五、重要实体名称
结果 | 实体名称 |
---|---|
> | > |
< | < |
& | & |
' | ' |
" | " |