(2)从零开始学前端(学习笔记)-JavaWeb-HTML-注释,标签,属性,特殊字符
本帖最后由 LHW 于 2022-3-23 11:21 编辑(2)从零开始学前端(学习笔记)-JavaWeb-HTML-注释,标签,属性,特殊字符
本人自学两年，想通过笔记来帮助一些刚入门的小白快速的了解前端知识，如果喜欢这个系列，可以点赞评论支持一下嘛，谢谢各位啦:$qqq
纯手打非复制，如有错误可以在评论区纠正，感谢支持{:1_893:}
--续借上集--
HTML的注释
1.什么是注释
注释是用于解释说明程序的
2.注释的格式
<!-- 注释的内容 -->
3.注释的特点
被注释掉的标签，不会被浏览器解析
图解
https://s1.ax1x.com/2022/03/23/qlYd7F.png
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>注释</title>
</head>
<body>
<!--这是注释的内容，不会被浏览器解析-->
<!-- 可以使用快捷键
添加行注释 ctrl + /
添加块注释 shift + alt + a
-->
<!--<h1>一级标题</h1>-->
<h2>二级标题</h2>
</body>
</html>
（注: 如果快捷键用的不习惯的话可以更改快捷键）
拓展知识
1.修改快捷键，我们首先要在设置中找到“键盘快捷方式”选项(快捷键：Ctrl+K Ctrl+S)
https://s1.ax1x.com/2022/03/23/qlYhAe.png
2.然后在输入框右边选中"录制键盘"(快捷键：Alt+K)
https://s1.ax1x.com/2022/03/23/qltQu6.md.png
3.在键盘中打出快捷键 Alt+shift+/ ，就会自动搜索到使用该快捷键的命令名称、绑定键、当和源（注意：如果快捷键输入完成之后无响应，请注意当键盘录制时候会有提示，请时刻处于此状态方可查询成功）
https://s1.ax1x.com/2022/03/23/qlNoOP.png
4.然后点击最左边的铅笔图标，在弹出的页面中输入想要更新的快捷键，过近一秒钟按下回车，即可更改成功！
https://s1.ax1x.com/2022/03/23/qlU2n0.png
（注：如果遇到"已有xxx条命令的按键绑定与此相同"，我们只需要点击，然后把其余不想要的快捷键删除，然后再次根据上面的方法重新绑定快捷键即可）
https://s1.ax1x.com/2022/03/23/qlaVUS.png
HTML的标签
1.标签的分类
开始和结束标签 <h1></h1><u></u>
自闭和标签 <br/> <hr/>
2.标签的嵌套
正确的嵌套格式： <h1><u>文本<u/><h1/>
错误的嵌套格式： <h1><u>文本</u></h1>
3.块状元素和行内元素
块级元素：在页面中以块状的形式展示，自己独占一行，后面的内容会自动换行。<p><hr><div>
行内元素：在页面中以行的形式展示，不会换行。<b><i><u><span>
4.div和span
<div>:是一个通用的内容容器，没有特殊语义。一般用来对其他元素进行分组，用于样式化相关的需求。
<span>:是一个通用的内容容器，没有特殊语义。一般被用来编制元素以达到某种样式。
<div>和<span>标签核心作用是布局页面。
图解
https://s1.ax1x.com/2022/03/23/qldGLt.png
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>标签</title>
</head>
<body>
<!--
标签分类
开始和结束标签
自闭和标签
-->
<h1>一级标题</h1>
<br/> <!-- 作用: 换行 -->
<hr/> <!-- 作用: 创建水平线 -->
<h2><u>二级标题</u></h2>
<!--块级元素和行内元素-->
<div>第一个div</div>
<div>第二个div</div>
<span>第一个span</span>
<span>第二个span</span>
</body>
</html>
HTML的属性
1.什么是属性
属性可以提供一些额外的信息，这些信息不会直接显示在内容中。但可以改变标签的样式或提供数据的使用
2.定义格式
属性名=属性值
3.属性的规范
同一个标签中属性的名称必须唯一
不区分大小写，建议使用小写
属性值可以使用单引号或双引号括起来，建议使用双引号
4.常用的属性
class：定义元素的类目，用来选择和访问特定的元素
id：定义元素的唯一标识，在整个文档中必须是唯一的
name：定义元素的名称，一般用于表单数据提交到服务器
value：定义在元素内显示的默认值，一般常用于表单标签中
style：定义元素的css样式
图解
https://s1.ax1x.com/2022/03/23/ql0HPO.png
<!DOCTYPE html><html lang="en">
<head>
<meta charset="UTF-8">
<title>属性</title>
</head>
<body>
<div class="cls">第一个div</div> <!-- class属性可以重名使用 -->
<div class="cls">第二个div</div>
<div id="d1">第三个div</div> <!-- id属性不可以重名使用 -->
<div id="d2">第四个div</div>
<div style="background-color: red">第五个div</div><!-- style属性可以修改当前标签的样式 -->
</body>
</html>
HTML的特殊字符
1.什么是特殊字符
在html中，像<>" ' 空格 & ... 都是特殊符号，他们是语法本身的一部分
2.常用特殊符号表示
https://s1.ax1x.com/2022/03/23/qlDe6H.png
图解
https://s1.ax1x.com/2022/03/23/qlDx4f.png
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>特殊字符</title>
</head>
<body>
本网站有 最终解释权 <br/> <!-- 空格不会被浏览器解析 -->
本网站有” “最终解释权 <!--是空格的等价字符，会被浏览器解析 -->
</body>
</html>
(注：因为字符同样也会被代码文字所解析，所以我在字符左右两边都加了双引号，若要复制粘贴此代码请去除双引号....)
总结
本文主要内容：HTML注释、HTML标签、HTML属性、HTML特殊字符，后续也会推出续集。希望大家能持续关注{:1_921:}
{:1_893:}谢谢大家能够看到这里，如果觉得对你有帮助的话，可以点赞评论支持一下嘛谢谢各位啦:loveliness:
我在论坛学编程系列 感谢楼主的分享 我也在自学，加油 不如直接撸VUE 哈哈 HTML CSS是前端必须学习掌握的！ 谢谢分享 感谢楼主的分享 <br><hr>打错了 zxl1227 发表于 2022-3-23 15:46
打错了
<br>和<br/>的区别就在于是否遵守W3C标准，W3C的意思是万维网联盟（World Wide Web Consortium），创建于1994年10月，是一个会员组织，它的工作是对web进行标准化--->W3C 致力于实现所有的用户都能够对 web 加以利用，W3C 同时与其他标准化组织协同工作。
W3C 扮演者一个会员组织的角色（----Microsoft，Apple，Sun Microsystems等---）
Web标准不是指一个标准，而是一系列的标准。网页主要有三部分组成： 结构，行为，表现，对应的标准也分三方面：结构化标准语言主要包括XHTML和XML，表现标准语言主要包括CSS，行为标准主要包括对象模型（如W3C DOM）、ECMAScript等。
<br><hr>本来是自闭和标签，但是现在浏览器都支持此类转换功能，将<br>转换为<br/>，这里写<br/>也是为了更好的兼容低版本浏览器，使得其可以编译成功不会报错，也是为了遵守W3C标准。:loveliness:
页:
[1]
2