HTML基础

最新推荐文章于 2023-02-23 15:05:21 发布

高考坐后排的边牧

最新推荐文章于 2023-02-23 15:05:21 发布

阅读量629

点赞数

分类专栏：前端文章标签： html 前端

本文链接：https://blog.csdn.net/weixin_44762483/article/details/126896141

版权

前端专栏收录该内容

7 篇文章 0 订阅

订阅专栏

HTML

前端的发展

网页开发，web开发、小程序

web指的就是网页开发

91年，出现了第一个网页，早期的网页用于方便看文档，传论文、学生研究。

Tim berners-lee Lee博士互联网之父

94年，PHP诞生，实现数据库交互和动态页面的模板引擎，为web2.0时代做了铺垫

lee博士，建立w3c，万维网联盟，主要制定前端的开发规则，包含HTML+CSS+JavaScript等等

web 1.0:页面是写死的，静态页面
web 2.0：数据动态渲染在页面上的，动态页面

95年，JavaScript诞生，只能实现动态交互，页面中动态动画效果

99年，ajax技术异步技术标志web2.0时代的到来

07年，第一部iPhone，标志互联网时代的到来

14年，H5版本发布

2020年，vue 3.0发布混合开发

前端学习的三部分：HTML（网页的骨架） CSS（网页的样式，用于美化网页） JavaScript（网页的动态效果）

vue、react等等框架

HTML

Hyper Text Markup Language 超文本标记语言

超文本：通过一系列的超链接将不同空间的资源连接起来形成了一个网状结构。超文本就是超媒体的概念，不仅仅包含了页面中纯文本，还包含图片、视频音频等等
标记：指的标签，一个超文本内容就需要一个标签进行连接

html特点

简单性：没有复杂逻辑结构，只需要学会标签的使用，合理进行搭配就可以构建网页
可扩展性：html 标签每种标签都有自己的用途，新增一个标签，新增一种用途
跨平台性：网页的运行环境是浏览器，只要系统中有浏览器，那么可以运行
通用性：网页写好后，可以相互进行嵌套，都可以在浏览器正常运行

HTML网页的文档结构

html用来描述网页
html文本包含了标签和文本

文档结构

<!DOCTYPE  html>
<html>
	<head>
		<meta charset="utf-8">
		<title>我的第一个网页</title>
	</head>
	<body>
		欢迎来到蜗牛学院
	</body>
</html>

<!DOCTYPE html>：代表网页的文档类型，申明浏览器解析网页的代码的解析规则，大小写均可
<html>:根标签，每个网页有且仅有一个

<head>:代表网页的头部，title代表网页的标题，内容会显示在窗口栏上，有利于seo优化；<meta charset="utf-8">：定义了文档的编码集

<!-- 定义网页的 关键字 可以作为搜索引擎收录，有利于seo优化 -->
<meta name="keywords" content="蜗牛学苑,蜗牛创想,IT培训,Java培训,Java开发,Java学习,Web培训,软件测试,成都IT培训,重庆IT培训,西安IT培训,it培训机构,Web,Web前端培训,自动化测试,软件测试培训,软件测试自学">
<!-- 定义网页的描述 -->
<meta name="description" content="【蜗牛学苑】高端IT人才培养，0基础0元入学，免积分试听，合同式保障就业，专家面授，项目驱动教学。专注Java全栈开发、软件测试、Web前端开发等课程方向，誓做IT培训界的一股清流。">

注意：meta可以定义网页的关键字和描述，有利于搜索引擎收录，有利于seo优化，不要轻易更改

<body>：代表网页的主体，body主要用于写网页的结构代码和内容

!DOCTYPE

h5:即可以使用严格模式，也可以使用混杂模式

<!DOCTYPE  html>

h4:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/strict.dtd">

xhtml

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

作用：
1. 申明文档类型
2. 申明html版本，告诉浏览器采用哪种版本的解析规则解析代码
3. 决定了浏览器的加载模式，决定了浏览器采用严格模式还是混杂模式来解析代码

浏览器的加载模式

严格模式（标准模式）：严格按照w3c的规则解析代码
混杂模式（兼容模式）：浏览器按照自己的规则来解析代码

doctype不写？

如果doctype不写，浏览器无法判断当前页面的html版本和dtd约束条件，所以采用兼容模式解析代码
doctype申明正确并且dtd约束条件正确，默认按照严格模式来解析代码

开发工具

webstorm

默认内置很多的插件，很多开发不用的插件也安装，导致电脑出现卡顿
Hbuilder

内置一部分插件，vue推荐使用工具，一边开发边浏览页面，启动比较慢
sublime
我原本用的是sublime，优雅地编程~也挺好的，但是换了vscode之后发现vscode更好用
Dreamweaver

更新太慢
记事本
vscode——目前市场比较主流的开发工具

微软开发的工具，不仅可以开发前端，还可以做后端开发，插件需要自己安装

插件安装

Chinese (Simplified) Language Pack for Visual Studio Code汉化
Auto Rename Tag自动将结尾标签进行更改
HTML CSS Support在html代码中支持css的提示
HTML Snippets：自动生成html代码，专门针对html代码格式
Image preview：在代码前预览图片的缩略图
IntelliSense for CSS class names in HTML：在html中提出css中class名
Live Server：将vscode作为一台服务器，让浏览器进行访问。实时更新数据
open in browser:可以将网页在不同的浏览器打开，需要更新页面中数据时需要刷新页面

常用的html标签

文本标签

用来组织网页中的文本，不同的文本可以使用不同的文本标签

标题标签h

h1~h6,用来组织标题文本

语法：

<!-- 标题标签 h1~h6 数字越大，字号越小，默认加粗。默认上下有间距 margin  独占一行-->
<!-- 其实所有的标签默认是没有样式，标签的样式会从浏览器默认的样式 -->
<!-- 好处：有利于搜索引擎收录，有利于seo优化 -->
<h1>h1标签</h1>
<h2>h2标签</h2>
<h3>h3标签</h3>
<h4>h4标签</h4>
<h5>h5标签</h5>
<h6>h6标签</h6>

数字越大，字体字号越小，文本内容加粗
独占一行，默认标签上下有间距margin

段落标签 p

用来组织文本段落，一个段落就是一个p标签
语法：
```
<p>
    文本
</p>
```
- p标签不能相互嵌套
- 默认上下有间距margin
- 独占一行

span标签

用来组织一些简短的文本或者提示性信息
语法：
```
<span>文本</span>
```
注意：可以同行显示

label标签

label标签提供了特殊用途，可以搭配表单元素一起使用，控制表单元素
语法：
```
<label>文本</label>
```
注意：可以同行显示

b/strong标签

用来进行文本加粗处理
语法：
```
<b>文本</b>
<strong>文本</strong>
```
- 推荐使用strong

i/em标签

用来进行文本斜体处理
语法：
```
<i>文本</i>
<em>文本</em>
```
- 推荐使用i标签

换行 br

用于换行，需要换几行就使用几个br标签
语法:
```
<br>
<br/>
```

分割线 hr

在页面上一条直线
语法：
```
<hr>
<hr/>
```

图片标签 img

用来连接图片

语法：

<img  src="需要连接的图片的路径"  title="图片加载成功时显示的文字"  alt="图片加载失败时显示解释说明的信息"  width="设置图片的宽度"  height="设置图片的高度" >

路径：是指目标文件的具体位置
- 绝对路径：指目标文件在目录下的具体位置
  
  在开发中，绝对路径是指以http或https开头的网络路径，或者磁盘盘符
- 相对路径：是指以某个文件为参考找到目标文件的路径
  
  在开发中，相对路径是以当前文件出发找到目标文件的位置
  
  返回上一级 …/ 返回多个上一级多个…/
注意：设置图片的宽度和高度时，如果只设置其中一个值，另一个值按照原图的比例进行等比例缩放；如果设置两个值，图片可能会被拉伸变形。

超链接 a

用于网页的跳转
语法：
```
<a href="连接需要跳转的网页的路径"  target="设置新网页的打开方式"></a>
```
- href：可以是本地路径，也可以是网络路径（必须包含http或https）——推荐使用相对路径
- target：设置网页打开方式
  - _self:默认值；当前窗口打开网页
  - _blank:新开窗口打开网页
注意：
- href=““或者href=”#”：代表刷新网页
- href=”#id名“:锚点，在a标签里面使用锚点，可以跳转到页面中一个指定位置（标签）
- id名是唯一，一个网页中不能出现同名的id
  - 命名规则：是以数字、字母、-和_构成，不能以数字开头，不能包含特殊符号

表格标签

用于制作网页上的表格

语法：

<table border="1" width="900px" height="" align="center" bgcolor="pink" cellspacing="10px" cellpadding="10px">
    <tr align="center" bgcolor="tomato">
        <td width="100px" height="50px">姓名</td>
        <td align="right">年龄</td>
        <td bgcolor="yellowgreen">性别</td>
        <td>爱好</td>
    </tr>
    <tr>
        <td>张三</td>
        <td>18</td>
        <td>男</td>
        <td>LOL</td>
    </tr>
    <tr>
        <td>李四</td>
        <td>16</td>
        <td>nv</td>
        <td>吃鸡</td>
    </tr>
</table>

