【WEB前端】---HTML---结构---笔记

1.标签---单标签和双标签

1.1单标签

1.2双标签

2.基本结构标签

2.1HTML标签

2.2文档头部标签

2.3文档标题标签

2.4文档的主题标签

3.常用的标题标签 (n∈[1,6])

4.段落标签

5.换行标签

6.文本格式化标签

6.1粗体

6.2倾斜

6.3删除线

6.4下划线

7.div和span标签

8.图片标签

9.路径=相对路径和绝对路径

9.1相对路径分类

9.2特点：

10.链接标签

10.1链接标签的属性

10.2链接分类

11.注释

12.特殊字符（常用）

13.表格

13.1表格的基本代码书写格式

13.2表格的属性

14.列表

14.1无序列表

14.2有序列表

14.3自定义列表

15.表单标签

15.1表单基本书写格式

15.2表单属性

15.3表单元素（表单控件）

15.3.1input表单控件的type属性的属性值如下所示

15.3.2input控件的其他属性

15.4标签

15.5下拉标签---节约页面空间15.5.1基本书写格式15.6文本域标签

1.标签---单标签和双标签

1.1单标签

---<hr/>水平分割线、<input/>表单元素、<br/>换行标签等

1.2双标签

---<h1></h1>标题标签、<html></html>HTML标签等

2.基本结构标签

2.1HTML标签

---<html></html>

2.2文档头部标签

---<head></head>

2.3文档标题标签

---<title></title>

2.4文档的主题标签

---<body></body>

3.常用的标题标签<hn></hn> (n∈[1,6])

<h1>标题一共六级可以选择</h1>

<h2>文字加粗并且一行显示</h2>

<h3>从h1到h6文字大小递减</h3>

<h4>随着文字大小粗细变化</h4>

<h5>语法书写要规范</h5>

<h6>具体效果刷新就可以看见了</h6>

4.段落标签<p></p>

<p>用于定义段落，可以将网页划分位若干个段落，文本在一个段落中会根据浏览器的窗口大小自动换行，段落与段落之间有空隙</p>

5.换行标签<br/>

换行标签是单标签，是用于强制换行的，只是简单的开启新的一行，没有行间距，段落之间会插入一些垂直的间距

6.文本格式化标签

6.1粗体

---<strong></strong>---更加推荐使用<strong>标签

---<b></b>

6.2倾斜

---<em></em>---推荐使用

---<i></i>

6.3删除线

---<del></del>---推荐使用

---<s></s>

6.4下划线

---<ins></ins>---推荐使用

---<u></u>

7.div和span标签

<div>标签用来布局，一行只能放一个<div>---大盒子

<span>标签用来布局，一行可以放多个<span>---小盒子

8.图片标签<img />

属性	属性值	说明
src	图片路径	必须属性
alt	文本	替换文本，图像不能显示的时候显示的文字
title	文本	提示文本，鼠标悬停在图片上方的时候出现的文字
width	像素	图片的宽度
height	像素	图片的高度
border	边框	图片的边框样式

采用键值对的方式进行书写，可以写多个属性，属性与属性之间用空格分开

9.路径=相对路径和绝对路径

以引用文件的绝对位置为参考基础，而建立的目录路径就是相对路径

9.1相对路径分类

相对路径分类	符号	说明
同一级路径		图像文件位于HTML文件同一级
下一级路径	/	图像文件位于HTML文件下一级
上一级路径	./	图像文件位于HTML文件上一级

9.2特点：

相对路径分类是图像相对于HTML文件的位置；

绝对路径是指目录下的绝对位置，通常是从盘符开始的；

相对路径是从这个项目所在的这个文件夹出发，去寻找目标文件

10.链接标签<a>

10.1链接标签的属性

10.2链接分类

外部链接：利用href="跳转的路径"直接跳转到外部链接页面
内部链接：利用href="跳转的路径"直接跳转到当前项目文件夹内中的目标链接页面
空链接：href="#"表示没有确定的跳转目标
下载链接：href="文件/压缩包"，会自动下载此链接指向的内容
网页元素链接：可以直接给当前网页中的元素（图像/表格/音频等）添加超链接
锚点链接：通过href="#名字"的方式跳转到相关id名字所在的地方（起到一个快速定位的作用）

11.注释

12.特殊字符（常用）

符号	说明
>	>
<	<

13.表格

13.1表格的基本代码书写格式

<table>
    <thead>
    <!--这里是表头部分-->
        <tr>
            <td>表头单元格，可以按需添加多个</td>
            ...
        </tr>
    </thead>
    <tbody>
    <!--这里是表格主题部分-->
        <tr>
            <td>表格主体的单元格，可以按需添加多个</td>
            ...
        </tr>
        <tr>
            <td>表格主体的单元格，可以按需添加多个</td>

            ...
        </tr>
        ...
    </tbody>
</table>

13.2表格的属性

属性名	属性值	说明
align	left center right	规定表格相对周围元素的对齐方式
border	如1(输入必须为整数)或者' '无边框	规定表格的边框样式
cellpadding	像素值	规定单元格边沿与内容之间的边距
cellspacing	像素值	规定单元格与单元格之间的边距
width	像素值	规定表格的宽度
colspan	列数值	跨列合并（最左侧为目标单元格）
rowspan	行数值	跨行合并（最上侧为目标单元格）

14.列表

14.1无序列表<ul>

<ul>
    <li>无序列表的列表项，无序列表中只能存放li标签，可以有若干个li标签</li>
    ...
</ul>

14.2有序列表<ol>

<ol>
    <li>有序列表的列表项，无序列表中只能存放li标签，可以有若干个li标签</li>
    ...
</ol>

14.3自定义列表<dl>

<dl>
    <dt>名词1</dt>
    <dd>名词解释</dd>
    ...
</\dl>

15.表单标签

15.1表单基本书写格式

<form>
    <label>xxx</label>
    <input />
    ...
</form>

15.2表单属性

属性	属性值	作用
action	url地址	用于指定接收并且处理表单数据的服务器程序的url地址
method	get/post	用于设置表单的提交方式，其取值是get/post
name	名称	用于指定表单的名称，以区分同一个页面中的多个表单

15.3表单元素（表单控件）

15.3.1input表单控件的type属性的属性值如下所示

type的属性值	描述
button	可点击按钮
checkbox	复选框
file	上传文件
hidden	隐藏
image	图像（可以直接用img标签）
password	密码框
text	文本框
radio	单选按钮
reset	重置按钮
submit	提交按钮

15.3.2input控件的其他属性

属性	属性值	描述
maxlength	正整数	最大长度
name	用户自定义名称	定义input的名称
value	用户自定义value值	规定input的值
checked	checked	选项框处于选中状态

注意：name和value值主要是针对后台人员使用的；

多选框实现多选一则需要name值与单选框相同时；

checked主要针对的是单选框radio和复选框checkbox

15.4<label>标签

定义:为input元素添加标签（可以4扩大input元素的交互范围，同相关元素的id值相同时）

<form>
    <label for="同id名字一样扩大交互范围">xxx</label>
    <input type="" name=""  id="" />
    ...
</form>

15.5下拉标签<select>---节约页面空间

15.5.1基本书写格式

<select>
    <option>选项1</option>
    ...
</select>

<select>标签中至少包含一对<option>标签，在<option>中定义selected="selected"时，则当前项即为默认选中项

15.6文本域标签<textarea>

<textarea rows="行数" cols="显示的字符数">
  xxxx文本书写区域
</textarea>

16.HTML5语义标签

<header>	页眉
<nav>	导航
<main>	主体
<section>	节
<aside>	侧栏
<footer>	页脚