<svg xmlns="http://www.w3.org/2000/svg" style="display: none;"> <path stroke-linecap="round" d="M5,0 0,2.5 5,5z" id="raphael-marker-block" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"></path> </svg> <p></p> 讯享网
HTML指的是超文本标记语言，它是一种用来描述网页的一种语言。
超文本的含义：
（1）可以加入图片、声音、动画、多媒体内容，超出了文本的限制.
(2) 可以从一个文件中跳转到另一个文件，与世界各地的主机的文件连接（超级链接文本）.
超文本：是一种组织信息的方式，通过超链接将不同空间的文字，图片，等各种信息组织在一起，能从当前阅读的内容，跳转到超链接所指定的内容（页面，文件，锚点，应用）。
web标准的构成：主要包括结构、表现、行为三个方面。
1.用于包裹：词汇，短语等。
2.通常写在排版标签里面。
3.排版标签适用于大段文字，文本标签适用于词汇，短语。
4.通常都是行内元素。
常用
不常用
div,span区别
div标签是块级元素，拥有块级元素的特点。每对div标签里的内容都可以占据一行 ,且div标签可以通过css样式来 设置自身的宽度div标签中可以使用其他标签（行内元素、块级元素都行），比如：span标签，p标签，也可以是div标签。
span标签是行内元素，拥有行内元素的特点。span标签元素会和其他标签元素会在一行显示（块级元素除外），不会另起一行显示。span标签的宽度、高度受其本身内容控制，随着内容的宽高改变而改变；span标签无法控制外边距和内边距，只可以设置左右的外边距和内边距。且，span标签里不可嵌套块级元素。
属性
绝对路径：分为本地绝对路径，网络绝对路径
*本地绝对路径：从盘符中引入。使用liveserve打不开。（不常 用）
*网络绝对路径：复制照片网址（使用的照片很有可能有防盗链，无法使用）
2.alt
-搜索引擎通过alt知道照片内容，增加网站曝光率。
-图片加载不出来时，产生提示。
-盲人阅读器可以读取alt内容。
3.width,height
-只调节width或者height时，另一个会按照比例自行调整。
图片格式
注：使用图片路径时，需要再发起一次请求。但base64打开网页的同时可直接打开图片。
a是行内元素但是可以包裹除它本身外的任何元素。
属性
1.href:跳转。
*网址。输入需要跳转的外地网址，本地网页地址
*文件。必须是浏览器可以打开的文件。
讯享网
*锚点。点击超链接可跳转到想看的页面。
讯享网
（2）跳转到其他页面的锚点
讯享网
唤起指定引用
讯享网
有序列表ol
无序列表ul
讯享网
自定义列表dl:dt是术语，dd是对dt的描述。
讯享网
整体表格分析
表头分析
表格主体分析
脚注分析
代码
表格属性
跨行，跨列
跨行colspan，合并1-2，1-3，1-4，1-5，1-6
讯享网
跨列rowspan,合并3-1，4-1，5-1，6-1
基本结构
讯享网
常用控件
（1.）文本,密码输入框
常用属性如下：
name:数据名称
value:输入框的默认输入值
maxlength:输入框最大的输入长度
（2.）单选框
讯享网
name:数据名称。注意：单选效果，多个radio的name值要保持一致
value:提交数据值。
checked:让该单选/多选按钮默认选中
（3.）隐藏域
用户不可见的一个输入域，作用是提交表单时携带一些固定的数据。
（4.）提交
讯享网
注意：
1.button标签type的属性的默认值是submit.
2.button不要指定name值
3.input标签编写的按钮，需要使用value属性指定按钮文字。
（5.）重置
注意：
1.不可以指定name值。
2.input标签编写的按钮，需要使用value属性指定按钮文字。
(6.)普通按钮
讯享网
注意：若不写type的值，则会引起表单的提交。
（7.）文本域
属性：
1.rows:指定默认行数，影响文本域高度。
2.cols:指定默认列数，影响文本域宽度。
3，不能编写type属性，其他属性与普通文本输入一致。
（8.）下拉框
讯享网
1.name:数据名称
2.option:下拉框内的选项。若没有value属性，提交option中间的文字。若有value属性，提交value的值。
3.option标签设置selected属性，表示默认选中。
(9.)禁用表单控件
表单控件的标签设置disable即可禁用表单控件。（input,textarea,button,select,option)
(10.)label标签
可与表单控件相关联，关联之后点击文字，与之对应的表单控件就会获取焦点。
fieldset和legend
fieldset为表单控件分组，legend是分组的的标题
讯享网
讯享网
作用：可以与label标签与表单控件相关联，也可以与CSS，JAVASCRIPT配合使用，不能在 < head>,< html>,< script>,< style>,< title> 中使用。 class 给标签指定类名，用CSS指定样式。 style 给标签设置CSS样式 dir 内容的方向，值： ltr,rtl.
注意：不能在 < head>,< html>,< meta>,< script>,< style>, < title> 中使用。 title 给标签设置一个文字提示，一般超链接和图片使用较多。 lang 给标签指定语言
注意：不能在 < head>,< html>,< script>,< style>, < title>，< meta>
CSS全称：层叠样式表
讯享网
以下可省，但写了更规范。
1.最后一个声明的分号可以省略。
2.选择器与声明块之间，属性名和属性值之间均有一个空格。
注释写法/* 注释内容*/
风格：
*展开风格：开发时推荐，便于维和和调试。
*紧凑风格：项目上线时推荐，可减小文件体积。
行内样式表(内联样式）
讯享网
内部样式
讯享网
外部样式
讯享网
讯享网
样式表的优先级
行内样式>内部样式>外部样式
通配选择器
选中所有的html元素，有利于清楚样式。
讯享网
元素选择器
为某种元素统一设置样式，无法实现差异化设置。
类选择器
根据元素的class值，来选中某些元素，
讯享网
注意点
讯享网
id选择器
根据元素的id属性值，来精准的选中某个元素。
注意
讯享网
交集选择器
选中同时符合多个条件的元素
注意
讯享网
并集选择器
选中多个选择器对应的元素
注意
讯享网
选择器总结代码
讯享网
html元素之间的关系
CSS选择器之间的关系
后代选择器
作用：选中指定元素中，符合要求的后代元素
注意
讯享网
子代选择器
作用：选中指定元素中，符合要求的子元素（儿子元素）。
讯享网
注意
子代选择器和后代选择器区别：
后代选择器指定的是元素下符合条件的所有后代元素（儿子，孙子，重孙…)。但是子代选择器只会选中该元素下的第一代（儿子）。
讯享网
兄弟选择器
相邻兄弟选择器：
作用：选中指定元素后，符合条件的相邻兄弟（必须是紧挨着的下一个）元素。
讯享网
通用选择器：
作用：选中指定元素后，符合条件的所有兄弟元素。
属性选择器
作用：选中属性值符合一定要求的元素。
语法：
1.[属性值]:选中具有某个属性的元素。
2.[属性名=“值”]选中包含某个属性，且属性值等于指定值的元素。
3.[属性名^=“值”]选中包含某个属性，且属性值以指定的值开头的元素。
4.[属性名$=“值”]选中包含某个属性，且属性值以指定的值结尾的元素。
5.[属性名+=“值”]选择包含某个属性，属性值包含指定值的元素。
伪类选择器
作用：选中特殊状态的元素。
一.动态伪类
1.：link 超链接未被访问的状态。
2.：visited 超链接被访问的状态。
3.：hover 鼠标悬停在元素上的状态。
4.：active 元素激活的状态。
二.结构伪类
按照所有兄弟计算
*选中的是div的第一个儿子p元素
讯享网
*选中的是div的最后一个儿子p元素
*选中的是div的第n个儿子p元素。
讯享网
*选中的是div的偶数个儿子p元素。
*选中div中倒数第n个的儿子p元素
讯享网
*选中的是div的最后一个儿子p元素
讯享网
*选中的是div的第n个儿子p元素
*选中div中倒数第n个的儿子p元素
讯享网
*选中的是没有同类型兄弟的span元素
讯享网
*选中的是根元素
*选中的是没有内容的div元素。
讯享网
三.否定伪类
作用：排除满足括号中条件的元素
讯享网
UI伪类
1.:checked被选中的复选框或者单选按钮。
2.:enable可用表单元素（没有disable属性）
3.:disable不可用的表单元素（有disable属性）
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容，请联系我们，一经查实，本站将立刻删除。
如需转载请保留出处：https://51itzy.com/kjqy/151690.html