HTML|基础篇（二）
程序员文章站
2022-04-24 16:28:30
...
HTML|基础篇（二）
<a>标签基础的扩展
<a>超链接标签默认蓝色带下划线样式 设置不带下划线样式
//鼠标没有放上去的样式，不带下划线
<a>超链接标签默认蓝色带下划线样式 设置不带下划线样式
//鼠标没有放上去的样式，不带下划线
a:link{
text-decoration:none;
}
a:hover{
color:red;
} 通过<a>标签跳到自身页面的某个内容点,引用id跳到
<a href="#content"></a>
.......
<a id="content"></a>
<a href="#content"></a>
.......
<a id="content"></a>
<a>超链接不仅可以设置文本链接，也可是设置图片链接
<a>超链接跳转窗口的五种方式，
设置target属性与值默认值_self
一、在本窗口自身的框架集打开， target="_self"
二、在新的窗口打开； _blank
三、在父类的框架集中打开 _parent
四、在整个窗口打开 _top
设置target属性与值默认值_self
一、在本窗口自身的框架集打开， target="_self"
二、在新的窗口打开； _blank
三、在父类的框架集中打开 _parent
四、在整个窗口打开 _top
<a href="www.baidu.com" target="_top"></a>五、framename 指定框架集打开
发送电子邮件
<a href="mailto:邮件地址？subject=邮件主体&body=邮件的主体内容" rel="nofollow"></a>
抄送：cc ，密送： bcc
<a href="mailto:邮件地址？cc=抄的电子邮件地址" rel="nofollow"></a>
<a href="mailto:邮件地址？subject=邮件主体&body=邮件的主体内容" rel="nofollow"></a>
抄送：cc ，密送： bcc
<a href="mailto:邮件地址？cc=抄的电子邮件地址" rel="nofollow"></a>
html样式CSS
CSS的简单介绍
CSS的简单介绍
CSS ： 指层叠样式表，语法 : 选择器 声明 属性 属性值 分号结束 ，多个属性之间分号分开
例:body{
color:red;
text-anlign:center;
}
CSS可以定义在html文档的头部head内；也可以定义在行内样式，
当你需要定义大量的CSS样式时通过前端资源模块的打包工具打包成CSS文件然后link引用,定义在html头部head
例:body{
color:red;
text-anlign:center;
}
CSS可以定义在html文档的头部head内；也可以定义在行内样式，
当你需要定义大量的CSS样式时通过前端资源模块的打包工具打包成CSS文件然后link引用,定义在html头部head
插入CSS样式的三种方式：内部样式，行内样式，外部样式
头部定义即内部样式
<head>
<style>
body{
color:red;
text-anlign
}
</style>
</head>
行内定义
<body style="color:red; text-align:center;"></body>
外部引用样式
<link rel="stylesheet" type="text/css" href=".../外部CSS样式的路径/myCss.css">
<head>
<style>
body{
color:red;
text-anlign
}
</style>
</head>
行内定义
<body style="color:red; text-align:center;"></body>
外部引用样式
<link rel="stylesheet" type="text/css" href=".../外部CSS样式的路径/myCss.css">
CSS常用的选择器：
id选择器： #id名{属性：值;...} 例： #div{color:red; } <div id="div">内容.....<div> id名不要以数字开头，数字开头的id在某些浏览器不支持
类选择器: .类名{属性：值;...} 例： .class{color:red; } <div class="class">内容.....<div> 类名也不要以数字开头
元素选择器: 元素名{属性：值;...} 例： p{color:red;} 所有的p段落标签的文本变成红色
通配选择器： *{属性：值;...}
id选择器： #id名{属性：值;...} 例： #div{color:red; } <div id="div">内容.....<div> id名不要以数字开头，数字开头的id在某些浏览器不支持
类选择器: .类名{属性：值;...} 例： .class{color:red; } <div class="class">内容.....<div> 类名也不要以数字开头
元素选择器: 元素名{属性：值;...} 例： p{color:red;} 所有的p段落标签的文本变成红色
通配选择器： *{属性：值;...}
<style>
*{
margin: 0;
padding: 0;
}
body{
text-align: center;
}
#div{
color: red;
}
</style> 组合写法
子集选择器: #div>p{属性：值;...} 例: #div>p{color:red; } <div id="div"><p>内容.....</p><div>
同胞选择器：h1+p{属性：值}
关联选择器：两个以上的选择器组合，优先级等于权重之和
群组选择器：相当于属性相同的选择器并列写在一起
不常见选择器：伪选择器
子集选择器: #div>p{属性：值;...} 例: #div>p{color:red; } <div id="div"><p>内容.....</p><div>
同胞选择器：h1+p{属性：值}
关联选择器：两个以上的选择器组合，优先级等于权重之和
群组选择器：相当于属性相同的选择器并列写在一起
不常见选择器：伪选择器
权重标签： html文档中用来突出关键字或主题的标签，例<strong><b><em><i><h1>--<h6><ins><del><u>等
CSS中权重的计算与比较
第一步比较: id class html 选择器的数量
第二步： 如果权重一样，后面出现的会覆盖前面的
第三步： 看选择器是否选中目标元素，如果没有选中则权重为0
第四步：如果都没有选择目标元素，则谁近就听谁
第一步比较: id class html 选择器的数量
第二步： 如果权重一样，后面出现的会覆盖前面的
第三步： 看选择器是否选中目标元素，如果没有选中则权重为0
第四步：如果都没有选择目标元素，则谁近就听谁