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

属性	属性值	说明
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表格的基本代码书写格式

html 复制代码

<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>

html 复制代码

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

14.2有序列表<ol>

html 复制代码

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

14.3自定义列表<dl>

html 复制代码

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

15.表单标签

15.1表单基本书写格式

html 复制代码

<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值相同时）

html 复制代码

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

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

15.5.1基本书写格式

html 复制代码

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

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

15.6文本域标签<textarea>

html 复制代码

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

16.HTML5语义标签

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