HTML学习总结

最新推荐文章于 2022-11-01 16:21:33 发布
最新推荐文章于 2022-11-01 16:21:33 发布
阅读量172 收藏 2
点赞数 1
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_46056659/article/details/107586155
版权

前言

超文本标记语言（HyperText Markup Language，简称：HTML）是一种用于创建网页的标准标记语言。
HTML文档的后缀名是.html .htm

目录

HTML语法规范

1.标签关系
标签分为单标签和双标签
双标签可以分为包含关系和并列关系

  • 包含关系
<head>
        <title></title>
</head>
  • 并列关系
<head></head>
<body></body>

HTML基本结构标签

每个网页都会有一个基本的结构标签（也称骨架标签），页面的内容也是在基本标签上书写的

  • HTML标签
    页面中最大的标签（根标签）
<html></html>
  • 文档头部
    head标签中必须设置title标签
<head></head>
  • 文档的标题
    让页面拥有属于自己的网页标题
<title></title>
  • 文档的主体
    body里面包含基本的页面内容
<body></body>

总结如下：
在这里插入图片描述

开发工具

可以直接用txt编辑，也可以使用vscode

1.vscode使用
新建文件，保存为.html文件，再输入！，按下tab键即可生成页面骨架结构

2.插件安装
Chinese Language Pack for VS Code（中文简体语言包）
Open in browser（浏览器打开html文件）

3.<!DOCTYPE html> 文档类型声明标签，采用html15版本显示页面
<html lang= "en/>" 表示英文网址
<meta charset="UTF-8/>" 必须写，否则乱码

以上都是系统自动生成的，了解即可

HTML常用标签

1.标题标签 <h1>-<h6>

标题字体变粗，一级标题最重要，重要性依次递减，字号也依次变小，标题独占一行

<h1>我是一级标题</h1>
<h2>我是二级标题</h2>
<h3>我是三级标题</h3>
<h4>我是四级标题</h4>
<h5>我是五级标题</h5>
<h6>我是六级标题</h6>

我是一级标题

我是二级标题

我是三级标题

我是四级标题
我是五级标题
我是六级标题
2.段落和换行标签
  • 段落标签
<p>我是段落标签</p>
  • 换行标签
    强制换行
<br/>
3.格式化标签
<strong>加粗</strong>
<b>加粗</b>
<em>倾斜</em>
<i>倾斜</i>
<del>删除线</del>
<s>删除线</s>
<ins>下划线</ins>
<u>下划线</u>

加粗
加粗
倾斜
倾斜
删除线
删除线
下划线
下划线

4.<div>和<span>标签

<div>标签用来布局，每行只能放一个div，大盒子
<span>标签用来布局，一行可以有多个span，小盒子

5.图像标签（重点）

一个简单的实例：在这里插入图片描述
图像标签总结：在这里插入图片描述

6.路径
  • 相对路径
相对路径分类符号说明
同一级路径图像文件位于HTML文件同一级，如<img src="baidu.gif"/>
下一级路径/图像文件位于HTML文件下一级，如<img src="image/baidu.gif"/>
上一级路径../图像文件位于HTML文件上一级，如<img src="../baidu.gif"/>
  • 绝对路径
    例如，"E:\HTML\img\baidu.gif"或者完整的网络地址
7.链接标签

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

属性作用
href用于指定链接目标的url地址
target用于指定链接页面的打开方式，_self为默认值（在当前页面打开），_blank为在新窗口打开

  • 外部链接
    例子：<a href="http://www.baidu.com" target="_blank">百度 </a>

  • 内部链接
    不用打http
    例子：<a href="index.html">首页</a>

  • 空链接
    例子：<a href ="#">首页</a>

  • 下载链接
    如果href里面地址是一个文件(.exe)或者压缩包(.zip)，会下载这个文件
    例子：<a href="index.zip">文件</a>

  • 网页元素链接
    网页中各种元素，如文本，图像，表格，音频，视频都可以添加超链接
    例子：<a href="http://www.baidu.com" target="_blank"><img src="image.jpg"></a>

  • 锚点链接
    锚点链接可以快速定位到页面的某个位置
    在链接文本的href属性中设置属性值为#名字的形式，如<a href="#live">生活经历</a>；找到目标位置标签，添加id属性=刚才的名字，如：<h3 id="live">生活经历</h3>

8.表格标签

1.表格主要用于显示和展示数据，不是用来布局页面的。
格式：

<table>
    <tr>
        <th>表头单元格的文字</th>
        <td>单元格内的文字</td>
    </tr>
