html标记语言
非常非常非常基础的自学笔记
本文来自b站【达内】web前端视频的自学笔记。
b站自学链接web
一、基础
- 标签的分类
- 双标记
<关键字> 内容区域 </关键字> 有开、有关的一对标记 两个标记之间的部分,叫做内容区域。内容区域中的部分,是显示在页面上的数据。 - 单标记(—空标记)
<关键字> 或者 <关键字/>
- 双标记
- 嵌套
<body>
<a href="">
<b>字体加粗</b>
</a>
</body>
- 避免发生嵌套错误
<b>
<a>
</b>
</a>
- 属性和值
- 解释:属性和值是对标签的一种修饰。
- 例如
<a href=""></a>
-
其中
href=""
的href
是属性,""
是属性的值。(记得href
之前一定有个空格)其中=""
可以没有,但是就不明确值。- 属性必须声明在开始标记中
双标签:<关键字 属性=“值”></关键字>
单标签:<关键字 属性=“值”> - 一个元素可以有多个属性
<关键字 属性=“值” 属性=“值” …></关键字>
每个属性之间要用空格分隔。 - 属性值允许加
""
或者''
或者 不要引号
但是推荐使用""
- 通用属性,标准属性
所有元素都可以使用的属性
属性 作用 title 鼠标悬停在元素上显示的文本。 id 定义元素在页面中唯一的标识。 class css中 引用类选择器。 style css中 定义行内样式。 - 属性必须声明在开始标记中
- 注释
<!---->
不被浏览器解析的代码,一般用于编写逻辑解释
例如<!--这里添加注释-->
快捷键是:ctrl+?
注意 :注释不可以嵌套注释。<!--<!--这样嵌套是错误的-->-->
- 总结学习HTML技巧
学习固定的标签关键字 及其功能
学习固定属性和值 及其功能
学习嵌套关系
二、HTML的文档结构
- html文档的构成
<!DOCTYPE html>
告诉浏览器,请用h5的规则来解析运行当前文档 - 网页的结构
<html> </html>
作用:代表网页的开始和解释
注意:一个.html中,只能拥有一套<html> </html>
标签
在<html> </html>
中包含页面头部和页面主体。
完整结构:
<html>
<!-- 页面头部 -->
<head>
<title>设置页面的标题</title>
</head>
<!-- 页面主体 -->
<body></body>
</html>
<head></head>
是所有头部信息的容器<title>设置页面的标题</title>
<meta>
元数据,定义网页的全局信息。
<meta charset="utf-8">
这只网页中文编码方式是utf-8。Chrome在62版本以上 不写utf-8也行。
<meta name="description" content="描述内容">
<meta name="Keywords" content="关键字内容">
<script></script>
定义或引用js文件<style></style>
定义网页的内部样式<link>
引入外部样式
<body></body>
定义网页主体(网页的可视区域)
<body bgcolor="yellow" text="red">文字</body>
专有属性:
bgcolor:设置背景色,取值为合法颜色值。
text:设置文本颜色,取值为合法颜色值。- 先输入**!** 然后 enter (回车) 可快速生成文本模板。
!+ enter
三、文本重点
-
标题元素
<h1>这是标题1</h1>
<h1></h1>
<h2></h2>
… …<h6></h6>
作用:在页面中以醒目的方式显示文本
特点:1.字体大小变化 h1最大,h6最小。2.字体加粗显示。3.独占一行。4.上下有垂直距离。
专有属性 : align 设置标记内部内容水平对齐方式。 取值: left (默认) / center / right
(从w3school得知,html4不建议使用align,而html5直接不支持了。直接用CSS来处理。解释。用style属性,比如style=‘text-align:center’) -
段落标记
<p> 这是一个段落</p>
<p>这又是一个段落</p>
特点:1.独占一行。2.上下有垂直距离
属性:align 取值left (默认) / center / right -
换行标签
<br>
:这就是换
行 -
水平线
<hr>
: 这就是水平
线例:
<hr size="5px" width="50px" color="pink">
属性 | 作用 |
---|---|
size="5px" | 水平线粗细,px为单位 |
width="50px" | 水平线的宽度,px为单位 |
align="lift" | 水平线的水平对齐方式 |
color="pink" | 水平线颜色 |
-
预格式话标签
<pre> 这里会保留 空格 和 回车</pre>
-
特殊字符
html有空格折叠现象:页面中所有的空格和回车都会被解析为一个空格。
  | 空格 |
