【前端之旅】HTML 大总结

在这里插入图片描述

一名软件工程专业学生的前端之旅,记录自己对三件套(HTML、CSS、JavaScript)、Node.js、Vue、小程序开发(uniapp)以及各种UI组件库、前端框架的学习。

【前端之旅】Web基础与开发工具
【前端之旅】HTML 大总结

HTML 大总结

一、HTML基础结构标签 🔥 HTML骨架格式 HTML元素标签分类 文档类型声明 页面语言 lang 字符集 注释 二、HTML常用标签 🔥 1.标题标签 2.段落标签 3.换行标签与水平线标签 4.盒子标签 5.文本格式化标签 6.图像标签 7.路径问题 8.超链接标签与锚点链接 9.特殊字符 10.表格标签 表格属性 合并单元格 11.列表标签 12.表单标签 表单域 表单控件(表单元素) input输入表单元素 1、文本框与密码框 2、单选框和复选框 3、name和value属性 4、checked和maxlength 5、submit和reset 6、button和文件域 7、label select下拉表单元素 textarea文本域元素

一、HTML基础结构标签 🔥

HTML(Hyper Text Markup Language) 超文本标记语言

之所以叫做超文本标记语言,一是因为它可以加入各类图片、音频、视频等多媒体,二是它可以实现从一个文本文件跳转到另一个文本文件,而且借助互联网,它可以与世界各个主机的文件链接。

HTML骨架格式

<!-- 页面中最大的标签 根标签 -->
<html>
    <!-- 头部标签 -->
    <head>     
        <!-- 标题标签 -->
        <title></title> 
    </head>
    <!-- 文档的主体 -->
    <body>
    </body>
</html>

HTML元素标签分类

HTML标签是由尖括号包围的关键字,例如: <html>

常规标签(双标签):标签对中的第一个标签是开始标签,第二个标签是结束标签,例如<html> </html> 空元素(单标签):例如:<br>

文档类型声明

文档类型声明<!DOCTYPE html>会告诉浏览器按照HTML5标准解析页面。

<!DOCTYPE> 声明位于文档中的最前面的位置,处于 <html> 标签之前。 <!DOCTYPE> 不是一个 HTML 标签,它就是文档类型声明标签

页面语言 lang

<html > 中 lang 指定该html标签内容所用的语言

en 定义语言为英语 zh-CN 定义语言为中文

lang的作用

根据根据lang属性来设定不同语言的css样式,或者字体 告诉搜索引擎做精确的识别 让语法检查程序做语言识别 帮助翻译工具做识别 帮助网页阅读程序做识别

字符集

<head>标签内,可以通过<meta> 标签的 charset 属性来规定 HTML 文档应该使用哪种字符编码。

<meta charset = "UTF-8" /> charset 常用的值有::GB2312 、BIG5 、GBK 和 UTF-8,其中 UTF-8 也被称为万国码,基本包含了全世界所有国家需要用到的字符

注释

注释

注释快捷键为 ctrl + / 注释以 <!-- 开始,以--> 结束
<!--  注释语句	-->

二、HTML常用标签 🔥

排版标签 : 主要和CSS 搭配使用,显示网页结构的标签,是网页布局最常用的标签。

标题标签 <h> 段落标签 <p> 水平线标签 <hr/> 换行标签<br/> div 与span标签:没有语义,是我们用于网页布局的2个常用的盒子。

标签属性(行内式):我们使用HTML制作网页时,如果想让HTML标签提供更多的信息,可以使用HTML标签的属性加以设置。

<标签名 属性1="属性值1" 属性2="属性值2" > 内容 </标签名>

1.标题标签

<body>
    <h1> 一级标题</h1>
    <h2> 二级标题</h2>
    <h3> 三级标题</h3>
    <h4> 四级标题</h4>
    <h5> 五级标题</h5>
    <h6> 六级标题</h6>
</body>
标题标签下的文字会变的加粗,字号也会根据标签等级依次变大,并且一个标题独占一行。

2.段落标签

<p>
   这是一个段落。
</p>
写在一个段落标签里的文字,会根据浏览器窗口的大小进行自动换行,并且段落和段落之间保有空隙。

