AllinToyou

这个屌丝很懒，什么也没留下！

热门标签

前端基础之html

作者：AllinToyou | 2024-05-23 15:30:02

踩

前端基础之html

学习笔记：

学习视频链接：https://www.bilibili.com/video/BV14J4114768?p=62&spm_id_from=pageDriver

1、 HTML 的局限性：

说起 HTML，这其实是个非常单纯的家伙，他只关注内容的语义。
比如：

<h1>标题标签： 表明这是一个大标题
<p>段落标签： 表明这是一个段落，
<img>图片标签： 表明这儿有一个图片，
<a>链接标签： 表示此处有链接，可以从一个页面跳转到另一个页面
<br/>换行标签：break的缩写，打断，强制换行
1
2
3
4
5

2、第一个html :

<html>
	<head>
		<title>第一个html</title>
	</head>
	<body>
		键盘敲烂，工资过万
	</body>
</html>

1
2
3
4
5
6
7
8
9

3、文本格式化标签 :

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

4、 div和span:

<div>和<span>是没有语义的，他们就是一个盒子，用来装东西的

div是division的缩写，表示分割，分区
span表示跨度、跨距
特点
（1）div标签用来布局，一行只能放一个div。大盒子
（2）span标签用来布局，一行可以放多个span。小盒子

5、图像标签img:

图像标签的属性

属性	属性值	说明
src	图片路径	必须属性
alt	文本	替换文本，图像显示不出来时显示文字替换
title	文本	提示文本，鼠标放到图片上，显示的文字提示
width	像素	图像的宽度
height	像素	图像的高度
border	像素	图像的边框粗细

6、超链接标签a:

（1）a是anthor的缩写，意为：锚

<a href = "跳转目标" target = "目标窗口的弹出方式">文本或图像</a>
1

（2）两个属性的作用：

属性	作用
href	用于指定连接目标的url地址（必须属性），当为标签应用了href属性时，它就具有了超链接的功能
target	用于指定连接页面的打开方式，其中_self为默认值在当前窗口打开，_blank为在新窗口中打开

（3）在网页中的各种元素，文本、图像、表格、音频、视屏等都可以添加超链接
（4）锚点连接：点击连接，可以快速定位到页面中的某个位置

在链接文本的href属性中，设置属性值为"#hello",然后找到想到链接的div设置id =“hello”,即可实现快速定位
eg:点击定位实现

eg：<a href = "#hello">点击我</a>
 <div id ="hello"></div>
1
2

7、空格字符、小于\大于号字符 :

&nbsp;     &lt;    &gt;       
1

8、表格标签 table:

（1）表格是用来展示数据信息的
如图：一行三列的表格

<table>  //用于定义表格的标签
<thead>     //表示整个表头
	<tr>  //用于定义表格中的行
		<th>姓名</th>  //表格的表头部分，（table head）
		<th>性别</th>  //表格的表头部分，（table head）
	</tr>
</thead>
<tbody>
	<tr>
		<td>妲己</td>  //用于定义表格中的单元格（td指表格中的数据table data）
		<td>女</td>
	</tr>
</tbody>
</table>
1
2
3
4
5
6
7
8
9
10
11
12
13
14

如图所示：

姓名	性别
妲己	女

（2）表格属性（表格里面可以放任何元素，文字、链接、图片等）：

属性名	属性值	说明
align	left、center、right	表格的对齐方式
border	1或""	规定表格单元是否拥有边框，默认为"",表示没有边框
cellpadding	像素值	规定单元边沿与其内容之间的空白，默认为1像素
cellspacing	像素值	规定单元格之间的空白，默认为1像素
width	像素值或者百分比	规定表格的宽度

（3）合并单元格

跨行或跨列→找到目标单元格（写上合并方式）→删除多余的单元格

跨行合并（合并两行）

<td colspan = "2"></td>
1

跨列合并（合并两列）

<td rowspan = "2"></td>
1

