前端基础——HTML(二)
- 2020 年 10 月 22 日
- 筆記
- 前端基础——HTML
HTML标签
- 标题标签
<h1>、<h2>、<h3>、<h4>，标题标签之间是不能嵌套的，下一级标题与上级标题之间通过同级关于书写，下级标题解释说明的是前面距离最近的上一级标题
- 权重
<h1>在整个HTML中的权重非常高，内部应该html中最重要的内容。<h1>权重大于<h2>
如果一个页面出现多个<h1>，反而降低权重，往往会约定，一个页面出现一个<h1>就够了。
换行标签
<br/>(breaking)标签作用是换行，是一个单标签
与<p>不同的是，<br>没有建立新的段落的语义，只是简单的进行强制换行<br>
这是br换行标签使用<br>
段落标签
一对<p></p>标签的内部元素为一个完整的段落<br>
<p>这是标签的使用emmmm</p>
<p>这是标签的使用emmmm</p>
<p>这是标签的使用emmmm</p>
-
文本格式化的标签均为双标签，且文本级标签内部只能写文字
标签 描述 b 定义粗体文本，bold big 定义大写字体 em 定义着重文字，emphasis，自带斜体效果 i 定义斜体字，italic small 定义小号字 strong 定义加重语气，自带加粗效果 sub 定义下标字，subscript sup 定义上标字，suprscript ins 定义插入字，自带下划线效果，insert del 定义删除字，delete s 不赞成使用，使用del代替就可以了 strike 不赞成使用，用del就好 u 定义下划线，不赞成使用，后期让css添加样式即可
图像标签
- 由
<img>标签进行定义，在指定的位置插入一张图片，是一个单标签 <img>常用属性展示，通过属性进行相关的图像设置
代码示例：
<img src="picture.ipg" border="1" alt="图片1">
属性名 描述
src 表示图片的路径
width 表示图片的宽度
height 表示图片的高度
border 边框属性，可以设置边框的粗细
title 设置提示文本
alt 设置图像没有找到时候的替换文本
- 引入图像需要填写路径，这里路径分为相对路径、绝对路径、相对路径
- 相对路径查找文件时，需要从HTML文件本身出发，根据相对位置进行查找，包含三种方向：
- 同级查找：当目标文件与和HTML文件位于同一级，直接写 文件名.后缀
<img src="picture.jpg">
- 子集查找：目标文件在与HTML文件同一级的文件夹里面，这时就需要先找文件夹的名称，
然后通过关闭符号/进入文件夹查找里面的文件
<img src="img/picture.jpg">
- 上级查找：目标文件在HTML文件所在的文件夹的更上一级，需要跳出当前文件夹到上一级，路径则利用
  ../表示跳出一级，若跳出多级，写多次../ 直到找到文件
