HTML入门

小C不掉发

于 2022-01-14 23:56:18 发布

阅读量554

点赞数 3

分类专栏：前端学习 python学习文章标签：前端 css css3 html

本文链接：https://blog.csdn.net/qq_54838334/article/details/122504516

版权

python学习同时被 2 个专栏收录

6 篇文章 2 订阅

订阅专栏

前端学习

1 篇文章 0 订阅

订阅专栏

web前端

前端开发也叫web前端开发，它指的是基于web的互联网产品的页面(也可叫做界面)开发及功能开发。

1.认识HTML

HTML是Hyper Text Markup Language（超文本标记语言）的缩写，是构成web页面的基本元素，是一种规范，一种标准。

HTML不是一种编程语言，而是一种描述性语言，通过标识符来标识网页中内容的显示方式，例如图片的显示尺寸、文字的大小、颜色、字体等。

浏览器能够对这些标记进行解释，按照要修显示出文字、图像、动画、媒体等网页内容。

HTML5是HTML的一个版面，该版本新增与优化了很多内容。现如今，几乎所有世面流行的浏览器都能很好的支持HTML5。

2.网页基础知识

2.1 HTML模板的基本含义

<!DOCTYPE html> <!--规定了浏览器文档使用哪种规范，以前需要在后面写上很长一串规范地址，现
今HTML5规范无须额外指定-->
<html lang="zh-cn"> <!--所有网页最大的结构 网页中所有的标签存放在html标签中-->
<head> <!--网页的头部 告诉浏览器一些相关的信息-->
<meta charset="UTF-8"> <!--表示网页编码格式 推荐UTF-8国际编码，常用的还有
gbk国标-->
<title>Title</title> <!--网页标题-->
</head>
<body> <!--网页的主体 我们所看的网页结构 都是在body中的-->
</body>
</html>

2.2 标签知识

由<>包裹的关键词称为标签
标签分为单标签和双标签
<> 之间除了标签名外，还可以有属性="值" 的各种属性设置

2.3 HTML的lang属性

lang 放在<html lang="en"></html>中
主要用于决定浏览器是否自动弹出翻译框
常用的值：en 代表英文网页，不管你写的内容是否是英文，打开该网页，浏览器都会弹出提示翻译框
常用值zh-cn 代表网页是一个中文网页，浏览器打开该网页，不会弹出翻译提示框

2.4 结构与样式

结构：body中书写的内容会展示在浏览器可视区中，每个标签都有默认的样式
样式：通过编写css代码可以改变各个内容的样式

2.5 前端代码书写规范

标签、属性名以及相关符号均在英文半角状态下的小写
id、class必须以字母开头
所有双标签必须闭合
根据层次结构对标签进行tab缩进
属性值必须带引号，单双引号都可以

3.认识标签

3.1 块级标签

div标签

div 标签用于将文档划分为独立的、不同的部分，从而构成一个完整的网页。网页的主体骨架一般由div 搭建，每一个单独的div模块中也可继续搭建局部的div骨架。

H系列标签

h1~h6标签用于标识网页内容的标题，标签中的文字会默认出现不同程度的加粗与增大。

在一个网页中h1 标签最好是有且仅有一个，这样有利于SEO优化，其他h标签可以根据需要出现多次。

p标签

p标签中通常用来放置一段文字。

注意：p标签中不可以放div 标签（任意块标签），这样会导致在浏览器中p标签被分成两个

ul 标签

ul 标签用于展示无序的列表内容，规范上，其子标签必须是li

<!--举例：展示新闻信息-->
<ul>
<li>今日全省气温高达37.5摄氏度</li>
<li>EDG战队获得全球总决赛冠军</li>
<li>你好皮卡丘</li>
<li>你好唐老鸭</li>
</ul>

ul 列表前默认有实心原点符号，可以通过修改type 属性来改变这个符号。但是更推荐通过CSS来对其进行修改，这样更符合结构与样式分离的理念。

语法：<ul type="value">

属性值：

disc 实心圆(默认值)。

