目录
- 初始html –超文本标记语言
- 1.超文本:
- 2.标记语言:
- 3.标签
- 4.html基本框架
- 5.拓展插件
- 6.文字标签
- 7.转义字符
- 8.语义化与SEO
初始html –超文本标记语言
1.超文本:
- 比普通的文本更厉害。可以插入图片/音乐/视频/超链接,对立面的内容进行排版,样式设计
2.标记语言:
- 可以吧html当做是一快拼图,它的代码就是一块快碎片称为标签,我们要做的事情就是要把正确的标签
放在合适的位置就可以了(不需要考虑太多的逻辑)
什么样的是网页文件?网页文件的后缀是什么?
- 一个文件,它的内容为html代码,文件后缀为.html就是一个网页文件
3.标签
写在html里面的代码。用<>包裹
-
单标签;一般是作为功能标签,有特别的作用
<hr>–>分割线
<br>-->换行
-
双标签:一般是用来包裹/保存内容,显示东西,它一般是成双成对出现,需要闭合,结束标签里面有个/
-
<标签名>内容</标签名>
<h1>多喝热水</h1>
<h1>
多喝热水
</h1>
-
4.html基本框架
- 写代码时,更加推荐创建一个专门的项目文件夹来写代码
- 创建好html文件后,输入
!+回车 或者 html:5 就可以生成网页模版
- html 注释的语法:
<!--注释内容-->
- 快捷键:
ctrl+/
- 快捷键:
- 基本框架代码:
<html></html>
:是网页的基本组成,基本上所有东西都写在里面<head></head>:
头标签,里面的内容是一些网页说明,主要是给浏览器看的<body><!-- 身体标签,里面的内容是给用户看的,图片/文字-->
<!DOCTYPE html><!--doc文档type类型 文档类型为html,告诉你的电脑,这是一个网页文件-->
<html lang="en"><!--html标签,是网页的基本组成,网页内容都写在它里面-->
<head><!--头标签,里面的内容是一些网页说明,主要是给浏览器看的--><meta charset="UTF-8"><!-- meta标签,设置一些属性,设置字符编码为utf-8--><title>我喜欢你</title><!-- 标题标签,作为网页的标题-->
</head>
<body><!-- 身体标签,里面的内容是给客户看的,图片/文字--><h1>我喜欢你很久了</h1><p>我爱你</p><img src="https://img2023.cnblogs.com/blog/3493231/202408/3493231-20240804223117493-1660621093.png" alt="美女">
</body>
5.拓展插件
- vscode - ->开发插件:open in brower,HTML CSS SUPPORT
快捷键:ALT +B
- vscode删除一整行的快捷键:
ctrl+x 或者shift+del
6.文字标签
-
h标题标签
-
<h1>一级标题:网页里的老大,从规范里面来说,一个网页只能有一个一级标题 </h1><h2>二级标题:作用就是切分网页内容,作为目录标签,可以有多个 </h2> <h3>三级标题:分块内容标签 </h3> 以此类推 h标题只有h1~h6,常用h1~h3
-
-
p段落标签
-
<p>文本内容</p>
:用来放内容,用的比较多的文本标签,它会自动换行 -
<span>文本内容</span>
:它不会自动换行,也没有特别的样式属性,比较单纯,后续主要结合css一起使用 -
<br>-->换行
-
<hr>-->分割线
-
特殊文字标签
-
<b></b> &&<strong></strong>:加粗文本 标签
-
<i></i> &&<em></em>:文本斜体标签
-
<u></u> &&<ins></ins>:文本下划线标签
<!DOCTYPE html> <html lang="en"> <head><!--给服务器看的,浏览器看的,头部标签--><meta charset="UTF-8"><title>wb前端学习</title></head> <body><!--身体标签,里面的内容主要给用户看的-->啊,我没有套标签<!--不标准的,不推荐--><p>我有标签</p><br><!--换行--><p>我喜欢你很久了</p><hr><!--分割符--><h1>初始html –超文本标记语言</h1><h2>1.超文本</h2><p>比普通的文本更厉害。可以插入图片/音乐/视频/超链接,对立面的内容进行排版,样式设计</p><!-- 标题标签 --><h2>2.标记语言</h2><!-- 段落标签 --><p>可以吧html当做是一快拼图,它的代码就是一块快碎片称为标签,我们要做的事情就是要把正确的标签放在合适的位置就可以了(不需要考虑太多的逻辑)</p><!--p标签会自动换行,比较常用的一个文本标签--><hr><!-- 行内标签 --><span>写代码时,更加推荐创建一个专门的项目文件夹来写代码</span><!--一般结合css一起使用--><br><!--换行--><span>创建好html文件后,输入`!+回车 或者 html:5 就可以生成网页模版</span><p style="color: rgb(8, 247, 255);">特价98块钱</p><!--加颜色,这是全部都加了--><!-- 如果我们想只加数字上面 --><p>特价<span style="color: rgb(204, 0, 255);">98</span>块钱</p><!-- 特殊文字标签 --><!-- 加粗标签 --><b>特价98块钱</b><br><strong>特价98块钱</strong> <!--b标签和strong标签等价,不自带换行--><!-- 斜体标签 --> <br><i>我喜欢你很久了</i><br><em>我喜欢你</em> <!--em标签和i标签等价--><br><!-- 下划线标签 --><u>围城</u> <ins>羊驼</ins><!-- 又加粗又斜体且有下划线 --><br><strong><em><ins>我喜欢你很久了</ins></em></strong> <!--小于号--><span><</span><!-- 大于号 --><span>></span><!-- 空格 --><p> 我前面有几个空格</p><!-- 人民币 --><p>¥</p> </body> </html>
-
-
7.转义字符
在前端开发中,有的符号可能会产生歧义,让浏览器不好理解,所以一些特别的符号就用转义字符代替,比如 空格,普通的<和>
语法:
- < - -小于号 - -<;
- `> --大于号 --gt;
空格-- 
--人民币--¥
8.语义化与SEO
SEO- ->搜索引擎优化
优化网页内容,提高权重,让网页可以在搜索引擎里面排名更加靠前(提高
规范性,语义化,meta属性)
网站排名靠前的好处:
越靠前,浏览量,点击量更多–>用户量/流量更多
b标签:单纯的加粗文字不起强调作用;
strong标签:不仅起到加粗文字,还有强调作用;
- 有利于学习的网站:
程序员专区
C语言中文网:C语言程序设计门户网站(入门教程、编程软件) (biancheng.net)