关于html的基本学习

文章目录

关于html的基本学习
常用插件
1、新建文件夹或者直接将文件夹拖入
2、基本讲解
- 2.1常用快捷键和html基本讲解
- 2.2注释
3、基本标签使用，h、p和div
- 3.1演示结果
4、img的使用
5、锚点
6、ul和li，有序和无序列表嵌套
- 6.1 有序列表
- 6.2 腾讯的无序列表场景
- 6.3 有序列表场景
- 6.4 定义列表
7.表格
- 7.1表格的基本制作
- 7.2表格的案例
- 7.3表格分区
8、表单元素（输入框，点击框）
- 8.1单选复选框
- 8.2下拉框
9、字符实体
- 9.1常用实体字符
10、div和span讲解

学习视频

常用插件

下载地址工具
环境配置

1、新建文件夹或者直接将文件夹拖入

然后点击新建文件，后缀为html

2、基本讲解

2.1常用快捷键和html基本讲解

常用快捷键：
1.ctrl + ？注释
2. shift+alt+A 注释
3.ctrl+enter 换行
4. 按 a会跳出 a的属性标签格式，按p会跳出p的属性标签格式
5.html:5 VSCode会自动补全代码
6. ：代表空格
7.ctrl+enter 换行

<!DOCTYPE html>   <!-- 表示文档类型和定义  ！表示警示标志 -->
<html lang="en">  <!-- 表示英语是整个网页的主体语言 中文是：lang="zh-Ch" -->
<head><meta charset="UTF-8"> <!-- utf-8 表示所有语言都可以，但是速度较慢，面向全球用这个，每个汉字3个字节gbk 表示主要语言为中文，每个汉字2个字节gb123，gb是国标的意思，只有汉族的文字和其他少量字符，每个汉字2个字节 --><!-- 注意，修改类型的时候，除了要修改meta charset，还需要将 编译器下面的 UTF-8点进去进行修改 --><meta http-equiv="X-UA-Compatible" content="IE=edge"> <!-- 表示设置兼容性为让edge和ie渲染方式一样 --><meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- 有这个东西手机页面也能正常显示 --><!-- <meta name="keywords" content="纵横小说"> --><!-- <meta name="renderer" content="webkit"> 不太懂，意思是表示尽可能地用高级核打开页面 --><title>我是标题</title> <!-- 设置网页标题 -->
</head>
<body><h1>hello</h1>  <!--必须成对出现，结束标签必须有关闭符号--><a href="https://www.bilibili.com/blackboard/activity-Jh420jeN1Y.html?spm_id_from=333.5.0.0" title = "chaojilianjie">我是超级链接</a> <!-- 这是超级链接 --></body>
</html>

2.2注释

3、基本标签使用，h、p和div

div和p的区别讲解

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><!-- h标签的基本使用   生成方式：h$*6 --><!-- 按住鼠标转动，往下移就可以同时输入多行 --><h1>我是h1标签 </h1><h2>我是h2标签</h2><h3>我是h3标签</h3><h4>我是h4标签</h4><h5>我是h5标签</h5><h6>我是h6标签</h6> <!-- 权重就是文本的全红在那个，比如设置h标签的文字就赋予了标题的语义，如果从浏览器的角度去考虑，它的权重在搜索引擎的优化，搜索引擎的优化除了会抓取meta标签配置的keywords之外，还会优先先抓取标题的内容，h1标签的权重是最高的，一个页面只是用一个h1，通常用来制作网页的logo，如果你在页面中设置了多个h1标签，搜索引擎会认为你在作弊，从而降低搜索权重 --><!-- p标签的基本使用  每个p标签都是一个段  --><!-- 作用：定义一个完整的语段 --><!-- style 是缩进5个空格 --><p style="text-indent:5em"> 周杰伦（英语：Jay Chou，1979年1月18日－），台湾华语流行歌曲男歌手、音乐家、编曲家、唱片制片人、魔术师。同时是演员、导演、电子竞技职业战队J Team的老板。</p><p>在2000年，周杰伦发行了他的首张专辑《Jay》，从属于唱片公司阿尔发音乐。从此以后，他的音乐获得了遍及亚洲的荣誉，尤其在台湾、中国大陆、马来西亚、香港、新加坡、印度尼西亚、韩国、日本和西方国家——例如美国和澳大利亚——的亚裔社群中。周杰伦是华语流行音乐历史上最具影响力的音乐人之一，其在本土台湾共有247万张专辑的销量并获得了许多针对他的音乐工作的奖项，包括15座台湾金曲奖，2座MTV亚洲大奖。周杰伦也为其他艺术家写歌。在2003年，他是《时代》杂志（亚洲版）的封面故事，被称为“亚洲流行音乐的新天王”。他其后开展了六个世界巡演，在世界各地的城市中对超过1000万人表演。</p><p>周杰伦在电影《头文字D》（2005）中开始了他的电影事业；他从此涉足许多其他的电影企划。周杰伦也管理他自己的唱片和经纪公司杰威尔音乐。2011年首度进入好莱坞，主演《青蜂侠》之助理Kato；而后在2016年，他再次进入了好莱坞，在电影《惊天魔盗团》中扮演小李。</p>
</body>
</html>