circle 空心圆。

square 实心方块

ol 标签

ol 标签用于展示有序的列表， **规范上，其子标签必须是li **

<ol>
<li>打开冰箱门</li>
<li>将大象放进冰箱</li>
<li>关上冰箱门</li>
</ol>

ol 列表前默认有实心原点符号，可以通过修改type 属性来改变这个符号。但是更推荐通过CSS来对其进行修改，这样更符合结构与样式分离的理念。

语法：<ol type="value">

属性值value：

值	描述
1	默认值，数字有序列表。1，2，3，4
a	按字母顺序排列的有序列表。a、b、c、d
A	按字母顺序排列的有序列表。A、B、C、D
i	罗马字母，小写。i，ii， iii，iv
I	罗马字母，大写。I，II，III，IV

3.2 行内标签

span 标签

span标签用于包裹文字，视觉上不会产生任何变化，但我们可以配合css添加特殊的样式，

例如：

<p>
    让span包裹的文字
    <span style="color:green">变绿色</span>
</p>

a 超链接标签

a 标签最常用于形成一个可点击的超链接:

<a href="https://www.baidu.com">点我跳转到百度</a>

通过target 属性可以指定打开链接的位置

语法：

<a href="https://www.baidu.com" target="_blank">点我跳转到百度</a>

值	描述
_blank	新标签页打开
_new	新标签页打开，但所有的new指挥打开一个新标签页
_self	默认，在当前标签页打开

img 标签

img 标签用于在网页中引入一张图片

<img
src="https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png">

src：指定图片路径
width/height：指定img显示的大小

b 标签、strong 标签

文字加粗，b标签仅为视觉上的加粗，strong标签还能够被搜索引擎检索

i 标签、em 标签

文字斜体，i 标签仅为视觉上的斜体，em 还能够被搜索引擎检索

br 标签

文本换行

hr 标签

横线分割

3.3 特殊字符

在HTML书写某些特殊字符的时候，可能会遇到问题，比如要在网页里面显示字符 <> ，就有可能和我们的标签冲突，所以有些特殊字符需要用对应代替的写法（字符实体）表示：

<> 用 < 和>代替
连续空格会被忽略，如果需要使用多个连续空格使用 代替

更多符号请参考：HTML 实体符号参考手册

4.表单

4.1 form标签

定义

form 标签是以恶搞用于存储单元素的区域；

form 知识一个大的区域，里面提供数据输入和采集的是很多表单控件元素完成的。

写法

<form action="地址" method="get" target="_blank">
    <!-- 各种表单控件元素 -->
</form>

属性	描述
action	表单提交时，往哪个地址提交
methon	表单提交数据的方式，一般有get和post两种
target	提交数据后，后端返回新页面在哪里打开，取值和 a 标签里的target一样
entype	设置编码格式

4.2 表单控件

表单控件的作用是采集用户的数据然后提交到后端，所以所有的控件必须有name及value属性，并且除了单选和多选之外，所有的控件name都不能相同。

input

input元素是单个标签，它的标签属性type 的不同，可以使它的意义不同：