3.换行标签与水平线标签

<br/>
<hr/>
<br/>是个单标签,作用是进行换行,不会产生垂直的间距。 <hr/>自动生成一条100%宽的水平线。

4.盒子标签

<div></div> :一行只能放一个大盒子 <span></span> : 一行可以放多个小盒子
<div>这是一个div</div>
<span>这是一个span</span>

5.文本格式化标签

为文字设置粗体、斜体、下划线等效果

b和strong 文字以粗体显示

i和em 文字以斜体显示

s和del 文字以加删除线显示

u和ins 文字以加下划线显示

6.图像标签

<body>
   	<img src="" alt="" title="" />
</body>

src是<img>标签的必须属性,用来指定图像文件的路径与文件。

属性 属性值 说明
src 图片路径 必须属性
alt 文本 替换文本(当图片不能显示时候显示的文字)
title 文本 提示文本(鼠标放到图像上,显示的文字)

7.路径问题

在引入静态资源时(比如图片、音频等)需要通过文件路径进行引入,这里主要涉及到绝对路径与相对路径。

绝对路径:是指目录下的绝对位置,直接到达目标位置,通常是从盘符开始的路径。 相对路径:
相对路径分类 符号 说明
同一级路径 图形文件位于 HTML 文件同一级 如<img src="demo.png">
下一级路径 / 图形文件位于 HTML 文件下一级 如 <img src="images/demo.png">
上一级路径 …/ 图形文件位于 HTML 文件上一级 如 <img src="../demo.png">

8.超链接标签与锚点链接

超链接标签:点击触发后可以跳转对应链接或者下载相应资源。

<a href="跳转目标" target="目标窗口的弹出方式">文本或图像</a>
属性 作用
href (此项必填)用于填写指定链接目标的url地址,注意:如果 href 里面地址是一个文件或者压缩包,会下载这个文件。
target 用于填写指定连接页面的打开方式:_self为默认值,_blank为在新窗口中打开

锚点链接标签:点击链接,可以实现快速定位到页面中的某个位置。

在链接文本的href属性中,设置属性值为 #名字 找到目标位置标签,里面添加一个 id属性=刚才的名字
<a href = "#demo">点击一下,进入自我介绍</a>
<h3 id = "demo">自我介绍</h3>

9.特殊字符

HTML 原代码 显示结果 描述
&lt; < 小于号或显示标记
&gt; > 大于号或显示标记
&amp; & 可用于显示其它特殊字符
&quot; 引号
&reg; ® 已注册
&copy; © 版权
&trade; 商标
&ensp; 半个空白位
&emsp; 一个空白位
&nbsp; 不断行的空白

重点记住:空格、大于号、小于号 这三个,其余的使用的很少,如果需要使用回头查阅即可

10.表格标签

表格标签现在还是较为常用的一种标签,但不是用来布局,常见显示、展示表格式数据。因为它可以让数据显示的非常的规整,可读性非常好。特别是后台展示数据的时候表格运用是否熟练就显得很重要,一个清爽简约的表格能够把繁杂的数据表现得很有条理。

table 用来定义表格的标签 tr 用来定义表格中的行,必须嵌套在<table></table> 标签中 td 用来定义表格中的单元格,必须嵌套在<tr></tr> 标签中 th 用来定义表格中的表头,表头单元格里面的内容加粗居中显示
<body>
    <table>
        <tr>  <th>姓名</th>     <th>性别</th>    <th>年龄</th>        </tr>
        <tr>  <td>孙铭</td>     <td>男</td>     <td>18</td>          </tr>  
        <tr>  <td>孙不坚</td>     <td>男</td>     <td>18</td>          </tr>       
        <tr>  <td>sunming</td>     <td>男</td>     <td>18</td>          </tr>     
    </table>
</body>

代码效果:

image-20211019200508979

表格属性

表格标签的属性实际开发并不常用,后面样式基本都是通过CSS来设置的。