3.1演示结果

4、img的使用

<!-- 作用，插入一个图片 --><!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><!-- src:引入图片路径  alt：图片加载不出来例如图片路径错误时的替换文本 --><!-- width 和 height 设置的宽度和高度，但是设置了也有可能会让图片等比例进行变形 --><!-- title :当你鼠标移到页面的图片上时，会显示描述 --><img src="./imags/01.jpg" alt="我是自律" width="220px" height="120px" title="自律的象征" ><!-- border :会加上黑色边框 ！！了解即可，用处不大，实际上是用css设计边框的--><img src="http://ww1.sinaimg.cn/mw2000/70ace9b7ly1ggzusnypoej20yi0yiaop.jpg" border="5" width="220px" height="120px" >
</body>
</html>

5、锚点

使用方法一：记住要加 #，设置 <a name= >

使用方法二：设置 id属性，个人感觉使用更方便

结果：

这里插入

6、ul和li，有序和无序列表嵌套

<!-- 1.列表：不是单打独斗的，通常是一组标签组成2.无序列表：作用：定义一个没有顺序的列表结构，由 ul，li组成ul：ulordered list（无序列表）li：list item（列表项）--><!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title></head><body><!-- 基本使用方法： --><!-- 注意：ul内部嵌套li，他们是父子规律，ul内部只能嵌套li ，li内部可以嵌套任何标签，甚至是ul --><h2>古典名著</h2><ul><li>西游记</li><li>红楼梦</li><li>水浒传</li><li>三国演义</li></ul><h2>古典名著</h2><ul><li><h3>西游记</h3><ul><li>孙悟空</li><li>沙僧</li><li>猪八戒</li><li>唐僧</li></ul></li><li><h3>水浒传</h3><ul><li>松江</li><li>武松</li><li>林冲</li><li>鲁智深</li></ul></li><li><h3>红楼梦</h3><ul><li>薛宝钗</li><li>刘姥姥</li><li>大观园</li><li>林黛玉</li></ul></li><li><h3>三国演义</h3><ul><li>刘备</li><li>曹操</li><li>张飞</li></ul></li></ul></body></html>

注意列表项之间没有先后顺序之分，列表项的前缀样式是用css去控制的。

6.1 有序列表

<!-- 有序列表：定义一个有序列表的列表结构两个标签 ol，liol：ordered lsit （有序）li：list item （列表项）跟无序规则差不多
-->
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><h2>三年级期末考试排名情况</h2><ol><li><h3>三年级2班</h3><ol><li>老王</li><li>张三</li><li>李四</li></ol></li><li><h3>三年级1班</h3><ol><li>隔壁</li><li>张王</li><li>李老</li></ol></li><li><h3>三年级3班</h3><ol><li>范同学</li><li>张同学</li><li>吴同学</li></ol></li></ol>
</body>
</html>

6.2 腾讯的无序列表场景