<!-- case 1 : 单行文本输入框 value属性为输入的内容，所以可以不写 -->
<input type="text" name="名字" placeholder="这里可以写提示文字" />
<!-- case 2 : 单行密码输入框 value属性为输入的内容，所以可以不写 -->
<input type="password" name="名字" />
<!-- case 3 : 单选按钮，一组选项name必须相同，value必须不同（value值随便定义），一般需要后面写文字辅助选择 -->
<input type="radio" name="sex" value="男" />男
<input type="radio" name="sex" value="女" />女
<input type="radio" name="Country" value="0" />中国
<input type="radio" name="Country" value="1" />美国
<input type="radio" name="Country" value="2" />日本
<input type="radio" name="Country" value="3" />其他
<!-- case 4 : 多项选择 name建议相同，传值时是所有选中项的value集合 -->
<input type="checkbox" name="hobby" value="游戏" />游戏
<input type="checkbox" name="hobby" value="学习" />学习
<input type="checkbox" name="hobby" value="看剧" />看剧
<input type="checkbox" name="hobby" value="锻炼" />锻炼
<input type="checkbox" name="hobby" value="旅游" />旅游
<!-- case 5 : 重置按钮，点击重置所有表单中所有的控件，按钮文字默认"重置"，可以定义value
改变文字显示 -->
<input type="reset" />
<!-- case 6 : 空按钮，没有任何功能的空按钮，需要设置value值以供显示，一般用于js添加功能
事件 -->
<input type="button" value="按钮" /> <!--或者--> <button>按钮</button>
<!-- case 7 : 上传文件 -->
<input type="file" name="f" />
<!-- case 8 : 隐藏不显示的表单控件，用来传递附带的不需要向用户展示的信息 -->
<input type="button" name="hide" value="0" />
<!-- case 9 : 提交，点击之后提交该表单form的数据，默认value是"提交" -->
<input type="submit" />

css3新增 input

<input type="number" />
<!-- 数字输入框 min 数字的最小值 max 数字最大值 step倍数-->
<input type="range" />
<!-- 数字滑块 min 数字的最小值 max 数字最大值 step倍数-->
<input type="time" /> 时间
<input type="date" /> 年月日
<input type="month" /> 年月
<input type="week" /> 年周
<input type="color" /> 颜色

label

辅助input进行选择

当我们进行单选或者多选时，必须点击input本身才可以选择，因为后面的文字知识一个视觉的辅助作用。但当我们通过给文字加上label标签然后将文字和input关联起来，点击文字，也可进行勾选。

label的 for 属性与 input 的 id 属性对应，例如：

<input type="radio" name="sex" value="1" id="sex1" /><label for="sex1">男</label>
<input type="radio" name="sex" value="2" id="sex2" /><label for="sex2">女</label>

默认选中，禁止使用

默认选择：cheched 标签属性，单选或者多选时，可以指定初始默认已被选中的项。

禁止使用：disabled 标签属性。规定input禁止使用

下拉选框

select 和 option 配合实现下拉选框：

<!-- name规定给select value规定给option并且不能相同 -->
<select name="subject">
<option value="none">---请选择学科---</option>
<option value="1">语文</option>
<option value="2">数学</option>
<option value="3">英语</option>
<option value="4">生物</option>
<option value="5">物理</option>
<option value="6">化学</option>
<option value="0">体育</option>
</select>

标签属性	描述
size	设置给select，规定select下拉时最多能显示几个
selected	设置给option，规定默认显示哪几个option

表单控件分组

fieldset 和 legend 配合将多个表单控件根据需要分组；

fieldset 分组，legend 定义组标题

<form action="" medthod="" name="">
	<fieldset>
		<legend>注册信息</legend>
		用户名：<input type="text" name="user" />
		密 码：<input type="text" name="pwd" />
	</fieldset>
	<fieldset>
		<legend>个人信息</legend>
		姓名：<input type="text" name="name" />
		年龄：<input type="text" name="age" />
		性别：<input type="radio" name="sex" value="0" />男<input type="radio"
name="sex" value="1" />女
	</fieldset>
</form>

5.表格

table 标签定义一个表格，内部配合一些表格标签定义表格内容。

目前，使用table的情况比较少。

5.1 简单的表格

一般我们在使用表格时，需要用的标签有：table、tr、th、td

标签	描述
tr	定义表格的行，内容都是写在行里面
th	定义在行里面，字体会加粗，代表一列的标题
td	定义在行里面，代表每一项

<table>
	<tr>
		<th>学历</th>
		<th>职业</th>
		<th>薪酬</th>
	</tr>
	<tr>
		<td>大山</td>
		<td>大海</td>
		<td>沙漠</td>
	</tr>
	<tr>
		<td>男</td>
		<td>女</td>
		<td>男</td>
	</tr>
	<tr>
		<td>18</td>
		<td>20</td>
		<td>19</td>
	</tr>
</table>