- 绝对路径
- 绝对路径查找文件时，不需要从和和HTML文件出发，直接从电脑的盘符出发查找，或者使用网址形式查找
- 盘符查找：
<img src="C:\Users\xiaomi\Desktop\picture.jpg">- 网址形式：
<img src="//ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=2443910753,1558982167&fm=26&gp=0.jpg">- 缺点：盘符出发的路径不可移动，不可移植
若路径中有中文，易出错
音频控制条属性
- 音频加载后不会自动显示播放器的控制条，设置controls属性值为conntrols即可
<audio src=""music.mp3" controls="controls">
视频标签
<video>是双标签，支持的格式.mp4、.ogg、.webm
设置方法与音频类似<video src="video.mp4" controls="controls"><video>
超级链接标签
- a 全称anchor，锚的意思，为双标签，
<a>标签在指定的位置添加链接，提供用户进行点击和跳转<a>标签可以实现两种跳转：跨页面跳转、页面内跳转- herf超文本引用，用于规定链接的目标地址
属性值：链接目标的路径地址，可以使用相对路径或网址形式的绝对路径
- targte属性
可以定义被链接的文档在何处跳转显示属性值 描述 _blank 在新的窗口打开链接 _self 默认，在相同的框架中打开被链接文档 _parent 在父级框架集中打开被链接文档 _top 在整个窗口中打开被链接文档 framename 在指定的框架中打开被链接文档
无序列表标签
- 无序列表需要两个标签参与，
<ul>和<li> - ul：定义一个无序列表的大结构
- li：列表项，定义的是无序列表内的某一项
<ul>、<li>是嵌套关系，快捷键ul>li- 注意：
<ul>内部只能嵌套<li>，<li>标签不能脱离<ul>单独书写<li>标签是经典的容器级标签，内部可以放置任意内容- 无序列表的作用只是搭建列表结构，没有添加样式前缀的功能，样式是由css负责
有序列表标签
- 有序列表需要两个标签参与，
<ol>和<li> <ol>定义一个有序的列表的大结构<li>定义的是有序列表的每一项，<ol>和<li>是嵌套关系，快捷键：ol>li- 注意：
<ol>内部只能嵌套<li>，<li>标签不能脱离<ol>单独书写<li>标签是经典的容器级标签，内部可以放置任意内容- 有序列表的列表项
<li>之间，存在顺序先后之分
定义列表标签
- 自定义列表不仅仅是一列项目，而是项目及其注释的组合
- 由
<dl>、<dt>、<dd>组成
- dl：定义一个自定义列表的大结构
- dt：定义自定义列表中的一个主题或术语
- dd：定义解释项，表示描述或解释前面的定义主题
<dl>内部只能嵌套<dt>、<dd>，<dt>和<dd>是同级关系
代码示例：
<dl>
<dt>主题<dt>
<dd>解释<dd>
</dl>
注意：1.<dl>内部只能嵌套<dt>和<dd>，<dt>和<dd>标签不能脱离<dl>单独书写
2.<dl>内部可以存放多组dt和dd，每个dd解释说明的搜索前面距离最近的一个dt
3.每个dt后面可以有多个dd或者0个
4.后期添加css样式，最好每个dl添加一组dt和dd
布局标签
<div>和<span>标签常用作布局工具，俗称为盒子<div>俗称大盒子，双标签，容器级标签，多用于划分网页区域，进行结构布局。<span>俗称小盒子，双标签，容器级标签，不改变整体效果的情况下，可以辅助进行局部调整
HTML基本语法–表格基础
<table>border —- 边框属性值- 设置border表格的单元格之间有默认的空隙，会导致双边框线
- border-collapse:collapse—–表示边框塌陷（单边框线）
样式css
<style type="text/css">
table
{
border-collapse:collapse;
}
table, td, th
{
border:1px solid black;
}
</style>
……………………………………………………………………………………………………………………………………………………………………………………
表格table
<table>
<th colspan="2">这是表头</th>
<tr>
<td>第一行第一列</td>
<td>第一行第二列</td>
</tr>
<tr>
<td>第二行第一列</td>
<td rowspan="2">第二行第二列</td>
</tr>
<tr>
<td>第三行第一列</td>
</tr>
<tr>
<td colspan=”2“>第四行第一列</td>
</tr>
</table>
rowspan：跨行合并，上下的合并
colspan：跨列合并，左右的合并
HTML基本语法–表单元素
-
表单的作用就是收集数据；由表单元素和表单的控件元素组成；其功能就是负责显示、收集、提交数据到服务器上
-
<form>标签通过对应属性规定提交数据的方法和提交位置属性名 属性值 描述
action url 指定接收并处理表单数据的服务器程序的url地址
method get/post 用于设置表单数据的提交方式
name 自定义名称 规定表单的名称 -
<form action="xxx.php" method="post/get" name="message">表单区域<from>
<input>标签属性
属性名 属性值 描述
text 单行文本框
password 密码文本框
radio 单选框
submit 提交按钮
type reset 重置按钮
button 按钮
image 图像形式按钮，src="../../地址"
file 定义输入字段和‘浏览’按钮，上传文件
multiple属性决定是否可以选则多个文件
checkbox 复选框，默认选中checked
hidden 定义隐藏的输入字段
name 定义控件的名称
value 定义控件的默认文本
size 数字 定义控件的宽度
checked checked 定义选框控件的默认被选中项
maxlength 数字 定义允许输入的最多字符数
<textarea>文本域
- 双标签，多行文本区域
- rows：行，
- cols：列，每一行显示的最大字节数
<textarea rows="10" cols="30">这是一个文本框</textarea>
下拉菜单<select>的分组管理
-
分组管理使用
<optgroup>标签对选项进行分组，<optroup>是一个双标签，该标签也可以设置一个label属性， -
表示给这一组选项添加一个分组标签名，分组标签
<optgroup>是不能被点击选择的代码示例: <select> <optgroup label="陕西"> <option>西安</option> <option>安康</option> </optgroup> <optgroup label="四川"> <option>成都</option> <option>绵阳</option> </optgroup> </select>
label标签
-
label标签主要作用就是帮助表单元素定义标注，将
<label>与表单控件进行绑定后， -
用户点击
<label>内的提示内容是时，浏览器会自动将焦点转到和标签相关的表单控件上绑定方法一： <input type="checkbox" name="class" id="classType"/> <label for="Chinese">语文</label> 绑定服务二： <label><input type="radio" name"sex">女</label> 简化绑定
