也许它是一种开发网页的语言
关于 HTML：
1）HTML开发的网页文档一般后缀为.htm和.html
2）HTML开发的Web文档可以通过浏览器打开并显示（浏览器就是HTML解析器）
3）HTML的本质是文档（html/txt/word/ppt等）
2.HTML结构
HBuilderX快捷键：
ctrl+鼠标滚轮，可以放大或缩小字体
ctrl+insert，可以将鼠标所在的行，或者键盘选中的行快速参数化到底部
ctrl+/或ctrl+shift+/，可以快速生成注释符号
：用于声明当前文档是html格式的网页，但版本是html5.0。
：根标签，所有html内容都应该放在根标签内
：腹部部分，用于存储网页的基本属性信息（如：网页标题、网页编码、导入的css文件、或JS文件）
：body部分，用于存储网页的视觉内容
我的第一个网页：指定页面选项卡的标题
~：指定网页内容的标题，如文章/新闻的标题
：告知浏览器当前网页使用的编码。 如果不指定该行，网页文件将以utf-8保存。 浏览器打开这个网页时，如果不使用utf-8，可能会出现乱码。
3. HTML句型
二、HTML标签
1. 图片标签
img标签可以将图像插入网页中，例如：
其中html中单选框，src属性：用于指向图片的路径（相对路径、网络路径）
width属性：指定图片的长度
height属性：指定图片的高度
关于路径问题：
1）不建议写c盘的绝对路径。 由于以后发布环境会改变，这个路径可能会出错，所以不推荐
2）建议写相对路径
./：表示当前文件所在位置，可省略
../：表示当前文件所在目录的上一级目录
表示在当前文件（html）所在目录中查找img目录，并在img目录中查找meinv01.jpg文件
2. 超链接标签
a标签用于在网页中实现超链接
点击超链接后，会跳转到另一个位置（网页、图片、下载地址等），如：
谷歌一下，你不知道
其中href属性用于指向跳转到的url地址
target属性用于指向打开超链接的表单
_self：在当前窗口中打开超链接
_blank：在新窗口中打开超链接
3. 表单标签
table：用于定义一个表，可以包含tr标签
tr(tablerow)：用于定义表中的行，tr可以包含td/th
td/th(tabledatacell)：用于定义表格中的单元格
th(tableheadercell)：用于定义表头中的单元格，其中的文本默认为粗体并居中。
colspan属性：设置单元格跨越的列数，如：
11
colspan="2"：设置当前单元格跨两列
rowspan属性：设置单元格垂直跨越的行数
21
rowspan="2"：设置当前单元格垂直跨越两行
4. 表单标签
4.1. 表格的作用
表单的作用：用于向服务器发送数据
向服务器发送数据的两种形式：
1）使用表单向服务器发送数据
表单中经常会有表单项标签（用户名、密码、昵称、邮箱、验证码等），可以在表单项中输入数据，提交后即可将输入的数据提交到对应的服务器表格。
2）使用超链接也可以向服务器发送数据
张三&年龄=20&喜欢=足球
URL地址前面可以拼接问号。 问号之前是url地址。 问号后面可以拼接参数。 参数包括参数名称（用户、年龄、喜欢）、参数值（张三、20、足球），多个参数之间。 & 分隔。输入访问服务器的地址后，可以将地址前面拼接的参数带入服务器
4.2. 表单标签
...
其中，action属性：用于指定表单中的数据将被提交到的地址。
例如，如果action属性指向百度服务器的URL，则表示表单中的所有数据都会提交到百度服务器。
method属性：指定提交方式，常见的提交方式有GET和POST（前面会提到区别）
如果不指定方法，则默认为GET提交。
5. 表单项标签
1）文本输入框（用户名/验证码/邮箱/昵称）
2）密码输入框（密码/确认密码）
3）单选按钮（性别/单选选项）
男性
女性
4）多项选择框/复选框（多项选择题选项/工作/爱好）
网球
5）下拉框（省/市/区选择）
上海
广州市
广州省
...
6) 多行文本输入框
7) 按钮/提交按钮
普通按钮本身没有功能，可以通过js给按钮添加功能（比如点击后，换一张图片）
提交按钮用于提交表单，将表单中的数据提交到action属性指向的服务器
6、登记表案例
表单项详细信息：
1）表单项上name属性的作用是什么？
提交数据的表单项（如：用户名/密码/性别/兴趣爱好/姓名/邮箱/验证码等）必须有name属性，如果没有name属性，则表单时此项将被忽略已提交（即很难提交数据）
2）单选框为什么可以多选？
所有单选按钮的 name 属性值必须相同。 如果值相同，则表示是一个组。 一组中只能选择一个单选按钮（即单选）
男性
女性
3) 为什么提交时单选按钮或复选框值处于打开状态？
由于单选框或复选框不像文本输入框，因此框中输入的内容也会作为值提交
单选框或复选框无法输入，因此只能通过 value 属性指定提交时的值
男性
女性
网球
4) 如何设置单选按钮或复选框默认选择某个项目？
男性
网球
可以给单选按钮或复选框添加checked属性，设置默认选中某一项
5）如何设置下拉框中的某项默认选中？
下拉框中默认选择第一项，如何设置默认选择第一项以外的其他选项
您可以将选定的属性添加到选项标签。
上海
广州
上海
上海
6) option标签上的value属性有什么作用？
例如：选择“北京”选项，但“北京”选项中没有值，则提交city=Beijing；
如果“北京”选项上有value属性，则选择“北京”并提交时，会提交value属性的值。
上海
广州
上海
上海
7.音视频标签
7.1. 音频标签
audio 可以在网页中插入音频流
如果您看到此内容，则说明您的浏览器不支持此标签
src属性：指定要插入的音频的url地址
Controls属性：添加插件供用户播放、暂停、音量控制等。
autoplay属性：音频加载后立即播放（手动播放）
width、height：设置元素的长度和高度
7.2. 视频标签
video 可以在网页中插入视频流
如果您看到此内容，则说明您的浏览器不支持此标签
src属性：指定要插入的视频的url地址
Controls属性：添加插件供用户播放、暂停、音量控制等。
autoplay属性：视频加载后立即播放（手动播放）
width、height：设置元素的长度和高度
7.3. div/span/p 标签
div/span/p标签是很常见、常用的标签
这三个元素是容器标签，可以用来包裹其他标签或文本
设置标签上的样式可以作用于其中的内容。
文字 文字 文字
这是 ap 元素
div、p：是块元素，默认占一行，可以设置宽度和高度
相同的块元素有：h1~h6、form、table、div、p等。
span：是行内元素，同一行可以显示多个行内元素，宽度和高度不能设置
相同的内联元素有：span、b、i、u、input、img
CSS总结：
1.CSS概述
1.CSS是什么？
CSS：Cascading Style Sheets，一种用于美化和渲染网页的语言
与传统的html标签属性设置样式相比，使用CSS设置样式可以实现：显示数据的html代码和设置样式的CSS代码分离，可以提高网页的显示能力。
2. 如何将CSS引入HTML
2.1. 在标签的 style 属性内添加 css 样式
这是一个分...
这些方法都是直接将css样式写在标签上的style属性内部，只对当前标签有效，无法实现代码复用，而且容易导致页面结构混乱，不利于后期的扩展和扩展。维护。 所以不建议大量使用。
2.2. 在 head 标签的 style 标签内添加 css 样式
这些方法是管理一个style标签中的所有css样式，不用在标签上写css代码，这样页面结构就不会混乱，而且代码可以复用
2.3. 通过链接标签导入外部css文件
这些方法都是将所有的css代码写在一个css文件中进行统一管理，真正的实现是把html代码和css代码分离。 可以实现代码重用，而不会造成页面结构混乱。
推荐这些方法（尤其是企业开发中）
二、CSS常用选择器
所谓选择器是一种可以帮助我们选择HTML中的元素进行修改的技术
1. 元素名称/标签名称选择器
通过元素名称或者标签名称选择指定名称的所有标签
格式：元素名称/标签名称{css样式..}
span{}--选择所有span元素
div{}--选择所有div元素
2. 类选择器
可以在标签中添加一个通用属性--class来设置元素所属的组，相同的class值就是一个组，通过class值可以选择这个组的元素。
格式：.class值{css样式..}
.s1{}--选择所有类值为s1的元素
另外，一个元素可以同时设置多个class值，如：
跨度111
表示当前span元素同时属于s1组和s2组。 如果s1和s2为span设置背景（但值不同），前面写的会覆盖后面的（对于同一类型的选择器）。
如果是不同类型的选择器，例如：使用元素名、类选择器、id选择器选择同一个元素，设置相同的属性，但取值不同，优先顺序为：
id 选择器 (100) > 类选择器 (10) > 元素名称选择器 (1)
如果一个选择器包含多个选择器类别html中单选框，可以减去权重值，权重值较大的优先级较高
如果权重值相同，前面写的会覆盖后面的！
3. ID选择器
标签中可以添加一个通用属性——id，id是一个数字，要求在整个网页中唯一。 通过id值，可以唯一地选择一个元素。
格式：#id值{css样式..}
4. 后代选择器
在父选择器选择的元素内部，选择指定的后代元素
格式：父代选择器子代选择器{css样式...}
divspan{}--选择div内的所有span元素
#d1p{}--选择id值在d1元素内部的p元素
5. 属性选择器
元素可以通过其属性或属性值进行匹配
格式：选择器[属性条件][属性条件]..{css样式}
input[type="password"]{}--选择所有密码输入框
input[type="checkbox"]{}--选择所有复选框
div[id]{}--选择所有具有id属性的div元素
3. CSS常用属性总结
1. 文本和字体相关属性
text-align：设置文本水平对齐方式
left（左，默认），center（中心），right（右）
text-indent：设置第一行文本的缩进、比例或像素值
text-shadow：设置字体阴影
letter-spacing：设置字符间距/宽度
font-siz：设置字体大小
font-weight：设置字体粗细，
100~900、加粗、加粗、正常
font-family：设置字体，“谷歌雅黑”、“黑体”、“斜体”等。
颜色：设置字体颜色
2.后台相关属性
背景是一个综合属性，可以同时设置背景颜色/背景图片/背景图片是否重复/背景图片的位置
背景颜色：设置背景颜色
背景图像：设置背景图像
background-repeat：设置背景图片是否以及如何重复
backgrond-position：设置背景图片的位置
backgournd-size：设置背景图片的大小
3. 边框属性
border:2pxsolidred;--同时设置边框的长度、样式和颜色
边框宽度：2px；
边框样式：实心；
边框颜色：红色；
border-radius：设置圆角边框
4、其他性能
width：设置元素的长度
height：设置元素的高度
--------------------------------
margin：设置元素的外部距离
margin-top：设置元素的北外行间距
margin-left：设置元素的左外边距
margin-right：设置元素的右外边距
margin-bottom：设置元素的底部外边距
margin:10px20px30px40px;/*右上左下*/
margin:10px20px30px;/*上、左、右、下*/
margin:10px20px;/*上、下、左、右*/
边距：10 像素； /* 上下左右 */
--------------------------------
5.补充内容：色值形式
形式一：使用颜色名称（英文短语）
红绿蓝黑黄粉红
形式2：#六位16的补码（AABBCC==ABC）
#FF0000#00FF00#0000FF#000000#FFFF00#FFFFFF
#F00#0F0#00F#000#FF0#FFF
形式三：rgb(255,255,255)
rgb(255,0,0)rgb(0,255,0)rgb(0,0,255)
4、网页综合实战：晶涛登陆页面
详情请看代码！
发表评论