---|---|
< | < |
> | > |
÷ | ÷ |
© | © |
® | ® |
¥ | ¥ |
× | × |
÷ | ÷ |
- 文本样式
<b></b> <strong></strong> | 加粗 |
---|---|
<i></i> <em></em> | 斜体 |
<s></s> <del></del> |
H5推荐使用有语义的标签
<u> </u> | 下划线 |
---|---|
<sup> </sup> | 上标 例如:22=4 |
<sub> </sub> | 下标 |
- 分区元素
-
块级分区
<div></div>
作用:用于页面布局。
特点:独立成行。 -
行分区
<span></span>
同一行文字使用不同样式的时候用 span。
特点:与其他span公用一行
例:<a href="#"> <span style="color:red">小温</span> 历险记 </a>
-
- 元素的显示方式
- 块级元素
在网页中独占一行的元素就是块元素
默认从上往下排列
例:div h1~h6 p pre - 行内元素
在网页中能够在一行内显示的元素(暂时这样理解)
同一行中 从左往右排列
例:span b i em…
- 块级元素
四、图像和链接
-
图像语法
<img>
<img src="图片路径/url">
-
url
俗称:路径
(Uniform Resource Locator 统一资源定位符) -
绝对的表现形式
- 绝对路径
- 使用任何网络资源的时候,使用绝对路径
https://img.alicdn.com/tfscom/TB1P4e0t1OSBuNjy0FdXXbDnVXa.jpg_q90.jpg
通信协议://主机名/
文件目录结构/文件名称
优点:不占用本地存储空间
缺点:不稳定 - 使用本机资源时用绝对路径,项目里不许使用。
- 使用任何网络资源的时候,使用绝对路径
- 相对路径
参照物,访问资源的html文件- 兄弟关系(同级) :可直接写文件名
- 子集目录:先进入兄弟文件夹 再找文件
- 父级: 先
../
然后文件名 - 父级的父级:
../../
再接文件名
- 绝对路径
-
img标签的属性
src | source 源 设置图片资源路径 |
---|---|
alt | 图片资源出现错误时,显示的文本 |
width | 设置图片的宽度 |
height | 设置图片的高度 |
注意 | 如果设置的宽高比,不符合图片本身的宽高比,图片会发生失真解决方法,宽高只设置一个,另外一个自动适应 |
title | 公有属性 |
- 链接
-
语法
<a href=""></a>
属性:
href
target
指定打开链接的方式_self
默认在当前标签页打开新的网页_blank
在新的标签页中打开
<a>
标签的其他用途- 下载资源:
<a href="*.zip"></a>
- 链接到电子邮件:
<a hred="mailto:xiaoyang@163.com">打开邮箱</a>
- 返回页面顶:
<a href="#">返回页面顶部<a/>
- 使用
<a>
标签,执行js
<a href="javascript:show()">点点我</a>
- 下载资源:
-
- 锚点
- 什么是锚点
就是在页面上做了一个记号,可以通过点击a标签,跳转到这个记号 - 使用锚点
- 定义锚点
- (h4)
<a name="锚点名称"></a>
- (h5)
<任意标签 id=“锚点名称”>
- (h4)
- 使用a标签跳转到锚点
<a href="#锚点名称"></a>
- 定义锚点
- 什么是锚点
五、表格
- 表格语法
-
标记
<table></table>
:表格
<tr></tr>
:行(table row)
<td></td>
:列(table data)
table 中,所有数据写在td里面。
快捷方式:table>tr*4>td*3
<table> <tr><!--行--> <td>第一列</td> <!-- 列--> <td>第二列</td> </tr> </table>
第一列 第二列 第三列 第二行第一列 第二行第二列 第二行第三列 -
属性(在学css前)(老旧的,不用这种布局方式)(现在用div+css布局)
- table的
border="2px"
:设置表格边框
width="150px"
:设置表格宽度
height="200px"
:设置表格高度
align="center"
:设置表格本身的水平对齐值 left/ceter/right
bgcolor="pink"
: 设置背景颜色
bordercolor=""
:设置边框颜色
cellpadding="50px"
:设置单元格的内容到边框的距离
cellspacing="20px"
:设置单元格的外边距,也就是边框到边框的距离。 - tr的
align="right"
:设置表格内容的水平对齐方式
valinn="top"
: 设置表格内容 的垂直对齐方式top/middle/bottom
bgcolor="orange"
- td的
width
:设置单元格宽度,会影响其他行同位置的单元格宽度。
height
:设置单元格高度,会影响当前行其他单元格高度。
align
:设置单元格内容的水平对齐方式
valign
:设置单元格内容的水平对齐方式
bgcolor
:
colspan
:跨列
rowspan
:跨行- 不规则表格
colspan="个数(要包括自己)"
:跨列,
从指定单元格开始,横向向右合并N个单元格,n包含自己,被合并的单元格要删除掉rowspan
:跨行
从指定单元格开始,纵向向右合并N个单元格,n包含自己,被合并的单元格要删除掉。
- 不规则表格
- table的
-
表格中的可选标记
- 表格标题
<caption></caption>
要紧跟<table>
标签。 - 行列的标题
<th></th>
th代替tr中的td:加粗并且居中
- 表格标题
-
表格的复杂应用
- 行分组
<thead></thead>
<tbody></tbody>
<tfoot></tfoot>
<table> <thead><!--表头--> <tr>...</tr> </thead> <tbody><!--表体--> <tr>...</tr> </tbody> <tfoot><!--表脚--> <tr>...</tr> </tfoot> </table>
1 2 3 4 5 6 7 8 9
- 行分组
-
六、列表
- 列表的作用
让数据有条理的显示,在数据之前添加标识
但是现在页面布局,会使用到无序列表 - 列表的组成
- 有序列表
<ol></ol>
属性:<ol> <li><li> ... </ol>
type:设置列表标识的类型。
取值: 1 默认值 ,a A 标识项为字母,i I 标识项为罗马数字。 - 无序列表
<ul></ul>
属性:<ul> <li></li> ... </ul>
type:设置列表标识的类型
取值: disc 实心小圆点, circle 空心圆, square 方形, none 无 。
ul在项目中使用非常频繁,常用于对于一组相似的内容进行布局和排版。 - 列表的嵌套
所有的嵌套内容,必须写在li中,这是语义要求- 在列表嵌套其他元素
<ul> <li><a></a></li> ... </ul>
- 列表嵌套列表
<ul> <li>外层列表 <ol> <li>内层列表</li> <li>这也是内层列表</li> </ol> </li> </ul>
- 在列表嵌套其他元素
- 定义列表
- 对一个名词,进行解释说明的时候,使用的列表,h5新标签
<dl> <dt>要解释的名词</dt> <dd>对名词的说明解释</dd> </dl>
- 对一个名词,进行解释说明的时候,使用的列表,h5新标签
- 有序列表
七、结构标记
- 作用
用于网页布局,h5新出了一批结构标记,替代div做布局
这些结构标记与div的作用一模一样,只是增加了可读性 - 常用的结构标记
<header></header>
:定义网页的头部,或者某个区域的头部<footer></footer>
:定义某个网页的底部,或者某个区域的底部<nav></nav>
:定义网页导航<section></section>
:定义网页的主体内容<aside></aside>
:定义侧边栏<article></article>
:定义与文字相关的内容
八、表单(重点)
- 作用
- 提供可视化的输入控件
- 收集用户输入发信息,并提交请求给服务器
总结:- form自带提交请求收集数据的功能
- ajax提交请求,需要自己去收集数据
- 使用ajax就不要使用form(二选一)
- form的组成
- 前端:提供表单控件,与用户交互的可视化控件
- 后端:后台的接口对提交的数据进行处理
- form表单的使用
- 语法
<form action="接口 url" method="提交的方法"></form>
- form的属性
-
action
<form action="接口"
定义表单提交时发送的动作 (向哪个url发送请求)
如果action不写,或者action没有值,默认把请求发给本页面 -
method
定义表单的提交方式- get方法 默认值
特点:明文提交,提交的内容会显示到地址栏上
get提交的数据,有大小限制,最大2kb
使用时机:向服务器要数据的时候使用 - post方法
特点:隐式提交,提交的内容不会显示到地址栏
post提交的数据没有大小限制
使用时机:要传递数据给服务器的时候使用 - 其它的方法—使用form表单,目前不许使用delete,put,option
delete put option—ajax使用这些方法
- get方法 默认值
-
enctype
指定表单数据的编码方式
允许将什么样数据提交给服务器
取值:- text/plain 允许提交普通字符(
-
和_
)给服务器 - multipart/form-data 允许提交文件给服务器
- application/x-www-form-urlencoded允许提交任意字符给服务器(文件不能提交)
- text/plain 允许提交普通字符(
-
表单控件,在form表单中,能够与用户进行交互的可视化控件
-
分类:
input标签 基础9种, h5新标签10种
textarea 多行文本域
select和option 下拉选择框
其它元素 -
input 元素
<input type="">
属性:
1.type 指定input元素的类型
2.name 为控件定义名称,把名称提供给服务器端使用
如果form表单想提交数据,必须写name属性
3.value 控件的的值,就是传递给服务器的值
例外,在button中使用的时候,value是按钮上的文本
4.disabled 禁用 不能修改,也不可提交
无值属性,在使用的时候,不写值 -
input详解
- 文本和密码框
文本框 type=“text” input默认是文本框
密码框 type=“password”
属性:
maxlength 设定输入的最大长度
readonly 只读,无值属性。不能修改但是可以提交
placeholder 占位提示符,默认显示在框内的提示文本 - 按钮
type=“submit” 将表单中的数据,收集整理,并发送给服务器
type=“reset” 将当前表单恢复到初始化状态
type=“button” 没有功能,配合事件,调用js代码
附加知识点
替代了submit - 单选/复选按钮
name属性除了作为控件名称以外,还作为控件分组
单选按钮 type=“radio” 必须有value才能正确的传递值
复选按钮 type=“checkbox” 必须有value才能正确的传递值
checked 无值属性,默认选中 - 隐藏域
type=“hidden”
想把数据提交给服务器,但是不想展示给用户看
这种数据就放在隐藏域中
隐藏域,用户看不到,但是又可以提交 - 文件选择框(上传文件的时候使用)
type=“file”
注意,使用文件选择框,需要保证form的属性
1.method=“post”
2.enctype=“multipart/form-data”
属性:multiple 多重,无值属性
- 文本和密码框
-
多行文本域(大的文本框)
<textarea></textarea>
允许录入多行文本
属性 cols rows 根据计算机硬件的不同,有不同的显示,不准确 -
下拉选
<select name="city"> <option>成都</option> <option>绵阳</option> <option>宜宾</option> <option>自贡</option> <option>重庆</option> </select>
注意:
如果option没有value属性,那么提交的select的value就是选中的option的内容
如果option有value,那么select的value就是选中的option的value值
属性 :
size=“4” size>1 变成滚动选择框
multiple 滚动选择框时,可以实现多选 -
其他元素
1.label元素
替代form中span
文本和表单控件的关联
<input type="radio" name="gender" value="un" id="r3">
<label for="r3">
不透露
2.为控件分组
<fieldset></fieldset>
控件分组
<legend></legend>
分组的标题
-
-
- 语法
表单实例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
table{
align-items: center;
}
</style>
</head>
<body>
<form action="" method="POST" enctype="multipart/form-data">
<table width="500px">
<tr>
<td>
用户名:
</td>
<td>
<input type="text" name="uname">
</td>
</tr>
<tr>
<td>密码:</td>
<td><input type="password" name="upwd"></td>
</tr>
<tr>
<td>籍贯:</td>
<td>
<select name="city" id="">
<option value="bj">北京</option>
<option value="sh">上海</option>
<option value="gz">广州</option>
<option value="cx">曹县</option>
</select>
</td>
</tr>
<tr>
<td>性别:</td>
<td>
<input type="radio" name="gender" value="m">男
<input type="radio" name="gender" value="f">女
<input type="radio" name="gender" value="un" checked>不告诉你
</td>
</tr>
<tr>
<td>头像:</td>
<td><input type="file" name="pic"></td>
</tr>
<tr>
<td colspan="2">意向工作的城市:</td>
<td></td>
</tr>
<tr>
<td></td>
<td>
<select name="job_city" id="" size="5" multiple>
<option value="bj">北京</option>
<option value="sh">上海</option>
<option value="gz">广州</option>
<option value="cx">曹县</option>
</select>
</td>
</tr>
<tr>
<td>留言:</td>
<td>
<textarea name="msg" id="" cols="20" rows="6">
</textarea>
</td>
</tr>
<tr>
<td></td>
<td>
<button>提交</button>
<input type="reset" value="清除">
</td>
</tr>
<tr>
<td></td>
<td>
<input type="checkbox" name="auto">不公开信息
</td>
</tr>
</table>
</form>
</body>
</html>