HTML——基本标签和重要概念

在这里将不定期的发一些文章来记录自己学习前端的一些心得和知识点。希望能够和大家分享交流。

一：先总结一些重要的概念和作用：

服务器：提供计算服务的计算机（提供网站访问功能的计算机）。
客户端：连接到服务器，代理服务器提供功能的软件(如QQ客户端、微信)。
浏览器：访问网站的显示网页的客户端。

浏览器软件：谷歌：Chrome 火狐：FireFox 微软：IE6~IE11、Edge。

编译软件：webstorm, sublime等其他一系列。

前端开发语言 -- 编写网页使用的语言：HTML 主要是负责结构，相当于毛坯房。

CSS 主要是负责表示，相当于简装。

JS 主要是负责功能，相当于家电器。

HTML --> Hyper Text Markup Language(超文本标签语言)
标准版本：HTML4.01 HTML5
标准制定者：W3C
超文本 --> 普通文本(由文字构成的文件)/超文本(图片、视频、音频、超链接、游戏、软件)。
标签语言 --> 由标签/标记构成语言。

二：1.标签基本书写：

用<>符号将英文关键字包起来。成对标签由开始标签和结束标签组成。结束标签比开始标签多一个/符号。

2.标签属性书写：

<关键字属性名="属性值"></关键字>
<关键字属性名="属性值" />

三：标签功能：

在页面上是不显示的，指示浏览器如何显示标签里面的内容。

四：页面基本套路：

<html><head><title>你好</title></head><body>Hello World</body>
</html>

注意事项：

1. 标签可以嵌套，但是只能包含嵌套，不能交叉嵌套。
2. 关键字可以全部小写(<html>)，也可以全部大写(<HTML>)，也可以大小混合(<hTMl>)，但是通常使用全部小写。

3. html/head/body三个标签是可以省略的，通常，这三个标签必须写。

五：常用标签属性总结：

1.结构标签：
head标签主要给浏览器提供信息
body标签主要负责在页面中显示内容

2.标题标签 <h1> </h1>------- <h6> </h6>
效果：字体加粗，上下有空白行。从h1到h6字体从大变小。
注意：在HTML如果使用没有定义的标签，标签会被忽略掉。

3.段落标签 <p> </p>
效果：文字在同一个段落中，上下有空白行。

注意：如果没有p标签，所有的文字默认在同一个段落中。

4.水平分割线 <hr/>

效果：增加一条水平线。
注意：hr是单标签。

5.无序列表 ul(unorder list) li (list item)
ul效果：单独产生一个段落。
li效果：在每个项目文字前加上了一个项目符号(小黑点)，并且每个项目前增加空白。

6.有序列表 ol(order list) li(list item)
ol效果：单独产生一个段落。
li 效果：在每个项目文字前加上了一个项目符号(序号)，并且每个项目前增加空白。
注意：li不要单独使用，需要与ul/ol成套使用。列表项目文本要放在li标签内部，不要在其他位置放置文本。
列表的嵌套：只需要把列表写在对应的li内部即可。如：

<ul><li>hhah</li><li>2222</li>
</ul>

无序列表嵌套时，项目符号会发生改变，从实心圆(disc)变成空心圆(circle)，最后变成实心方块(square)。

7.字体标签：<font> </font>

加属性可改变字体颜色(color)，大小(size)，字体类型(face)等。

 <font color ="颜色值">lalalala</font>

 <font size="大小值">hahaha</font><font face="字体">hengheng</font>

8. 加粗标签： < b> </b> <strong> </strong>
效果：字体加粗。
9.下划线标签： <u> </u>
效果：字体下划线。
10.斜体标签：<i> </i> <em> </em>
效果：字体斜体。

11.换行标签 <br/>

效果：在段落中增加回车。

12.文本预处理：<pre> </pre>

效果：可以显示标签中文本中的多个连续半角空格和回车换行。

13.水平线标签：<hr> </hr>

效果：可以在文本中加入一条水平线。

14.多媒体标签：图像/图片标签 <img/>
加属性 src="图片路径" alt="图片说明" title="图片标题"

例如：加一张澳大利亚国旗图片在网页中。

<html lang="en">
<head><meta charset="UTF-8"><title>练习</title>
</head>
<body><img src="./澳大利亚.jpg" alt="澳大利亚"/>
</body>
</html>

运行结果如下：

15.超链接标签 <a> </a>
添加属性：href="将要跳转到的网页路径"

target="_self/_blank"

（_blank：在新的页面中打开要跳转的网页 _self：在当前页面中打开要跳转的页面。）

文本超链接
<a href="网页路径">说明文字</a>

图片超链接
<a href="网页路径">
<img src="图片路径" />
</a>

邮件超链接
<a href="mailto:zhangsan@qq.com">我的邮箱</a>
超链接默认效果：说明文字自带下划线，初始颜色为蓝色，点击时颜色为红色，点击之后为紫色。

跳转到页面的开始部分。

