关于html

最新推荐文章于 2021-12-08 16:45:47 发布

大白兔i

最新推荐文章于 2021-12-08 16:45:47 发布

阅读量135

点赞数

分类专栏：笔记文章标签： html

本文链接：https://blog.csdn.net/weixin_44956916/article/details/108418662

版权

笔记专栏收录该内容

13 篇文章 0 订阅

订阅专栏

一、VS的相关设置

1.设置

文件夹折叠：设置-功能-资源管理器，Compact Folders 把前面的对号去掉
文件图标-设置-文件图标主题-选择器（vscode自带2个，）
目录结构的缩进长度：点击小齿轮图标 -> 设置 -> 工作台 -> 外观 -> Tree:Indent 设置长度（数字越大缩进距离越大）
设置字体大小：点击小齿轮图标 -> 设置 -> 文本编辑器 -> 字体设置字体大小

二、html基础

2.1HTML代码的组成

文档声明
注释
HTML元素(标签)

2.2文档声明

<!doctype html>

告知浏览器使用标准模式解析页面

2.3注释

<!-- 注释-->
<!-- 
    注释
    我爱你
-->

注释：对代码进行说明（浏览器读取的时候，不会解析注释）

保存快捷键：ctrl+s

2.4HTML标签（元素）

特点：

每个html标签有不同的功能。
html标签有双标签也有单标签。
html标签具有属性，而且不同的HTML标签会具有不同的属性
HTML标签里面可以嵌套其他的HTML标签，也可以嵌套文本内容（双标签）
HTML的标签名和属性名不区分大小写的，建议小写

2.5如何掌握一个html标签

掌握该HTML标签的功能（语义）
掌握该标签是单标签还是双标签
掌握该标签具有哪些属性，以及属性的值怎么写

2.6结构标签

<!doctype html>
<!--作为整个元素的根标签-->>
<html>
    <!--页面头部-->
    <head>
        <!--页面的标签-->
        <title>我的美好生活</title>
        <!--设置字符及编码-->
        <meta charset="utf-8">   
    </head>
    <!--页面主体-->
    <body>
        
    </body>

</html>

标签名	语义	属性	单标签或双标签
html	页面的根源素		双标签
head	页面的头部设置页面的描述信息		双标签
body	页面主体页面中的内容都写在body中		双标签
title	设置页面标题，写在head标签中		双标签
meta	设置字符集编码，写在head标签的里面	charset:是一种字符集编码，一般建议utf-8	单标签

2.7格式排版标签

标签名	语义	单标签还是双标签
h1-h6	一级标题到6级标题	双标签
p	段落	双标签
hr	分隔符	单标签

lorem数字按tab占行（写了多少个数字就会有多少个单词）

一般设置宽度width，不设置height，怕失真（width和height设置一个即可）

2.8图片

标签名	语义	属性	双标签还是单标签
img	图片	src:值是图片的地址 width:设置图片的宽度，值是数字 height:设置图片的高度，值是数字	单标签

图片地址的规则：以写的html文件为中心，确定图片文件相对于html文件处在什么样的位置

2.9超链接标签

标签名	语义	属性	双标签还是单标签
a	超链接	href：设置超链接要跳转的目的地址	双

中间可以使文字，也可以是图片

2.10表单标签

标签名	语义	属性	双标签还是单标签
input	单行输入框	type：设置输入框的类型，默认取值text placeholder:设置提示文字	单标签
textarea	多行文本输入框（文本）	placeholder:设置提示文字	双标签
button	按钮		双标签

2.11列表标签

标签	语义	单标签还是双标签
ul	无序列表	双标签
li	列表项，写在ul的里面	双标签

三、总结

html 页面的根标签 双标签
head 页面头部 双标签
body 页面主体   双标签
title 页面标题   双标签
meta 设置字符集编码 属性：charset 单标签
h1~h6 内容标题，一级到六级 双标签
p 段落 双标签
hr 分隔符 单标签

img 图片标签 属性：src,width,height 单标签
a 超链接标签   属性：href   双标签
input  单行文本输入框 属性：type,placeholder 单标签
textarea 多行文本输入框（文本域）  属性：placeholder 双标签
button   按钮 双标签

ul 无序列表    双标签
li  列表项，写在ul里面   双标签

div 布局结构标签，用于布局页面结构 双标签

大白兔i

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
关于html

一、VS的相关设置1.设置文件夹折叠：设置-功能-资源管理器，Compact Folders 把前面的对号去掉文件图标-设置-文件图标主题-选择器（vscode自带2个，）目录结构的缩进长度：点击小齿轮图标 -> 设置 -> 工作台 -> 外观 -> Tree:Indent 设置长度（数字越大缩进距离越大）设置字体大小：点击小齿轮图标 -> 设置 -> 文本编辑器 -> 字体设置字体大小二、html基础2.1HTML代码的组成
复制链接

扫一扫