</table>
  • <table></table>是用于定义表格的标签
  • <tr></tr>标签用于定义表格中的行，必须嵌套在<table></table>标签中
  • <th></th>标签用于定义表头单元格，表头单元格里面的文本内容加粗居中显示
  • <td></td> 用于定义表格的单元格，必须嵌套在<tr></tr>标签中

2.表格属性

属性名属性值描述
alignleft、center、right规定表格相对周围元素的对齐方式
border1或" "规定表格单元是否拥有边框，默认为""，表示没有边框
cellpadding像素值规定单元边沿与其内容之间的空白，默认1像素
cellspacing像素值规定单元格之间的空白，默认2像素
width像素值或百分比规定表格的宽度
height像素值或百分比规定表格的高度

3.表格的结构标签
我们为了让代码更清晰，会用到结构标签

  • <thead></thead>：用于定义表格的头部
  • <tbody></tbody>：用于定义表格的主体

例子：

<table>
    <thead>
        <th>...</th>
    </thead>
    <tbody>
        <tr>...</tr>
    </tbody>
</table>

4.合并单元格

  • 跨行合并
    rowspan="合并单元格的个数"
  • 跨列合并
    colspan="合并单元格的个数"

找到目标单元格（跨行合并是最上面单元格，跨列合并是最左边单元格），写上合并方式 = 合并单元格的数量，例如：<td colspan = "2"></td>，最后删除多余单元格

9.列表标签

列表用来布局，列表可以分为三大类：无序列表，有序列表和自定义列表

1.无序列表

<ul>
    <li>无序列表项1</li>
    <li>无序列表项2</li>
    <li>无序列表项3</li>
    ...
</ul>

无序列表

Ps：<ul></ul>中只能嵌套<li></li>，其他标签不被允许

2.有序列表

<ol>
    <li>有序列表项1</li>
    <li>有序列表项2</li>
    <li>有序列表项3</li>
    ...
</ol>

有序列表

Ps：和无序列表一样，<ol></ol>中只能嵌套<li></li>，其他标签不被允许

3.自定义列表

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

自定义列表

Ps：<dl></dl>里面只能包含<dt>和<dd>

10.表单标签

1.<input>表单元素

  • 表单元素中<input>标签用于收集用户信息

    <input type="属性值" />

    <input/>标签为单标签

  • type属性的属性值及其描述

属性值描述
button定义可点击按钮
checkbox定义复选框
file定义输入字段和“浏览”按钮，供文件上传
hidden定义隐藏的输入字段
image定义图像形式的提交按钮
password定义密码字段，该字段字符被掩码
radio定义单选按钮
reset定义重置按钮，清除表单中所有数据
submit定义提交按钮，将表单数据发送到服务器
text定义单行输入字段，用户可在其中输入文本，默认宽度为20个字符
  • input其他属性
属性属性值描述
name用户自定义定义input元素名称
value用户自定义规定input元素的值
checkedchecked规定此input元素首次加载时应当被选中
maxlength正整数规定输入字段中的字符的最大长度

2.<label>标签
<label>标签用于绑定一个表单元素，当点击<label>标签内的文本是，浏览器就会自动将焦点（光标）转到或者选择对应的表单元素上，用来增加用户体验

语法规范

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

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

3.<select>表单元素
如果有多个选项，可以使用<select>标签

语法规范

<select>
    <option>选项1</option>
    <option>选项2</option>
    <option>选项3</option>
</select>

ps：在<select>中定义selected=“selected”时，当前项即为默认选中项，如：<option selected>广东</option>

4.<textarea>表单元素

语法规范：

<textarea rows="3" cols="20">
    文本内容
</textarea>

通过<textarea>标签可以轻松地创建多行文本输入框
cols=“每行中的字符数”，rows=“显示的行数”

HTML中的注释和特殊字符

1.注释标签
代码不执行不显示，只是为了方便阅读和理解
格式：<!-- 注释语句 --> 快捷键：ctrl + /

2.特殊字符
在这里插入图片描述

结语

花了三天学了html，总结一下后开始学css啦，感谢b站的pink老师！真的教的很棒！

如有侵权，请联系作者删除

