web 0基础第一节 文本标签
这是一个html文件的基本结构
在vs code 中使用英文的 ! 可快捷设置这样的结构
<!-- --> 是在html写注释的结构
<!DOCTYPE html> <!--标识当前文档类型为html-->
<html> <!--html根节点/标签-->
<head> <!--头部 head 一般编写标题或者规定字符集或者引入其他的资源文件-->
<meta charset="usf-8">
<!--面试题：
meta 不在浏览器中显示内容，但是机器是可读的，为当前浏览器或者搜索引擎提供服务的-->
<title> world good programming</title>
<!--网页的标题，中间的是自定义的网页的标题名称-->
</head>
<body>
<!--主体 body 一般编写html代码，显示在浏览器的可视区-->
<!--
1.常用快捷键
>.ctrl + s 保存 敲完代码后要多按
>.ctrl + x 剪切
>.ctrl + c 复制
>.ctrl + v 粘贴
>.Alt +B vs code 运行的快捷键 这个是需要下载vscode的时候就设置好
>.ctrl + / 将该行的内容形成注释 也可以单独写一个注释符号
>.shift + alt +下 复制整行到下一行 将下换成上箭头，效果是可以推导的
2.标签
>.格式：
1.>开闭标签 拥有开和闭两个标签
具备一个开标签（开始标签）<标签名>
闭标签（闭合标签/结束标签）</标签名>
<标签名 属性=值（可以为多个）> </标签名>
或
2.>自闭合标签 只具备一个开标签，没有闭标签
<标签名 属性=值（可以为多个）>
>.分类：
按照开闭分为：开闭标签，自闭合标签
按照是否换行分为：块级（会换行）标签 行内(大多数情况不会换行)标签
-->
<!-- 例如 -->
<div>hello</div>html
<span>hello</span>
html
<!-- 根据上面两种标签的运行结果上来看
div 会将其中的内容换行后才会进行下一步内容的呈现
span 则不会换行，导致 hello 和 html 在同一行-->
</body>
</html>
标题和段落
1.标题标签 ---块级标签
格式： <h1> </h1> 将其中的东西设置为一级标题 首尾换行 最多有6级标题
2.段落标签 ---块级标签
格式： <p> </p> 将其中的内容设置为一个段落 首尾换行
这个不用p1等来区分是第几段的问题
块级标签，这是一个标签的大类 特点是 在之前之后都换行 首尾换行
换行和水平线
1.换行 ---行内标签
格式：<br> 自闭合标签 换行是直接换到下一行 中间没有隔行
没有后面的那个关回来的形成闭合的标签 所以称为自闭合标签 如: <i> </i>
2.水平线标签 ---块级标签
格式：<hr> 自闭合标签 将下一行打上水平线
块级标签一般会把标签的内容进行隔行，首尾都隔，但换行没有
字体标签
现在先了解，因为在后续学习的CSS中可以很容易实现这些功能
下面给出一些实例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>字体标签</title>
<!-- 1.字体标签 仅了解，因为在后续学习的CSS中可以实现这些功能 -->
</head>
<body>
测试文字 -做对比用
<hr>
<!-- 1.加粗 b：样式为加粗 strong：在加粗的同时，在计算机里也强调其重要性，强调其语义 - 就是站在计算机的视角看 这个内容属于重要信息->
<b>测试文字</b>
<br>
<strong>测试文字</strong>
<!-- 2.斜体 i：样式 em：带有语义的斜体-->
<i>测试文字 </i>
<em>测试文字</em>
<!-- 3.删除线 -->
<s>测试文字</s>
<del>测试文字</del>
<!--4.双引号，表语义 -->
<q>测试文字</q>
<!-- 5.下划线 u：表样式， ins：表语义 -->
<u>测试文字</u>
<ins>测试文字</ins>
<!--6.上标和下标字体 标的符号是#-->
miaomiao<sup>#</sup>
miaomiao<sub>#</sub>
<!-- 7.大小号字体 -->
<big>测试文字</big>
<small>测试文字</small>
<!-- 8.预保留标签 --保留原有的书写换行空格等 就是将其中的内容按照原有的形式保留下来 -->
<pre>
春夜喜雨
杜甫（唐）
好雨知时节，当春乃发生。
随风潜入夜，润物细无声。
</pre>
<!-- 9.特殊字符
>.格式 &特殊字符表示内容；
>.常用总结如下：
空白符： ；
版权符：©； 呈现的形式是 @把其中的a换成了c
大于小于 <：>； -->
<hr>
username: miaomiao
©11s所有
<<三国演义>>
《三国演义》
</body>
</html>
<!-- 在标签中加上 title 属性 用于设置提示信息 ,在鼠标停留时的呈现出来-->
<!-- 特殊字符：
因为在html中无论打多少空格最终都只会识别一个，
所以在有多个空格的需求时，采用特殊字符来解决这个问题
如： 有几个这个符号就会多出多少个空格 -->
原文地址：https://blog.csdn.net/2301_80198453/article/details/142879519
免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！