1.HTML的基础结构
HTML，即超文本标记语言
通过浏览器查看网页的基础结构的方法：在浏览器空白地方，右键“查看”
如何快速创建基础结构,在新的页面中:(英文状态)
①!+tab或!+回车
②html:5
问：HTML基础结构每一行分别是啥含义
答：HTML基础结构的注释如下
<!DOCTYPE html>
<!-- doc===document文档 type===类型 html==文件类型
作用:声明文档类型:HTML页面文件
-->
<html>
<!-- 超文本标记语言 :所有的标签都需要放在html标签内部-->
<head>
<!-- 头部:网页的头部 -->
<meta charset="UTF-8">
<!-- 定义字符编码格式 H5遵循的编码格式:utf-8 -->
<title>我的第一个页面</title>
<!-- 标题:网页的标题 -->
</head>
<body>
<!-- 主体:网页的主体 -->
</body>
</html>
2.VScode使用
注释:作用:对代码或者是功能模块进行解释说明的;同开发人员一起了解代码的含义
①注释快捷键
- 单行注释 快捷键：ctrl+/，再按一次ctrl+/快速解开
- 多行注释 快捷键：ctrl+/
- 部分注释 快捷键：选中需要注释的词/部分再按alt+shift+a
问：HTML注释符号与CSS注释符号相同吗？
答：HTML注释符号与CSS注释符号/*background:red*/不同
②VScode其他常用快捷键
向上复制一行 shift+alt+uparrow，向下复制一行 shift+alt+downarrow
整行向上移动一行 alt+uparrow，整行向下移动一行 alt+downarrow
在上面添加多个光标 ctrl+alt+uparrow，在下面添加多个光标 ctrl+alt+downarrow【同alt+单机鼠标左键（可在同一行或多行）】
选中多个相同部分ctrl+d，可选中一部分，按住ctrl+D 有几个就按几次
③VScode常用前端插件
chinese（simplified）
简体中文插件
auto rename tag
输入命令时，自动提示
view-in-broswer
浏览器查看
live-server
编辑器会提供一个内置的服务器保存文件,会自动的刷新浏览器，实时浏览器
htmltagwrap
利用alt+w快速生成一对p标签，可修改
imagepreview
图片预览
vscode-icons
各种格式的文件显示不同的图标
code snap
选中一片代码后，右键选择该项，再点snap图标，保存代码为图片
prettier
格式化
3.网站的组成部分
基础结构里面都是标签结构
1.网页的结构 => HTML结构层:学习一系列的标签
2.网页的表现CSS样式层:对标签修饰
3.网页的行为 =>JS行为交互层:操作样式做交互
4.标签的基本语法
学习标签了:学习标签的基本语法。书写形式分类:两类
1)双标签
概念:成对儿出现,有开始有结束;
基本语法:<标签名字 属性="属性值" 属性="属性值" 属性="属性值"></标签名字>
2)单标签
概念:自己独立出现,只有开始没有结束
基本语法:<标签名字 属性='属性值' 属性='属性值'>
特点:a)双标签有开始,有结束,结束必须带/;单标签没有结束
c)可以放一个属性和属性值,也可以放多个属性和属性值,也可以不放
d)标签名字和第一个属性之间必须带空格
e)属性和属性值之间使用(=)链接的
f)属性值需要带引号
g)每一组属性和属性值之间使用空格隔开
属性:属性是对一个事物或者是一个元素,或者是一个标签的描述
属性值:这个描述的一个取值
例如:
<悟空 身高="180cm" 体重="150斤" 性别="男">
5.常用的标签
1)文本修饰标签(不能设置宽度高度)
a)加粗标签
作用:让文本出现加粗效果
加粗标签基本语法:
<b>文本</b>
<strong>文本</strong>
问：b与strong标签，有啥区别呢?开发的时候常用哪个?
答：相同点：都能实现加粗效果，不同点：strong更具有语义化，使用的频率较高。
<body>
这是正常文本
<b>这是加粗文本1</b>
<strong>这是加粗文本2</strong>
</body>
b)倾斜标签
作用:让文本出现倾斜效果(斜体字效果)
基本语法:
<em>文本</em>
<i>文本</i>
<var>文本</var>
问：i,em都能实现倾斜效果; 二者使用谁?
答：相同点:都能实现倾斜效果。不同点：em更加具有语义化,和强调性
<body>
这是正常文本哦
<em>这是倾斜文本1</em>
<i>这是倾斜文本2</i>
<var>这是倾斜文本3</var>
</body>
c)下划线标签
作用:为文本添加下划线效果
基本语法:
<u>文本</u> <ins>文本</ins>
问:异同?实际开发的时候使用谁?
答：相同点:都能实现下划线效果。不同点:u具有语义化，u是underline简写,实际开发的时候u比较多。
<body>这是不带下划线的文本<u>这是带下划线的文本1</u><ins>这是带下划线的文本2</ins></body>
d)删除线标签
作用:为文本添加删除线的修饰
基本语法:
<s>文本</s><del>文本</del>
问：s与del这两个删除标签异同?实际开发的时候使用谁?
答：相同点:都能实现删除线效果，不同点:del更加具有语义化,强调性，del是delete删除的简写
<body>这是正常文本<s>这是带有删除线的文本1</s><del>这是带有删除线的文本2</del></body>
e)角标标签
作用:为对应的位置添加上下角标效果，上角标==单位，下角标==化学
语法
上角标:<sup>文本/符号</sup>下角标:<sub>文本/符号</sub>
<body>10m*10m=100m<sup>2</sup>10m*10m*10m=1000m<sup>3</sup>H<sub>2</sub>O CO<sub>2</sub></body>
f)修饰文本标签
作用:大小,颜色,字体进行修饰的
基本语法:
<font size="文本的大小" color="文本颜色" face="字体">文本</font>
注意:
1.vscode中文本标签的颜色就是红色,不是错误
2.size取值没有单位，纯数值:取值范围:1-7，3是默认的字体大小，超过7实现不了。
<body><font size="8"color="purple"face="华文彩云">今天学习的是HTML基础知识</font></body>
2)段落和换行
g)段落和换行
段落:文本的段落,独立文本段落标签
基本语法:
<p>文本</p>
注意:段落标签里面只允许放:前面的文本修饰标签/图片。不允许放自己本身或者是其他标签
段落和段落之间是有一个段间距的
换行:强制换行,具有强制性
基本语法:
，单标签，break的缩写
<body><!-- 唐诗 --><!-- 书写形式1 --><p><font color="red">床前明月光,</font></p><p><font color="green">疑是地上霜.</font></p><p>举头望月明,</p><p>低头思故乡.</p><!-- 书写形式2 --><p>床前明月光, <br>疑是地上霜. <br>举头望明月, <br>低头思故乡. <br></p></body>
3)文本标题
应用场景:文章标题,新闻稿件,论文编写,百度百科
基本语法:双标签,总共有六级标题
<h1></h1>---<h6></h6>
h1===大标题,网站的logo区域设置盒子
h2===二级标题
h3===三级标题:目录
h4-h6==实际情况来自行使用即可
特点:默认自带加粗效果;独占一整行的;纵向排列。h1最大,h6最小
<body><!--标题标签:特点:默认自带加粗效果;独占一整行的;纵向排列。h1最大,h6最小,总共六个级别--><h1>我是一级标题</h1><h2>我是二级标题</h2><h3>我是三级标题</h3><h4>我是四级标题</h4><h5>我是五级标题</h5><h6>我是六级标题</h6></body>
4)列表标签即为清单
1)有序列表
含义:有顺序的列表,体现顺序性;ol=orderlist
基本语法:
<ol><li>文本</li><li>文本</li><li>文本</li></ol>
注意事项:
1)ol里面只能放置li;不能放置其他的元素
2)如果非要嵌套的话,则需要在li里面进行嵌套
ol的标签属性
type="A/a/I/i/1"，列表项的样式类型
start="取值只是数值没有任何的单位"，控制列表项的起始
<body><oltype="A"start="2"><li>第一步:把冰箱门打开</li><li>第二部:把大象放进去</li><li>第三部:把冰箱门关上</li><li>第三部:把冰箱门关上</li><li>第三部:把冰箱门关上</li><li>第三部:把冰箱门关上</li><li>第三部:把冰箱门关上</li></ol></body>
2)无序列表
含义:没有顺序的列表,没有顺序性;ul=unorderlist
基本语法:
<ul><li>文本</li><li>文本</li><li>文本</li></ul>
默认的样式是带有黑色实心圆
ul的标签属性
type=""
取值:disc=====黑色实心原点
circle===空心圆(圆环)
square===黑色实心正方形
none====取消列表项
问：ul中的type属性中的四个属性值:哪一个在实际应用中的使用频率比较高呢?
答：none，实际开发的时候,所有的列表项,使用背景完成
<body><ul type="none"><li>接电话</li><li>取外卖</li><li>抱孩子</li><li>拎水壶</li></ul></body>
3)自定义列表
含义:自行定义的列表:
应用:图文混排,问答列表,==小米官网
基本语法:
<dl><dt></dt><dd></dd></dl>
注意事项:
1)dl里面可以放多个dt和读个dd;但是一般情况下咱们只放置一个dt和一个dd
2)dl和dt,dd==父子关系,都是双标签
图文混排=>dt===图片;dd===文本
<body><!--自定义列表--><dl><dt>问题:哪里发货</dt><dd>回答:北京发货</dd></dl><dl><dt>问题:什么快递</dt><dd>回答:京尊达</dd></dl><dl><dt>问题:几天到武汉</dt><dd>回答:随心情</dd></dl></body>
5)图片标签
基本语法:img是image的缩写
<img src="路径">
路径:文本存储的一个地址,途径
绝对路径:完整的地址,比如:
c://img/picture/112233/123.png http://www.baidu.com/picture/123.png
目前来看:自己做简单的页面的时候:使用的是相对路径
相对路径:通过文件和文件夹之间的关系查找对应的文件内容
1)当前页面和图片之间===是同级关系
直接把图片的名字当做路径使用就可以
2)当前页面和图片所在的文件夹是同级关系,先要进入到对应的文件夹内,然后再去找对应的图片
img/pic.png
/表示进入文件夹的意思
3)当前页面所在的文件夹和图片之间是同级关系了
需要先返回上一级,然后再去找对应的图片
../makabaka.jpeg
4)图片所在的文件夹和页面所在的文件夹是同级关系
例如图片在img文件夹，页面在html文件夹，路径为
../img/图片文件
img其他属性1：
alt="提示文本"
特点:只有文本为破损图片的时候才会显示提示文本;不是破损文本不会提示
title="提示文本"
特点:只有鼠标放上去的时候有提示文本
<img src="img/suxsfsi.jpeg"alt="图片加载不出来时显示的文字" title="这个是鼠标悬停时显示的文字" width="100px">
问：img标签的属性alt和title两个都是提示文本区别是啥
答：相同点:都是提示文本属性。
不同点:
①alt:必须是破损文件的时候才会显示。title:无论是否为破损文件,都会提示:只要鼠标放上去即可
②alt提示文本占位置;title不占位置
③alt是图片属性;title任何一个标签上面都能添加
问：img标签中为啥要使用alt和title属性呢?
答：为了方便网站优化,方便爬虫爬取你的网站数据;提高搜索引擎优化
img其他属性2：
width和height属性
控制图片的大小显示:但是实际开发的时候:不会使用代码控制图片大小;为啥?让图片变形和失真
如果宽度和高度只设置一个属性的话,另一个属性的取值会跟着等比例放大或者是缩小
6)水平线hr标签
单标签
<hr width="宽度" size="高度" color="颜色" noshade align="水平对齐方式">
<body>
<!-- 一级标题 -->
<!-- h1添加属性:align="center" -->
<h1 align="center">将于第三季度上市上汽斯柯达新款速派官图</h1>
<!-- 文章段落 -->
<p>
日前，我们从官方获悉，上汽通用别克昂科拉GX内饰将于6月3日首次亮相。新车在2019. 上海车展期间首发，但内<br>
并未开放，官方宣布其将于下半年上市。
</p>
<!-- 无序列表 -->
<font color="gray">
<ul>
<li>教师资格语文备考现代文阅读技巧</li>
<li>确定语素的方法</li>
</ul>
</font>
<!-- 插入四张图片 -->
<p>
<img src="img/picc.png" alt="">
<img src="img/picc.png" alt="">
<img src="img/picc.png" alt="">
<img src="img/picc.png" alt="">
</p>
<!-- 有序列表 -->
<font size="4">
<ol>
<li>教师资格语文备考现代文阅读技巧</li>
<li>确定语素的方法</li>
</ol>
</font>
<!-- 水平 -->
<hr noshade color="red" align="left" size="2px">
<!-- 另外两个p标签你 -->
<p align="center">
如果所爱隔山海，山海皆可平
</p>
<p align="center">
如果所爱隔山海，山海皆可平
</p>
</body>
7)超链接标签a标签
两个功能:
1)实现不同页面之间的跳转(超链接功能)
基本语法:
<a href="路径地址,跳转页面的地址">文本/图片</a>
注意:href="路径地址" 与图片的路径访问方法是一样的
2)相同页面中的不同区域的跳转(锚点功能)
应用场景:返回顶部;京东淘宝楼梯层;论文的目录,小说的目录;百度百科;通讯录(微信,电话ABCDEFG)
小说为例子:写一个案例:锚点的案例
基本语法:
点击区域:
<a href="#锚点的名字box">文本</a>
跳转区域:
<p id="锚点的名字box">文本</p>
8)div和span标签
实际开发的时候会经常使用
div标签======块元素,盒子标签
作用:用于区块划分
div默认的显示形式：div默认独占一整行,是纵向排列的
span标签====空元素,行内元素,span标签
作用:主要是对独立文本的修饰; 一篇文章中,有一部分的文本需要独立的修饰;就是使用span标签
span标签默认的显示形式：span标签默认是横向排列的就可以了
9)表单标签
表单标签最主要的作用就是用来收集用户信息的
使用位置:注册登录页面
标签结构:
表单标签:
<form action="提交跳转地址" method="提交方法"></form>
注意事项:学习表单的时候主要学习的是:需要放在form表单标签里面
一系列的控件内容:
输入框,密码框,多行文本输入框,下拉菜单,按钮等等
①输入框
单行文本输入框基本语法:
<input type="text">
注意:无论怎们输入都是在一行中显示
②密码框
基本语法:
<input type="password">
注意:密码框是以加密形式显示的;黑色的实心原点显示;不同的浏览器中,显示的加密效果不一样，有的是黑色原点,有的是星号
③按钮类型
注意:修改按钮中的文本显示:需要通过value这个标签属性来实现，默认直接显示“提交”
提交按钮:
<input type="submit">
作用:配合form标签以及action属性实现提交跳转功能
重置按钮:
<input type="reset">
作用:配合form标签实现,取消清空的效果
普通按钮:
<input type="button">
作用:什么功能都没有
问题:提交,重置,普通;三个按钮,哪一个按钮使用的频率最高?
普通按钮使用频率比较高，考虑性能问题:
双标签button按钮:
基本语法:
<button>文本</button>
作用:经过浏览器渲染后，和提交按钮一样
一般情况下:button标签不需要添加type属性
图片按钮: 默认是一个提交按钮
<input type="image" src="">
表单案例
<!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="https://www.baidu.com" novalidate>
<fieldset>
<legend>登录信息卡</legend>
<p>用户名：<input type="text" placeholder="请输入用户名" autocomplete="on" list="menu"><br></p>
<datalist id="menu">
<option value="">小霸王</option>
<option value="">玛卡巴卡</option>
<option value="">唔西迪西</option>
<option value="">叽里咕噜</option>
<option value="">达利亚里</option>
</datalist>
<p>密码：<input type="password" placeholder="请输入密码"><br></p>
<p><input type="submit" value="注册"><input type="reset"></p>
<p>手机号：<input type="text" maxlength="11"></p>
<p>性别：<label><input type="radio" name="sex" id="man">男</label>
<input type="radio" name="sex" id="woman"><label for="woman">女</label></p>
<p>爱好：
<input type="checkbox">IT
<input type="checkbox" disabled>大数据
<input type="checkbox" checked>前端
<input type="checkbox">javascript
<input type="checkbox">云计算
</p>
<p>邮件：<input type="email" multiple></p>
<p>个人网站：<input type="url"></p>
<p>数字：<input type="number" min="50" max="300" step="20"></p>
<p>滑块：<input type="range" name="" id="" step="20"></p>
<p><input type="file" multiple></p>
<select name="" id="" size="3" multiple>
<option value="">省份</option>
<option value="" >河南</option>
<option value="" selected>湖南</option>
<option value="">河北</option>
<option value="" selected>湖北</option>
<option value="">山西</option>
</select>
<select name="" id="" size="1" multiple>
<optgroup label="河南" >
<option value="">郑州</option>
<option value="">商丘</option>
<option value="" selected>濮阳</option>
<option value="">平顶山</option>
<option value="">漯河</option>
<option value="">开封</option>
<option value="">新乡</option>
</optgroup>
<optgroup label="江苏">
<option value="">苏州</option>
<option value="">南京</option>
<option value="">南通</option>
<option value="">常州</option>
<option value="">泰州</option>
<option value="">镇江</option>
<option value="">无锡</option>
</optgroup>
</select>
<textarea name="" id="" cols="30" rows="10"></textarea>
</fieldset>
</form>
</script>
</body>
</html>
问：能实现宽高的标签有哪些，不能实现宽高的标签有哪些？
答：能设置宽度高度的标签:p,div,h1-h6,ul,ol,li,dl,dt,dd
不能实现宽度高度的标签span,b,strong,i,em,s,del,sup,sub,font,u
10)特殊符号
1)空格特殊符号:默认的情况下编辑器连无论你敲多少个空格,在浏览器中只会显示一个空格距离如何实现读个空格距离呢?: =====半角空格 =====全角空格(占一个完整汉字大小)2)尖角号的特殊符号<=======<>=======>3)版权符号©=======©4)商标™=======™®=======®