锚效果：跳转到页面指定位置
例如：回到顶部
<a href="#">回到顶部</a>

16.table表格标签：<table> </table>
属性：border 边框宽度 width 表格宽度 height 表格高度 align="left/center/right" 表格整体水平(横向)对齐
bordercolor 边框颜色(非标准属性) cellpadding 单元格边框与内容之间的间距 cellspacing 单元格与单元格边框间距。

caption 表格标题标签
tr 行标签
align="left/center/right" 行内文本水平(横向)对齐
td 单元格标签
align="left/center/right" 单元格内文本水平(横向)对齐
th 表头单元格标签
默认效果：文本加粗居中。

单元格的合并：（1）跨行合并 rowspan;（2）跨列合并colspan;

17.表单标签< form> </form>
(1)表单元素标签：
输入框(默认为文本框) <input> </input>；按钮< button> </button>；

(2)表单一些常用属性：
如何使文本框变成密码框？给input标签加上type="password"属性。
如何使单选框/单选按钮实现单选功能？给同一组的单选框添加同名的name属性。

如何实现下拉列表的多选？给标签select添加multiple="multiple"属性。
如何改变下拉列表高度显示更多选项？给标签select添加size="10"属性。
如何使表单元素只读？给表单元素标签(input、textarea)添加readonly="readonly"属性。
如何使表单元素禁用？给表单元素标签(input、button、select、textarea)添加disabled="disabled"属性。

提交按钮的实现方式：
1. button添加属性type="submit"
2. <input type="submit"/>
重置按钮的实现方式：
1. button添加按钮type="reset"
2. <input type="reset"/>
普通按钮的实现方式：
1. button添加按钮type="button"
2. <input type="button"/>
图片按钮的实现方式：
1. <button><img src="图片路径"/></button>
2. <input type="image" src="图片路径"/>

初始值设置：
单选框初始值设置：添加属性checked="checked"
复选框初始值设置：添加属性checked="checked"
文本框初始值设置：添加属性value="任意文字"
下拉列表初始值设置：在对应的option标签添加属性selected="selected"
文本域初始值设置：在textarea标签内添加任意文字。

这基本就把HTML的基本标签和属性记录了，不足之处希加以斧正。

HTML——基本标签和重要概念相关推荐

＜table＞＜/table＞表格标签的基本概念和基本属性
学习目标: 掌握<table></table>的使用和基本属性学习内容: 标签是用来创建 HTML 表格的简单的 HTML 表格由 table 元素以及一个或多个 tr(定 ...
独家 | 手把手教你用Python构建你的第一个多标签图像分类模型（附案例）
翻译:吴金笛校对:郑滋本文约4600字,建议阅读12分钟. 本文明确了多标签图像分类的概念,并讲解了如何构建多标签图像分类模型. 介绍你正在处理图像数据吗?我们可以使用计算机视觉算法来做很多事情 ...
python如何训练模型生产_手把手教你用Python构建你的第一个多标签图像分类模型（附案例）...
你正在处理图像数据吗?我们可以使用计算机视觉算法来做很多事情: 对象检测图像分割图像翻译对象跟踪(实时),还有更多-- 这让我思考--如果一个图像中有多个对象类别,我们该怎么办?制作一个图像分类 ...
html2image api,图像标签_图像识别 Image_API参考_API_华为云
功能介绍图像标签服务准确识别自然图片中数百种场景.上千种通用物体及其属性.让智能相册管理.照片检索和分类.基于场景内容或者物体的广告推荐等功能更加直观.使用时用户发送待处理图片,返回图片标签内容及相 ...
全端开发——html简介与常用标签
1.html是什么? •超文本标记语言(Hypertext Markup Language,HTML)通过标签语言来标记要显示的网页中的各个部分.一套规则,浏览器认识的规则 •浏览器按顺序渲染网页文件 ...
基本概念—监督与非监督
原文作者:python猫娘原文地址:监督学习与非监督学习一.监督学习(supervised learning) 监督学习(supervised learning)的任务是学习一个模型,使模型能够 ...
（2）HTML基本标签
一.认识纯文本格式 1.什么是纯文本格式? 纯文本格式,就是没有任何文本修饰的,没有任何粗体,下划线,斜体,图形,符号或特殊字符及特殊打印格式的文本,只保存文本,不保存其格式设置. 2.纯文本格式和富 ...
前端基础----html初识、常用标签
一.HTML初识 web服务本质 import socketdef main():sock = socket.socket(socket.AF_INET, socket.SOCK_STREAM)soc ...
【标签画像系列】标签体系建设方法论
5月11日录制了袋鼠云数栈全新数据中台精讲系列 --「数智赋能实战六讲」的第一场直播,主要对标签体系的建设进行了抽象,分成几个步骤,方便大家理解. 你能看到 ▫ 数字营销是数字化转型排头兵 ▫ 标签体 ...

HTML——基本标签和重要概念

HTML——基本标签和重要概念相关推荐

最新文章

热门文章