属性名 属性值 描述
align left center right 规定表格相对周围元素的对齐方式。
border 1或者’’ ‘’ 规定表格单元是否拥有边框,默认为" ",表示没有边框,1则表示有。
cellpadding 像素值 规定单元边沿与其内容之间的空白,默认1像素。
cellspacing 像素值 规定单元格之间的空白,默认2像素。
width 像素值或百分比 规定表格的宽度。
<table align=center  cellpadding="20" cellspacing="0" >
合并单元格
跨行合并:rowspan=“合并单元格的个数” 跨列合并:colspan="合并单元格的个数"

确定目标单元格(合并写代码)

跨行:最上面侧单元格为目标单元格,写合并代码 跨列:最左面侧单元格为目标单元格,写合并代码
 <table align=center  cellpadding="20" cellspacing="0" >
        <tr>
            <th colspan="5">个人简历</th>

        </tr>
        <tr>
            <th>姓名:</th>
            <th></th>
            <th>性别:</th>
            <th></th>
            <th rowspan="4">照片</th>
        </tr>
        <tr>
            <th>婚姻状况:</th>
            <th></th>
            <th>出生年月:</th>
            <th></th>
        </tr>
        <tr>
            <th>民族:</th>
            <th></th>
            <th>政治面貌:</th>
            <th></th>
        </tr>
        <tr>
            <th>身高:</th>
            <th></th>
            <th>学历:</th>
            <th></th>
        </tr>
    </table>

代码效果:

image-20211019194420824

11.列表标签

列表容器里面装载着结构,样式一致的文字或图表的一种形式叫列表。列表最大的特点就是整齐 、整洁、 有序,跟表格类似,但是它可组合自由度会更高。一般网站的底部链接部分就是用列表标签制作。

无序列表:<ul> 有序列表:<ol> 自定义列表:<dl>
标签名 定义 说明
<ul></ul> 无序列表 里面只能包含li,没有顺序,li里面可以包含任何标签。
<ol></ol> 有序列表 里面只能包含li,有顺序。
<dl></dl> 自定义列表 里面只能包含dt和dd,dt和dd里面可以放任何标签。
 <ul>
        <ul>hahaha</ul>
        <ul>hahaha</ul>
    </ul>
    <ol>
        <ul>xixixi</ul>
        <ul>xixixi</ul>
    </ol>
    <dl>
        <dt>关注我们</dt>
        <dd>新浪微博</dd>
        <dd>联系我们</dd>
    </dl>

代码效果:

image-20211019195531457

12.表单标签

一个完整的表单通常由表单域,表单控件(表单元素)和提示信息这3部分组成,表单目的是为了收集用户信息。

image-20211020155508311

如图世纪佳缘网站中注册界面中就存在表单,该表单目的是为了收集用户信息。

表单域

表单域是一个包含表单元素的区域

<form></from>标签用于定义表单域,会把它范围内的表单元素信息提交给服务器

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

GET 和 POST 的区别(后面学 ajax 后台交互的时候用得到)

GET在浏览器回退时是无害的,而POST会再次提交请求。 GET请求会被浏览器主动cache,而POST不会,除非手动设置。 GET请求只能进行url编码,而POST支持多种编码方式。 GET请求参数会被完整保留在浏览器历史记录里,而POST中的参数不会被保留。 GET请求大小一般是(1024字节),http协议并没有限制,而与服务器,操作系统有关,POST理论上来说没有大小限制,http协议规范也没有进行大小限制,但实际上post所能传递的数据量根据取决于服务器的设置和内存大小。 对参数的数据类型,GET只接受ASCII字符,而POST没有限制。 GET比POST更不安全,因为参数直接暴露在URL上,所以不能用来传递敏感信息。
表单控件(表单元素)

表单元素三大组:input 输入表单元素、select 下拉表单元素、textarea 文本域表单元素