9、列表标签ul、ol、dl:

（1）列表是用来布局的：列表的最大特点是整齐、有序（包括无序列表、有序列表、自定义列表）
（2）无序列表

<ul>                 //<ul></ul>标签中只能嵌套<li></li>
	<li>香蕉</li>    //<li>与</li>之间相当于一个容器，可以容纳所有元素
	<li>苹果</li>
	...
</ul>
1
2
3
4
5

如图所示：

香蕉
苹果

（3）有序列表

<ol>                 //<ol></ol>标签中只能嵌套<li></li>
	<li>香蕉</li>    //<li>与</li>之间相当于一个容器，可以容纳所有元素
	<li>苹果</li>
	...
</ol>
1
2
3
4
5

如图所示：
1、香蕉
2、苹果

（3）自定义列表

<dl>                 //<dl></dl>标签中只能嵌套<dt>和</dd>
	<dt>名词1</dt>    
	<dd>名词1解释1</dd>
	<dd>名词1解释2</dd>
	...
</dl>
1
2
3
4
5
6

如图所示：
帮助中心
账户管理
购物指南
订单操作

10、表单标签form:

（1）使用表单的目的是为了收集用户信息
一个完整的表单通常由三部分组成：表单域、表单控件和提示信息

表单域（包含表单元素的区域，form会把它范围内的表单元素信息提交给服务器）

常用属性：

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

表单控件（表单元素）
（1）input输入表单元素
（2）select下拉表单元素
（3）textarea文本域元素

input：

//<input/>是单标签
//type属性根据不同的属性值用于指定不同的控件类型
<input type = "属性值" />
1
2
3

（2）type属性：

属性值	说明
button	定义可点击按钮（多数情况下，用于通过JavaScript启动脚本）
checkbox	定义复选框
radio	定义单选按钮
reset	定义重置按钮，重置按钮会清除表单中的所有数据
password	定义密码字段
submit	定义提交按钮，提交按钮会把表单数据发送到服务器
text	定义单行的文本框，用户可在其中输入文本
image	定义图像形式的按钮
file	定义输入字段和浏览按钮，供文件上传
hidden	定义隐藏的输入字段

（3）除type属性之外的其它属性：

属性名	属性值	说明
name	用户自定义	定义input属性的名称
value	用户自定义	规定input元素的值，或提示应当输入信息
checked	checked	规定此input元素首次加载时应当被选中
maxlength	正整数	规定输入字段中的字符的最大长度
注意：
要求单选按钮和复选框要有相同的name值
checked属性主要针对与单选按钮和复选框，主要作用一打开页面，就可以默认选中某个表单元素

（4）label标签
用于绑定一个表单元素，当点击label标签内的文本是，浏览器会自动将光标转到对应的表单元素上，用来增加用户体验
eg：

<label for = "sex"></label>
<input type = "radio" name = "sex" id = "sex"/>
1
2

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

（5）下拉列表
select：

	<select>
        <option>1</option>
        <option>2</option>
        <option>3</option>
    </select>
1
2
3
4
5

在option中定义selected = "selected"时，当前项即为默认选中项
（6）文本框
textarea：

使用场景：留言板、评论（可定义多行文字输入）
属性：cols = “每行中的字符数”,rows = “显示的行数”

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/AllinToyou/article/detail/613411

前端基础之html

学习笔记：

1、 HTML 的局限性 ：

2、 第一个html :

3、 文本格式化标签 :

4、 div和span:

5、 图像标签img:

6、 超链接标签a:

7、 空格字符、小于\大于号字符 :

8、 表格标签 table:

9、 列表标签ul、ol、dl:

10、 表单标签form:

1、 HTML 的局限性：

2、第一个html :

3、文本格式化标签 :

5、图像标签img:

6、超链接标签a:

7、空格字符、小于\大于号字符 :

8、表格标签 table:

9、列表标签ul、ol、dl:

10、表单标签form: