网页的构成：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>：换行 -->这里是第二行空&nbsp;格：<!--&nbsp;：空格 --></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>

WEB网站与HTML相关推荐

web应用程序和web网站_Web应用程序和移动应用程序的基本启动清单
web应用程序和web网站 by Ben Cheng 通过本诚 Web应用程序和移动应用程序的基本启动清单 (The Essential Launch Checklist for Web Apps a ...
Linux web 网站服务器虚拟主机
Linux web 网站服务器虚拟主机转载于:https://blog.51cto.com/daijiehao/1861625
axure 点击按钮弹出框_Axure 教程：web网站原型设计技巧的分享
分享个人在绘制PC端web网站交互原型中一些设计技巧,enjoy~ 技巧一:搭建导航框架页面当自己还是一个小白时,开始着手设计web界面时,最容易犯的一个错误就是:基本每一个页面的绘制都是顶部导航. ...
计算机病毒中心：大量存在漏洞的Web网站被挂马
国家计算机病毒应急处理中心通过对互联网的监测发现,近期没有重大病毒出现,但很多存在漏洞的Web网站纷纷被挂马,用户应注意防范. 专家说,恶意攻击者大多数是利用网站当前存在的漏洞进行木马程序的植入,这些 ...
JAVA WEB快速入门之从编写一个JSP WEB网站了解JSP WEB网站的基本结构、调试、部署...
接上篇<JAVA WEB快速入门之环境搭建>,在完成了环境搭建后(JDK.Tomcat.IDE),现在是万事具备,就差写代码了,今天就来从编写一个JSP WEB网站了解JSP WEB网站的 ...
web网站服务（二）
Web网站服务(二) 一客户机地址限制 1)Allow,deny 先允许后拒绝,默认拒绝所有末明确允许的客户机地址 2)deny,allow 先拒绝后允许,默认允许所有末明确拒绝客的户机地址地址形 ...
Web网站的性能测试工具
随着Web 2.0技术的迅速发展,许多公司都开发了一些基于Web的网站服务,通常在设计开发Web应用系统的时候很难模拟出大量用户同时访问系统的实际情况,因此,当Web网站遇到访问高峰时,容易发生服务器 ...
一个WEB网站高并发量的解决方案
一个WEB网站高并发量的解决方案参考文章: (1)一个WEB网站高并发量的解决方案 (2)https://www.cnblogs.com/dotnetHui/p/7943605.html 备忘一下.
Java怎么测并发量_如何测试一个web网站的性能（并发数）？
最近做了个web网站(javaweb),现在想测试一下这个网站能承受的最大并发数,但是对于压力测试知之甚少,求指教啊,我有两个问题: 1.我最想测试的是最大并发量,怎么测试呢? 2.一般web网站性能 ...
新建Web网站与新建Web应用程序的区别
为什么80%的码农都做不了架构师?>>> 在Visual Studio 2010中,除了可以使用创建Web应用程序的方式来构建自己的Web项目之外,还可以通过创建Web网站的方 ...

WEB网站与HTML