HTML基础知识总结

Posted 2021-09-21 迷糊的小小淘

Web标准的构成：Web标准主要包括结构(structure)、表现(presentation)和行为(behavior)三个方面，其中结构主要用于对网页元素进行整理和分类，如html，表现用于设置网页元素的版式、颜色、大小等外观样式，如css，行为是指网页模型的定义及交互的编写，如javascript。

标签

<h1>-<h6>标题标签

加了标题的文字会变得加粗，字号也会依次变大，一个标题独占一行

<p>段落标签

文本在一个段落中会依据浏览器窗口的大小自动换行，段落和段落之间保有空隙。

<br />换行标签

即break的意思，是单标签

<strong>、<em>、<del>、<ins>文本格式化标签

为突出文本重要性，设置粗体/斜体/下划线/删除线等效果

语义	标签
加粗	<strong>或<b>
倾斜	<em>或<i>
删除线	<del>或<s>
下划线	<ins>或<u>

<div>和<span>标签

它俩是没有语义的，像是一个盒子，用来装内容

区别：

• 
  <div>标签用来布局，但现在一行只能放一个<div>
• <span>标签用于布局，一行上可以放多个<span>

<img>图像标签

图像标签中有多个属性，排名不分先后，均采用键值对的格式

属性	属性值	说明
src	图片路径	必须属性
alt	文本	图片加载不出来时的替换文本
title	文本	鼠标放到图片上的提示文本，如，这是一张老鼠的照片
width	像素	设置图像宽度，一般高度和宽度二选一进行设置
height	像素	设置图像高度
border	像素	设置图像的边框粗细

补充：

• 相对路径：以引用文件所在位置为参考基础，而建立出的目录路径。

                下一级路径为/

                上一级路径为.. /

                再上一级路径为../../，依次类推

                同一级路径直接写文件名即可

• 绝对路径：是指目录下的绝对位置，直接到达目录位置，通常是从盘符开始的路径

<a>超链接标签

有两个属性

• href:用于指定链接目标的url地址，这是必须属性
• target: 用于指定链接页面的打开方式，默认为_self即在当前页面打开，_blank意为在新页面中打开

其中href中的链接又可分为如下几种方式：

外部链接	如<a href="http://www.baidu.com">百度</a>
内部链接	网站内部页面之间的相互链接，直接写内部网页名即可，如<a href="indx.html">首页</a>
空连接	用于设置无明确链接目标的链接<a href="#">看这里</a>
下载链接	把下载内容的地址放到href属性值即可，这样点击即可下载文件
锚点链接	即点击链接，就可以快速定位到页面中的指定位置； 在链接文本的href属性中，设置属性值为#名字的形式，如<a href="#two">第二集</a> 找到链接到的目标位置标签，在里面添加id=名字，如<h2 id="two">第二集</h2>
网页元素链接	在网页中，文本、图片、表格、音频、视频都可以添加超链接

特殊字符

空格符：&nbsp      大于号：&gt       小于号：&lt

<table>表格标签

表格主要用于显示、展示数据。

<table>
<tr>    ----tr  表格中的行
    <td>  ----td 表格中的单元格
    </td>
</tr>
</table>

表头：th 位于表格的第一行或第一列，表头单元格里面的文本内容加粗居中显示，注意，表头也是表格中的单元格。

合并单元格：

• 方式：

            跨行合并：通过在要合并的最上侧单元格设置rowspan="合并单元格的个数"

            跨列合并：通过在要合并的最左侧单元格设置colspan="合并单元格的个数"

记住，要删掉不用被合并过的单元格的代码哦~如第二行的第一列和第二行的第二列合并，即跨列合并，则合并后，要删掉之前写的第二列的单元格代码，因为已经不存在单独的第二列了~

<ul>、<ol>、<dl>列表标签

<ul>无序标签，列表项使用<li>定义

<ol>有序标签，标签项使用<li>定义

<dl>自定义标签，标签会与<dt>（定义项目/名字）和<dd>（描述每一个项目/名字）一起使用。

<dl>
    <dt>名词</dt>
    <dd>名词解释1</dt>
    <dd>名词解释2</dd>
</dl>

通常是一个<dt>对应多个<dd>，适用于如下场景

表单标签

一个完整的表单通常由表单域、表单控件(又称表单元素)和提示信息3部分组成

表单域是包含表单元素的区域，用<form>定义，用来实现用户信息的收集和传递

有三个属性：

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

表单元素通常包括input输入表单元素、select下拉表单元素、textarea文本域元素

• input表单元素

属性	属性值	描述
type	button/checkbox/file/hidden/image等	用来指定不同的控件类型
name	用户自定义	用于定义input元素的名称
value	用户自定义	用于规定input元素的默认值
checked	checked	用于规定次input元素首次加载时应当被选中
maxlength	正整数	用于规定输入字段中的字符的最大长度

ps：name和value是每个表单元素都有的属性值，主要是给后台人员使用

name表单元素的名字，要求单选按钮和复选框要有相同的name值，保证选一个或多个。

type属性的属性值如下：

属性值	描述
button	定义可点击按钮
checkbox	定义复选框
file	定义输入字段和“浏览”按钮，供文件上传
hidden	定义隐藏的输入字段
image	定义图像形式的提交按钮
radio	定义单选按钮
reset	定义重置按钮。重置按钮会清除表单中的所有数据
submit	定义提交按钮。提交按钮会把表单数据发送到服务器
text	定义单行的输入字段，用户可在其中输入文本，默认宽度为20个字符
passward	定义密码字段，该字段中的字符被掩码

•  select表单元素

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

• <textarea>表单元素

用于定义多行文本输入的空间，常用于留言板，评论等。利用rows/cols属性来设置文本大小。