border：设置表格的边框
align：设置对齐方式
- left 左对齐
- right 右对齐
- center 居中
- 注意：table标签设置align控制表格在页面中的对齐方式，tr和td设置align控制的是单元格中的内容在单元格中的对齐方式
bgcolor：设置背景颜色，优先级：td>tr>table
cellspacing:设置单元格与单元格之间的间距
cellpadding：设置单元格边框和内容之间的距离

注意：
1. th标签代表表头，默认会进行加粗，文本居中显示
2. 表格的基本结构，table里面只能放tr，tr里面只能放th或td
3. 表格是可以相互嵌套的，注意里面的表格需要放在外面表格的单元格之中，不能破坏外面表格结构

单元格合并

rowspan：跨行合并，垂直方向上进行合并
colspan：跨列合并，水平方向上进行合并

表单标签

登录注册等需要进行数据交互的标签

普通输入框

语法：

<input type="text" placeholder="文本框中显示的提示性信息"  value="设置文本框中默认值">

密码框

语法：
```
<input type="password">
```
- 输入的内容是不可见的

单选框

语法：

<input type="radio" name="sex" id="nan"> <label for="nan">男</label>
<input type="radio" name="sex" id="nv"> <label for="nv">女</label>

注意：
- 单选框需要设置相同的name值进行绑定
- label的特殊用法：通过for属性指定对应的表单元素的id名，可以通过点击label里面的内容控制对应的表单元素获取焦点

复选框

语法：

<input type="checkbox"> LOL
<input type="checkbox">c吃鸡

注意：单选和复选可以设置checked属性使标签默认选中

下拉列表

语法：

<select name="" id="">
    <option value="">身份证</option>
    <option value="">驾驶证</option>
    <option value="" selected>学生证</option>
</select>

注意：
- 下拉列表默认显示第一个选项，可以在option上设置selected属性控制默认显示的选项
- 默认下拉列表只能选中一个选项，可以在select标签上设置 multiple属性控制多选

文本域

语法

<textarea cols="一行可以显示几个字符 "  rows="文本域可以显示几行"></textarea>

通过rows和cols可以变相控制文本域宽高

按钮

语法：

<input type="button" value="普通按钮">
<input type="reset" value="重置按钮">
<input type="submit" value="提交按钮">
<button>按钮</button>
<button type="button">普通按钮</button>
<button type="reset">重置按钮</button>
<button type="submit">提交按钮</button>

推荐使用button按钮
注意：
- 重置和提交按钮需要配合form标签一起使用
- 直接使用button按钮，无type类型，具有提交功能

form标签

语法：
```
 <form action="sucess.html" method="post">
    
</form>
```
- action:设置提交数据的服务器地址
- method：设置提交数据的提交方式
  - get：从服务器获取数据，也可以提交数据，数据会显示在窗口地址栏
  - post：提交数据给服务器，数据不会显示在窗口的地址栏

列表标签

无序列表 ul

语法：

<ul>
    <li>选项一</li>
    <li>选项二</li>
    <li>选项三</li>
</ul>

注意：
- ul默认上下有16px的margin，有40px的padding-left
- ul标签里面只能放li标签
- ul、li标签默认独占一行
应用场景：导航、列表选项等等。

有序列表 ol

语法：

<ol>
    <li>选项一</li>
    <li>选项二</li>
    <li>选项三</li>
</ol>

注意：
- ol默认上下有16px的margin，有40px的padding-left
- ol标签里面只能放li标签
- ol、li标签默认独占一行
- 有序列表和无序列表可以相互嵌套

定义列表 dl

语法：

<dl>
    <dt>中国</dt>
    <dd>中华人民共和国</dd>
    <dt>汽水</dt>
    <dd>冒着泡泡的肥仔水</dd>
</dl>

dt:指定一个名词
dd：针对这个名词进行解释说明
dl、dt、dd独占一行

其他标签

div标签

可以看作是一个布局容器，在这个容器里面添加或组织网页的结构
没有任何样式，可以通过css来自己设置
独占一行

marquee

跑马灯，里面的内容从右边进入，滚动到左侧消失，无限循环播放

语法：

<marquee behavior="" direction="">公告:明天周五,不上晚自习</marquee>

框架标签 iframe

可以在网页中嵌套其他网页，可以是在线服务器的网页，也可以是本地服务器的网页

语法：

<iframe src="需要嵌套的网页的文件路径" frameborder="0" width="1000px" height="500px"></iframe>

注意：需要设置宽高，如果宽高不够，会产生滚动条，不赞成使用

删除线标签 del

语法：
```
<del>998</del>
```

带边框的标签

语法：

<fieldset>
    <!-- 设置边框上的标题 -->
    <legend>登录</legend>
    <form action="">
        用户名: <input type="text">
        密码: <input type="password">
    </form>
</fieldset>