王宇凡_20200111王宇凡
HTML
中的扩充内容
中有基本的
网页图标
<link rel="shortcut icon" href="img/favicon.ico" />
SEO关键字优化
<!-- SEO -->
<!-- 网页作者 -->
<meta name="author" content="云创动力"/>
<!-- 关键字 -->
<meta name="keywords" content="" />
<!-- 网页描述 -->
<meta name="description" content="" />
元素间的关系呈树状。树干是父元素，分支为子元素。直接相连的称为直接元素，同一级的是同级元素，分支为树干的后代元素。
标签扩充内容
锚点a标签的使用
在代码中，使用了锚点来直接定位至所需要看的内容。锚点链接使用方法如下。
<a href="#a1">公司简介</a>
这是正常的一个a标签。点击它需要定位到公司简介的位置。只需要给所需要定位到的位置前加一个锚点a标签。这个锚点a标签没有href属性，也不需要内容。只需要name属性。如：
<a name="a1"></a>
关键点是链接的href属性值是"#"加上锚点的name值.
target属性
target:
_blank 新窗口打开链接
_parent 父页面打开链接
_self 本页面打开链接(默认)
_top 最外层页面打开
音视频标签
audio 音频标签常用属性
controls 控制按钮
autoplay 自动播放 chrome 在65之后禁止音/视频自动播放
muted 静音
preload 加载
auto 自动 默认
none 不预加载
metadata 预加载
loop 循环播放
video 视频控件常用属性
controls 控制按钮
poster 视频封面
其他 audio 标签属性也生效）
CSS
三种引入方式
1：内联样式，在标签中直接通过元素的style属性来指定元素的样式
<div style="height:100px;width:100px;"></div>
2：内部样式，在HTML文档中，通过Style元素写入CSS样式，通常写在head元素的内部。
<head>
<style type="text/css"></style>
</head>
3：外部样式，通过link标签引入外部.css文件来应用其样式，也可以使用@import从其他样式表导入样式规则。
<head>
<link rel="stylesheet" type=text/css href="style.css" />
</head>
三种优先级顺序是 ：内联样式 > 内部样式 >外部样式
选择器
1:元素选择器
如果设置 HTML 的样式，选择器通常将是某个 HTML 元素，比如 p、h1、em、a，甚至可以是 html 本身
html {color:black;}
h1 {color:blue;}
h2 {color:silver;}
2:Class选择器
一个元素可以拥有1-n个class，并且class可以重复，如
<div class="a b c "></div>
<p class="a b"></p>
<span class="a"></span>
如果需要改变三个元素的样式，只需要通过.a就可以改变以上的div,p,span元素的样式
.a{
color:red ;
}
3:属性选择器
1：直接用属性名，不需要知道属性值，有这个属性即可。
1:包含(title)的所有元素变红
*[title] {color:red ;}
2:只对有href属性的(a)标签
a[href] {color:red;}
可以根据多个属性进行选择。例如：
1:将同时拥有href和title属性的元素内容文本设置为蓝色
a[href][title] {color:red;}
2：根据具体属性值选择
除了选择拥有某些属性的元素，还可以进一步缩小选择范围，只选择有特定属性值的元素。
1:a标签中指定的链接变成红色
a[href ="www.baidu.com"] {color:red;}
也可以将多个属性值放在一起选择某个元素。
a[href ="www.baidu.com"][title="baidu"] {color:red;}
这样会把以下的第一个超链接文本变为红色。
<a href= "www.baidu.com" title="baidu">baidu</a>
<a href= "www.baidu.com" title="baike">baike</a>
<a href= "www.baidu.com" title="zhidao">zhidao</a>
还有一种属性与属性值必须完全匹配
如class属性。一个元素有多个class。
<p class="hello world">Hello World!</p>
它有两个class。如果要匹配这个元素。写成 p[class="hello"]和p[class="world"]都是不匹配的。必须写成
p[class="hello world"] {color: red;}
根据部分属性值选择
如果只需要第一个class值如何匹配呢。使用波浪号（~）
p[class~="hello"] {color: red;}
点赞
评论