input输入表单元素
input是个单标签,type 属性设置不同的属性用来指定不同的控件类型(文本字段、复选框、单选按钮、按钮等),type属性的属性值及描述如下:
属性值 描述
button 定义可点击按钮(多数情况下,用于通过JavaScript启动脚本)
checkbox 定义复选框
file 定义输入字段和"浏览"按钮,供文件上传。
hidden 定义隐藏的输入字段
image 定义图像形式的提交按钮
password 定义密码字段。该字段中的字符被掩码
radio 定义单选按钮
reset 定义重置按钮。重置按钮会清楚表单中的所有数据。
submit 定义提交按钮。提交按钮会把表单数据发送到服务器。
text 定义单行的输入字段,用户可在其中输入文本。默认宽度为 20 个字符。
除 type 属性外,<input> 标签还有很多其他很多属性,其常用属性如下:
属性 属性值 描述
name 由用户自定义 定义 input 元素的名称
value 由用户自定义 规定 input 元素的值
checked checked 规定此 input 元素首次加载时应当被选中
maxlength 正整数 规定输入字段中字符的最大长度
name 和 value 是每个表单元素都有的属性值,主要给后端人员使用。 name 是表单元素的名字,要求单选框和复选框要有相同的name值。 checked 属性主要针对于单选框和复选框,主要作用是一打开页面,就可以默认选中某个表单元素。
1、文本框与密码框
type 属性设置为 text 是文本框 type 属性设置为 password 是密码框
<body>
    <form>
        用户名:<input type="text"> <br/> 
        密码:<input type="password">
    </form>
</body>
2、单选框和复选框
type 属性设置为 radio 是单选框 type 属性设置为 checkbox 是复选框 name 是表单元素的名字,要求 单选框和复选框要有相同的name值
<form>
        用户名:<input type="text"> <br> 
        密码:<input type="password"> <br> 
        <!-- radio是单选框,可以多选一 -->
        性别:男<input type="radio"> 女 <input type="radio">
        <!-- checkbox是多选框,可以多选 -->
        爱好:吃饭<input type="checkbox">  睡觉<input type="checkbox">   打游戏<input type="checkbox"> 
</form>
3、name和value属性
name属性:当前input表单的名字,后台可以通过这个name属性找到这个表单,name的主要作用就是用于区别不同的表单。
<form>
        用户名:<input type="text" value="请输入用户名"> <br> 
        密码:<input type="password"> <br> 
        <!-- radio是单选框,可以多选一 -->
        <!-- name是表单元素的名字,这里的性别单选按钮必须有相同的名字name,才能实现多选一 -->
        性别:男<input type="radio" name="sex" value="男"> 女 <input type="radio" name="sex" value="女">
        <!-- checkbox是多选框,可以多选 -->
        爱好:吃饭<input type="checkbox" name="habby" value="吃饭">  睡觉<input type="checkbox" name="habby" value="睡觉">   打游戏<input type="checkbox" name="habby" value="打游戏"> 
</form>
4、checked和maxlength
单选按钮和复选框可以设置checked 属性 当页面打开时候就可以默认选中这个按钮 单选框只能给其中一个加checked,复选框可以多加
性别:男<input type="radio" name="sex" value="男" checked="checked"> 女 <input type="radio" name="sex" value="女">
5、submit和reset
type 属性设置为submit:提交按钮会把表单数据发送到服务器 ``type` 属性设置为reset:重置按钮会清除表单中的所有数据
6、button和文件域
type 属性设置为button:是一个按钮 type 属性设置为file:是一个文件域,可以上传文件
<input type="button" value="获取短信验证码"> <br>
    <!-- 文件域:上传文件使用的 -->
    上传头像:<input type="file">
7、label

label标签用于绑定一个表单元素,当点击标签内的文本时,浏览器就会自动将焦点(光标)转到表单元素上,用来增加用户体验

label标签的 for属性 应当与相关元素的id 属性相同

<label for="sex"> 男 </lable>
<input type="radio" name="sex"  />
select下拉表单元素
下拉表单元素 <select>中至少包含一对<option><option>中定义 selected=“selected” 时,当前项即为默认选中项。
<select>
       <option selected="selected">选项1</option>
       <option>选项2</option>
       <option>选项3</option>
       ...
</select>
textarea文本域元素
用于定义多行文本输入的控件
<textarea>
    文本内容
</textarea>
cols = “每行中的字符数”, rows = “显示的函数”,我们在实际开发中不会使用,都是用CSS来改变大小
来源url
栏目