网页的构成：HTML+CSS+JS
使用工具：HBuilderX
一、HTML骨架
<!doctype html> <!--代表 HTML5.0版本 -->
<!--绝大部分标签都是成对出现 -->
<html><!--HTML便签：里面放页面的所有内容 -->
<head><!--head便签：头部便签 -->
<meta charset="utf-8">
<!--描述了编码格式 -->
<title>这里是标题</title>
</head>
<body>
这里是主体内容
</body>
</html>
二、HTML标签的书写规则
1.HTML标签分为单标签和双标签
2.单标签书写规则：<单标签名称/>，现在好像可以没有后面的/。
3.双标签书写规则：<双标签名称></双标签名称>
4.HTML可以嵌套使用，但是不能出现交叉嵌套现象
三、基础标签
1.空格和换行标签
<body>
这里是第一行
<br><!--<br>：换行 -->
这里是第二行
空 格：<!-- ：空格 -->
</body>
2.标题标签
在HTML中定义了一组专门用来表示标题的标签，从h1-h6共计6个标签
<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>
3.段落标签
Q：为什么要使用段落标签？
A：符合标签语义化。
标签语义化： 在合适的地方使用合适的标签，就算符合标签语义化。符合语义化的网站可以在搜索引擎中排名更靠前，获得更多的点击量
<p>段落内容</p>
4.文字标签
弱语义：
<b>文字加粗</b>
<s>删除线</s>
<i>倾斜文字</i>
强语义：
<strong>文字加粗</strong><!--strong：特别强调，一篇文章1~2个 -->
<del>删除线</del><!--del：逐渐代替了s标签 -->
<em>倾斜文字</em><!--em：普通强调，没有次数限制 -->
5.常用布局标签
<div></div><!--div：大盒子 -->
<span></span><!--span：小盒子 -->
6.图片标签
<body>
下面是一张图片<br>
<!-- src：资源 属性名="属性值" 这种书写方式叫键值对，也叫KV对 -->
<img src="11.png" ><br>
下面又是一张图片<br>
<img src="11.png" width="200" height="100"><br>
下面又是一张图片<br>
<!-- 只设置宽或高中的一个属性，另外一个会按原图比例缩放 -->
<img src="11.png" width="100"><br>
下面又是一张图片<br>
<!-- title:鼠标悬停时显示的提示文字 -->
<!-- alt:图片加载失败时的提示信息 -->
<img src="111.png" width="100" title="标题" alt="小丑">
</body>
四、路径
绝对路径： 在前端中不推荐使用绝对路径的方式，因为没有移植性
<img src="D:\HTML学习\01\11.png" >
同级路径： HTML文件与被查找文件存放在同一级路径下，只需要在src中写入图片名称即可
<img src="11.png" >
下级路径： HTML文件与图片不在同级目录，此时通过 / 向下查找
<img src="11.png" >
上级路径： 以HTML文件为起点，通过 …/ 符号向上进行回退查找
<img src="./11.png" >
<img src="./img/11.png" >
五、超链接
HTML中专门定义了实现链接的标签
<!-- 如果要跳转到线上网站 必须添加 hppt:// 超文本传输协议 -->
<a href="http://www.baidu.com">百度</a>
<br>
<!-- 跳转到本地文件，直接写路径即可 -->
<a href="02空格与换行.html">打开02</a>
<br>
<!-- target="_blank:以新窗口的方式打开 -->
<a href="05插入图片标签.html" target="_blank">打开05</a>
<br>
<!-- 一个 # 的空链接可以让页面回到顶部 -->
<a href="#">#号空链接</a>
六、表单基本介绍
表单就是在web页面上收集用户数据，并将数据提交到后台的一个HTML模块。HTML里专门定义了一个form标签，称为表单域。
<form action="" method="">
表单里的内容
</form>
七、表单域属性介绍
通过form标签定义表单域，它相当于一张白纸，用户在上面填写数据（通过其他表单元素实现）。
填写完数据之后点击提交按钮，数据会自动提交到目标地址，这个地址写在action属性中。
action的值决定了把所有的表单内容传递给哪个后台来解决。
method代表传输数据时候的方法：get代表明文传输；post代表简单的加密传输。
<!-- form标签是表单数据的根标签-->
<form action="" method="post">
<!-- type="text"：表示普通的输入框" -->
<!-- placeholder属性中可以设置提醒文字 -->
</form>
1.input标签
- type=“text”： 表示普通的输入框"
- type=“password”： 表示密码框
- placeholder属性： 可以设置提醒文字
- name属性： 为控件分组
- type=“radio”： 单选按钮
- type=“checkbox”： 复选框
- checked=“checked”： 为单选按钮或复选框设置默认选项
<!-- form标签是表单数据的根标签-->
<form action="" method="post">
用户名：<input type="text" placeholder="请输入用户名"/><br>
密码：<input type="password"/><br>
<!-- 关注点击时是否为单选效果,点击文字也可以实现切换效果可以提升用户体验 -->
性别:<input type="radio" name="sex" id="man"/><label for="man">男</label>
<input type="radio" name="sex"/>女<br>
爱好：<input type="checkbox" name="ah" id="eat" value="" /><label for="eat">吃饭</label>
<input type="checkbox" name="ah" id="sleep" value="" /><label for="sleep">睡觉</label><br>
</form>
2.label标签
用户点击由
<!-- 关注点击时是否为单选效果,点击文字也可以实现切换效果可以提升用户体验 -->
性别:
<input type="radio" name="sex" id="man"/>
<label for="man">男</label>
3.select标签
select元素用来创建下拉框。
option标签定义了列表中的可用选项
<!-- 注意默认选项是否符合要求，可选数也要符合要求 -->
<select name="address">
<option value ="">沈阳</option>
<option value ="">大连</option>
<option value ="">辽阳</option>
</select>
4.textarea标签
- textarea元素用来创建文本框。
- selected=“selected”： 为下拉框设置默认选项
<!-- rows和cols属性代表列和行，为了兼容性一般不使用，通过CSS来解决 -->
<!-- 标签之间的空格或换行会作为内容填写到输入域中，会影响光标的定位和提示信息的显示 -->
<textarea rows="10" cols="30" placeholder="请填写您的建议"></textarea>
注意： 应将拉伸按钮关闭，不允许用户自行改变
<!-- 使输入域大小固定，不可拉伸 -->
<style type="text/css">
textarea{resize: none;}
</style></textarea>
5.按钮
<!-- value需要自己设置，否则会有兼容性问题 -->
普通按钮：<input type="button" name="" id="" value="按钮" />
<!-- 点击此按钮后，将重置页面中的表单数据 -->
重置按钮：<input type="reset" name="" id="" value="重置" />
<!-- 点击此按钮后，会把表单中的数据上传到form中action属性所对应的后台程序中 -->
提交按钮：<input type="submit" name="" id="" value="提交" />
6.默认选中状态
- checked=“checked”：单选按钮、复选框
- selected=“selected”：下拉框
八、列表
- 无序列表
<ul>
<li>无序列表1</li>
<li>无序列表2</li>
</ul>
- 有序列表
<!-- 标签要使用准确才能标签语义化得到最好的体现 -->
<ol>
<li>有序列表1</li>
<li>有序列表2</li>
</ol>
九、HTML5
1.基本介绍
HTML5是最新的语言标准，市面上H5值得的是html5+css+javascript或其他脚本几个。指代一整套新的开发流程和模式，以下会介绍一些HTML5中的新增内容。
2.结构标签
<header >头</header>
<nav>导航</nav>
<aside>侧边栏</aside>
<article>文章</article>
<footer>尾部</footer>
3.数据列表标签
数据列表标签：
input标签里要设置list属性，值要与想绑定的datalist的id值相同。
option标签里的value属性值不能为空。
<body>
请选择座驾：<input type="text" list="zj"/>
<datalist id="zj">
<option>奥迪</option>
<option>红旗</option>
<option>特斯拉</option>
</datalist>
</body>
4.表单验证属性
以下都是input标签里的type类型
- required=“required”： 非空验证
- autofocus=“autofocus”： 自动获取焦点
- autocomplete=“autocomplete”： 记录历史输入，name里的值对应提交数据保存位置。
- type=“email”：邮箱验证
- type=“url”：网址验证，必须包含http://
- type=“number”：数字验证，只能输入数字
- type=“search”：在最右边出现一个x，点击可以清空输入内容
- type=“datetime-local”：详细日期时间，同类型还有 月份month、星期week、日期date、时间time
- type=“range”：滑块，非进度条
5.音频标签
作用就是在网页中插入一段音频资源，在HTML5中新增了一对双标签audio，可以通过它引入一段外部声音，语法与引入图片类似。
audio标签：
- controls：显示控件
- autoplay：自动播放
- loop：循环播放
<audio controls="controls" autoplay="autoplay" loop="loop">
<!-- 引入不同格式，保证兼容性。默认第一个 -->
<source src="音乐1.mp3"></source>
<source src="音乐2.wav"></source>
</audio>
6.视频标签
<video width="800" height="" autoplay="autoplay" loop="loop">
<!-- 引入不同格式，保证兼容性。从上到下执行 -->
<source src="myvideo.mp4" type="video/mp4"></source>
<source src="myvideo.ogv" type="video/ogg"></source>
<source src="myvideo.webm" type="video/webm"></source>
<!-- 浏览器无法识别以上视频时，将显示下面的提示信息 -->
当前浏览器不支持 video直接播放，点击这里下载视频： <a href="myvideo.webm">下载视频</a>
</video>
964
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