Crayonccc
关注
  • 1
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
HTML学习内容总结
qq_48681023的博客
07-10 2159
HTML学习总结
HTML总结
qq_40501067的博客
07-23 1354
语法。
一个后端人员的前端笔记之HTML
qq_34800986的博客
09-29 1153
HTML 简介 1:网页 1.1什么是网页 网站是指在因特网上根据一定的规则，使用 HTML 等制作的用于展示特定内容相关的网页集合。网页是网站中的一“页”，通常是 HTML 格式的文件，它要通过浏览器来阅读。网页是构成网站的基本元素，它通常由图片、链接、文字、声音、视频等元素组成。通常我们看到的网页，常见以 .htm 或 .html 后缀结尾的文件，因此将其俗称为 HTML 文件。 1.2 什么是 HTML HTML 指的是超文本标记语言 (Hyper Text Markup Language) ，它是用
HTML总结【详细】
CYL_2021的博客
03-18 2125
什么是HTML？ HTML 是 HyperText Markup Language（超文本标记语言）的缩写，它是用于创建网页 的标准标记语言。HTML 使用标记标签来描述网页，由浏览器来解析，即使用 HTML 来建 立 Web 站点，通过 Web 浏览器读取 HTML 文档，并以网页的形式显示出来。 一.网页.html页面主要内容 <!-- 文档类型声明，作用就是告诉浏览器使用那种HTML版本来显示网页，下面是HTML5 --> <!DOCTYPE html> 用来定义当前文档.
学习HTML的知识点总结
最新发布
Zrf2191318455的博客
11-01 2743
学习html一段时间，在视频中结合自己设备和理解写出了关于html的一些知识点
HTML 学习总结2 框架 表单
01-08
这是HTML学习总结系列的第二篇，第一篇在这里： HTML 学习总结1入门 基本概念、格式 文字标签 图片标签 链接标签 表格标签 注释 这次的学习内容相较第一次分类少，但是比较杂。 框架集标签 框架标签是将网页设置成...
HTML学习总结（6）
06-14
HTML学习总结HTML学习总结HTML学习总结HTML学习总结HTML学习总结HTML学习总结HTML学习总结HTML学习总结HTML学习总结
html学习记录总结
01-04
个人html学习记录
HTML基础知识总结
ss810540895的博客
05-05 8134
是告诉浏览器这是html文档的开始。Html文档的最后一个标签是之间的文本是头部信息，在之间的文本是文档标题，会显示在浏览器的窗口的标题栏。设置网页编码的语句为，是在
html总结与理解，自己的心得
chen983234416的博客
11-14 9153
    首先什么是html，它用来做什么，他有什么用 html是个缩写，全名为HyperText  Markup Language，中文名字叫做，超文本链接语言，是用来做静态网页的，也是做动态网页的基础，作用的话就是做个标记，用来让浏览器解析，最后显示出页面。     接下来我解释下什么叫做超文本，什么叫做标记，什么叫做语言，什么叫做静态网页，动态网页，什么是浏览器解析标记 1、超文本：顾名...
学习html的心得总结
热门推荐
FLV123的博客
04-19 1万+
经过这几天的学习，已经基本掌握制作静态网站的方法。第一节，老师让我们明白什么是html，为什么要学，该如何学习的三个问题给予我们回答。首先，什么是HTML，html是一种超文本语言，html属于前端技术，学好前端技术也有利于我们就业，但是前端技术，是垂直居中设置入门容易，精通难，需要下非常的功夫，才能学好这门技能。那如何学好html，一，学会翻看参考手册，了解有些属性。如（runoob.com）二
HTML的学习心得
weixin_47223561的博客
03-30 4375
HTML一、HTML简介二、HTML文档结构二、使用步骤1.引入库2.读入数据总结 经过这段时间对HTML的学习，深刻了解了网页的结构和组成以及对网页界面构成的代码有了一定的认识基础，从之前对网页制造的白板认识，到现在能看懂网页代码的大致意思。这让我有了很多收获。 一、HTML简介 （1）超文本标记语言（英语：HyperText Markup Language，简称：HTML）是一种用于创建网页的标准标记语言。 （2）HTML 不是一种编程语言，而是一种标记语言 （3）标记语言是一套标记标签 (marku
html总结
XYX153的博客
07-26 774
层叠样式表，用来设置标签的显示效果样式写在head标签里的style标签中，class对应的样式名称以.开头，样式写在大括号中，每一个样式格式如下样式属性样式值;一个样式名中可以写多行样式标签中使用样式，给标签添加class属性，class属性的值就是style中定义的样式名称（不包含.）上划线，下划线，删除线/*下划线，相当于ins标签*/underline;*//*上划线*/overline;*//*删除线，相当于del标签。...
HTML常用标签总结
03-09
经过一段时间的学习，对于HTML也有了基础的认识。在网页基本结构中，一个HTML网页最基本由网页头...希望通过对HTML常用标签的总结和学习，能够帮助大家更好地理解和应用HTML标签，为日后的网页开发工作打下坚实的基础。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值