6.3 有序列表场景

6.4 定义列表

dd和dt都是容器及标签，内部可以存放任意内容

<!-- dl,dt,dddl:definition list :表示创建一个自定义列表结构dt：definiton item ：定义主题或者术语，表示一个列表的主题dd：definiton description：表示解释和说明前面的主题内容dl内部只能存放dt和dd，dt和dd是同级关系规则：每个dt后面可以跟0—~n个解释的dd，每个dd解释就是上一个最近的dt
-->
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><h2>国内女明星</h2><dl><!-- dt：定义标题 --><dt>杨幂</dt><!-- dd：内部解释，dd内部可有多个嵌套 --><dd><p>家庭：小糯米</p><p>作品：《三生三世》、《宫》、《仙剑奇侠》</p><p>工作室：迪丽热巴</p></dd><dt>赵丽颖</dt><dd>作品：《花千骨》、《楚乔传》、《陆贞传奇》</dd><dd>家庭：冯绍峰</dd><dt>刘诗诗</dt><dd>作品：《步步惊心》</dd><dd>家庭：吴奇隆</dd></dl>
</body>
</html>

使用场景：一个场景由多个dl组成，并不是一个dl嵌套多个dt和dd，这样方便搭建布局

7.表格

7.1表格的基本制作

<!-- 表格基础：table ： 表格：定义一个表格结构tr table rows，定义了表格的行td table dock，定义了表格的单元格关系：table->tr->td--><!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title></head><body><!-- tr*3>td*4  就是生成三行四列的快捷键 --><!-- border="1":设置表格边框，越大，边框越大style="border-collapse:collapse 表示将重合的边框合并，这是css样式" --><table border="1" style="border-collapse:collapse"><!-- tr里面嵌套th设置表格的头 --><tr><th>1</th><th>2</th><th>3</th><th>4</th></tr><tr><td>第1行，第1列</td><td>第1行，第2列</td><td>第1行，第3列</td><td>第1行，第4列</td></tr><tr><td>第2行，第1列</td><td>第2行，第2列</td><td>第2行，第3列</td><td>第2行，第4列</td></tr><tr><td>第3行，第1列</td><td>第3行，第2列</td><td>第3行，第3列</td><td>第3行，第4列</td></tr><tr><td>第4行，第1列</td><td>第4行，第2列</td><td>第4行，第3列</td><td>第4行，第4列</td></tr></table></body></html>

结果：

7.2表格的案例

 <!-- 单元格合并一部分单元格需要跨行跨列合并,可以给对应的td和th标签设置相关属性rowspan:上下跨行合并colspan:左右跨列合并属性值是数字,数字是几就代表跨几行或者跨几列步骤:1.确定一行有多少个td2.然后再看一共有几行3.然后观察那个单元格合并,设置对应属性--><!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>table{}td{width:80px;height:60px;text-align:center; /* 文本居中 */}</style></head><body><table border="1" style="border-collapse: collapse"><tr><td colspan="2">1</td><td rowspan="2">2</td><td colspan="3">3</td><td>4</td></tr><tr><td rowspan="2">5</td><td>6</td><td>7</td><td>8</td><td rowspan="2">9</td><td>10</td></tr><tr><td rowspan="2">11</td><td>12</td><td colspan="2">13</td><td rowspan="2">14</td></tr><tr><td>15</td><td>16</td><td>17</td><td colspan="2">18</td></tr></table></body></html>

7.3表格分区

<!-- 表格：表格标题表格表头表格主题table：caption：定义表格主题thead：定义表格头部，内部 tr>thtbody：定义表格主体，内部 tr>td--><!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>table,td{border-collapse: collapse; /* 可以在这里进行设置 */}</style></head><body><table border="1"><!-- 主题分区 --><caption>各地区资产投资情况</caption><!-- 表头分区 --><thead><tr><th rowspan="2">地区</th><th colspan="2">按总量分</th><th colspan="2">按比重分</th></tr><tr><th>自年初累计(亿元)</th><th>去年同期增长(%)</th><th>去年初累计增长(%)</th><th>去年同期(%)</th></tr></thead><!-- 主体分区 --><tbody><tr><td>全国</td><td>123234</td><td>9.8%</td><td>100.0</td><td>100.0</td></tr><tr><td>全国</td><td>123234</td><td>9.8%</td><td>100.0</td><td>100.0</td></tr><tr><td>全国</td><td>123234</td><td>9.8%</td><td>100.0</td><td>100.0</td></tr><tr><td>全国</td><td>123234</td><td>9.8%</td><td>100.0</td><td>100.0</td></tr><tr><td>全国</td><td>123234</td><td>9.8%</td><td>100.0</td><td>100.0</td></tr></tbody></table></body></html>

结果：

8、表单元素（输入框，点击框）

8.1单选复选框

<!-- 表单元素是网页中提供给用户进行点击的控件1.form标签：表单的意思，容器级的标签，内部存放可输入的控件。如果输入的表单需要提交到数据，所有的空间需要被form表单包裹。method：方法的意思，指数据的提交方法，属性值是：post和getaction：是数据提交的位置2.input标签是输入框的一种，但是不仅仅只有输入框，通过type属性，可以拓展多功能input的type属性非常丰富--><!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title></head><body><form action=""><!-- 输入框的使用value：设置输入框的默认值，属性值为自定义内容，（与手动输入的内容一样）placeholder：文本的占位符，如果没有value的时候，提示用户的文字占位符--><p>用户名： <input type="text" value="请输入用户名"></p><p>密码框： <input type="password" placeholder="请输入密码" ></p><!-- 单选框：通过type值为radio设置的，单选按钮都是成组出现的要想实现一组单选按钮的互斥，需要设置相同的name属性 --><p>性&nbsp;别<input type="radio" name="sex" checked="checked"> 男<input type="radio" name="sex"> 女<input type="radio" name="sex"> 保密</p><!--复选框：也叫多选框通过type属性 值为checkbox设置可以通过对自身的多次点击实现选择或者取消，但是单选框不行多选框可以选择一个或者多个，建议同一组设置同样的name属性--><!-- 单选框和多选框都有一个默认被选择的功能，需要给input标签添加一个checked='checked' --><!-- 但是现在点击文字不能触发单选框或者多选框的点击事件的，所以需要label标签扩大触发范围 --><p>爱&nbsp;好<input type="checkbox" name="hobit" checked="checked">运动<!-- 有了label标签，点击绘画这个文字也能触发动作 --><label ><input type="checkbox" name="hobit"> 绘画</label><label ><input type="checkbox" name="hobit"> 音乐</label></p></form></body></html>

结果：

8.2下拉框

<!-- 下拉菜单：需要一组标签进行制作select:选择，表示搭建下拉项option:选项，表示搭建下拉项的关系：select>option默认的第一个是显示的，并不是被选中的，若是需要默认为被选中，需要用selected属性，值也为selected--><p>籍贯：<select ><option >北京</option><option selected="selected">上海</option><option >深圳</option><option >广州</option></select></p>

结果：

9、字符实体

9.1常用实体字符

例如下列情况：

<body><div>好开心啊，今天吃了饭！！<h1>标签的作用 </div>
</body>

会出现：h1被当作标签加载，而不是预想中的文本：

利用字符实体进行转换

<body><div>好开心啊，今天吃了饭！！&lt;标签的作用 </div>
</body>

10、div和span讲解

<!-- div和span都是常用的布局标签，俗称盒子div:分割跨度大跨度span：小区域小跨度，作用是用来分割页面的布局，div是跨度布局分割，span是文字分割div：容器级标签，双标签div：HTML+CSS 又叫做div+CSS主要作用是用来进行网页布局的拆分，没有明确的语义span：作用是一个极限小，只适用于文字的跨度划分--><!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title></head><body><!-- 顶部 --><div>今天一共收入： <span style="color:red;">300</span>元</div><!-- 中心部 --><div>2</div><!-- 底部 --><div>3</div></body></html>

演示：

vscode 初始设置、基本操作及html的基本了解相关推荐

idea显示初始界面_Python基础 PyCharm 的初始设置
目标恢复 PyCharm 的初始设置第一次启动 PyCharm 新建一个 Python 项目设置 PyCharm 的字体显示 PyCharm 的升级以及其他 PyCharm 的官方网站地址是:h ...
vscode中设置字体大小_vscode配置使用教程
vscode设置成中文 vscode默认的语言是英文,对于英文不好的小伙伴可能不太友好.简单几步教大家如何将vscode设置成中文. 按快捷键"Ctrl+Shift+P". 在&q ...
安装oracle11g client 【INS-30131】执行安装程序验证所需的初始设置失败的解决方法
安装oracle11g client [INS-30131]执行安装程序验证所需的初始设置失败的解决方法参考文章: (1)安装oracle11g client [INS-30131]执行安装程序验证 ...
vscode安装设置go
vscode安装设置go vscode安装go配置 1.下载最新的vscode: https://code.visualstudio.com/docs/?dv=win 2.下载go: https: ...
vscode输入vue自动_vscode配置总结可收藏/vscode用户设置大全/vue代码模板，vscodevue...
vscode配置总结可收藏/vscode用户设置大全/vue代码模板,vscodevue //用户设置 { //-------- 搜索配置 -------- "search.excl ...
vscode怎么弄php,vscode如何设置语言
vscode如何设置语言? 第一次使用Visual Studio Code(vs code)并不知道她附有10种可用的显示语言(地区):英文(美国),简体中文,繁体中文,法文,德文,意大利文,日文,韩 ...
SourceTree 免登录跳过初始设置
SourceTree 免登录跳过初始设置 SourceTree 安装之后需要使用账号登陆以授权,以前是可以不登陆的,但是现在是强制登陆. 虽然是免费授权,但是碰上不可抗力因素,登陆不是很方便,这里记录 ...
VsCode常用设置，新手必备！
相信有不少同学在看大神进行代码开发的时候只输入了几行代码,之后编译器自动生成了一串代码,那么你知道是怎么做到的吗? 闲话不多说,今天小千就来聊一聊如何–懒省事(在VsCode里面设置自定义的模板) 首 ...
aws cognito_使用AWS Cognito的用户管理—（1/3）初始设置
aws cognito by Kangze Huang 黄康泽使用AWS Cognito的用户管理-(1/3)初始设置 (User Management with AWS Cognito - (1/ ...

vscode 初始设置、基本操作及html的基本了解

关于html的基本学习

文章目录

常用插件

1、新建文件夹或者直接将文件夹拖入

2、基本讲解

2.1常用快捷键和html基本讲解

2.2注释

3、基本标签使用，h、p和div

3.1演示结果

4、img的使用

5、锚点

6、ul和li，有序和无序列表嵌套

6.1 有序列表

6.2 腾讯的无序列表场景

6.3 有序列表场景

6.4 定义列表

7.表格

7.1表格的基本制作

7.2表格的案例

7.3表格分区

8、表单元素（输入框，点击框）

8.1单选复选框

8.2下拉框

9、字符实体

9.1常用实体字符

10、div和span讲解

vscode 初始设置、基本操作及html的基本了解相关推荐

最新文章

热门文章

vscode 初始设置、基本操作及html的基本了解

关于html的基本学习

文章目录

常用插件

1、新建文件夹或者直接将文件夹拖入

2、基本讲解

2.1常用快捷键和html基本讲解

2.2注释

3、基本标签使用 ，h、p和div

3.1演示结果

4、img的使用

5、锚点

6、ul和li，有序和无序列表嵌套

6.1 有序列表

6.2 腾讯的无序列表场景

6.3 有序列表场景

6.4 定义列表

7.表格

7.1表格的基本制作

7.2表格的案例

7.3表格分区

8、表单元素（输入框，点击框）

8.1单选复选框

8.2下拉框

9、字符实体

9.1常用实体字符

10、div和span讲解

vscode 初始设置、基本操作及html的基本了解相关推荐

最新文章

热门文章

3、基本标签使用，h、p和div