HTML+CSS基础

最新推荐文章于 2024-05-06 20:52:53 发布

Vera_fei

最新推荐文章于 2024-05-06 20:52:53 发布

阅读量533

点赞数

分类专栏： html+css 文章标签： html css

本文链接：https://blog.csdn.net/Vera_fei/article/details/69569404

版权

html+css 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

标题

用以描述表格内容，表格的显示位置：表格上方。

语法：
<table> <caption>标题文本</caption> <tr> <td>…</td> <td>…</td> … </tr> … </table>

摘要

摘要的内容是不会在浏览器中显示出来的。它的作用是增加表格的可读性(语义化)，使搜索引擎更好的读懂表格内容，还可以使屏幕阅读器更好的帮助特殊用户读取表格内容。
语法：
<table summary="表格简介文本">

<a>标签：链接到另一个页面

title属性的作用，鼠标滑过链接文字时会显示这个属性的文本内容。这个属性在实际网页开发中作用很大，主要方便搜索引擎了解链接地址的内容（语义化更友好）。
target=”_blank的作用：在新建浏览器窗口中打开（<a>标签在默认情况下，链接的网页是在当前浏览器窗口中打开）。

语法：
<a href="目标网址" title="鼠标滑过显示的文本" target="_blank>链接显示的文本</a>

<img>标签：为网页插入图片

1.src：标识图像的位置；
2. alt：指定图像的描述性文本，当图像不可见时（下载不成功时），可看到该属性指定的文本；
3. title：提供在图像可见时对图像的描述(鼠标滑过图片时显示的文本)；

语法：
<img src="图片地址" alt="下载失败时的替换文本" title = "提示文本">
举例：
<img src = "myimage.gif" alt = "My Image" title = "My Image" />

使用表单标签，与用户交互

表单是可以把浏览者输入的数据传送到服务器端，这样服务器端程序就可以处理表单传过来的数据。

1.action ：浏览者输入的数据被传送到的地方,比如一个PHP页面(save.php)。
2.method ：数据传送的方式get/post。
3. title：提供在图像可见时对图像的描述(鼠标滑过图片时显示的文本)；

语法：
<form method="传送方式" action="服务器文件">
举例：
<form method="post" action="save.php"> <label for="username">用户名:</label> <input type="text" name="username" /> <label for="pass">密码:</label> <input type="password" name="pass" /> </form>

form表单中的<label>

label标签不会向用户呈现任何特殊效果，它的作用是为鼠标用户改进了可用性。如果你在 label 标签内点击文本，就会触发此控件。就是说，当用户单击选中该label标签时，浏览器就会自动将焦点转到和标签相关的表单控件上（就自动选中和该label标签相关连的表单控件上）。。

1.标签的 for 属性中的值应当与相关控件的 id 属性值一定要相同。

语法：
<label for="控件id名称">
举例：

<form>
   你对什么运动感兴趣：</br>
   <lable for="run">慢跑</lable>
  <input type="checkbox" name="s1" id="run" />
  <br />
  <label for="climb">登山</label>
  <input type="checkbox" name="s2" id="climb" />
  <br />  
</form>

使用下拉列表框进行多选

在标签中设置multiple=”multiple”属性，就可以实现多选功能。

1.在 windows 操作系统下，进行多选时按下Ctrl键同时进行单击
2.在 Mac下使用 Command +单击
即可选择多个选项

举例：
<select multiple="multiple"> <option value="看书">看书</option> <option value="旅游">旅游</option> <option value="运动">运动</option> <option value="购物">购物</option> </select>

Html注释代码
语法：


CSS注释代码
语法：
/*注释语句*/

外部css样式（外联式）

把css代码写在一个单独的外部文件中，在 <head>内而非 <style>中，使用 <link>将css样式文件链接到HTML文件内

1.css样式文件名称以有意义的英文字母命名，如 main.css
2.rel="stylesheet" type="text/css" 是固定写法不可修改。
3. <link>标签位置一般写在<head>标签之内。

语法：
<link href="base.css" rel="stylesheet" type="text/css" />

设置CSS样式的三种方法的优先级比较

1.就近原则（离被设置元素越近优先级别越高）
2.外部式样式表中css样式是在的相同权值的情况下,优先级：内联式>嵌入式>外部式
3.嵌入式>外部式有一个前提：嵌入式css样式的位置一定在外部式的后面，即<link href="style.css" ...>代码在<style type="text/css">...</style>代码的前面（实际开发中也是这么写的）。

子选择器

即大于符号（>），用于选择指定标签元素的第一代子元素

使class名为food下的子元素li加入红色实线边框
语法：
.food>li{border:1px solid red;}

包含（后代）选择器

包含选择器即加入空格，用于选择指定标签元素下的后辈元素。

后代选择器与子选择器的区别：
1.子选择器（child selector）仅是指它的直接后代，或者你可以理解为作用于子元素的第一代后代；而后代选择器是作用于所有子后代元素。
2.后代选择器通过空格来进行选择，而子选择器是通过“>”进行选择。

语法：
.food>li{border:1px solid red;}

通用选择器

使用一个（*）号指定，它的作用是匹配html中所有标签元素

使用下面代码使用html中任意标签元素字体颜色全部设置为红色：

* {color:red;}

伪类选择符
它允许给html不存在的标签（标签的某种状态）设置样式，比如说我们给html中一个标签元素的鼠标滑过的状态来设置字体颜色：

a:hover{color:red;}

其实 :hover 可以放在任意的标签上，比如说 p:hover，但是它们的兼容性也是很不好的，所以现在比较常用的还是 a:hover 的组合。

分组选择符（，）
如下代码为右侧代码编辑器中的h1、span标签同时设置字体颜色为红色：

h1,span{color:red;}

它相当于下面两行代码：

h1{color:red;}
span{color:red;}

根据权值判断使用的css样式
当为同一个元素设置了不同的css样式代码时，浏览器是根据权值来判断使用哪种css样式的，权值高的将被使用为该种css样式。
p和.first都匹配到了p这个标签：

p{color:red;}
.first{color:green;}
<p class="first">三年级时，我还是一个<span>胆小如鼠</span>的小女孩。</p>

权值的规则如下：

标签的权值为1，类选择符的权值为10，ID选择符的权值最高为100
继承也有权值但很低，有的文献提出它只有0.1，可以理解为继承的权值最低

p{color:red;} /*权值为1*/
p span{color:green;} /*权值为1+1=2*/
.warning{color:white;} /*权值为10*/
p span.warning{color:purple;} /*权值为1+1+10=12*/
#footer .note p{color:yellow;} /*权值为100+10+1=111*/

层叠

层叠就是在html文件中对于同一个元素可以有多个css样式存在，当有相同权重的样式存在时，会根据这些css样式的前后顺序来决定，处于最后面的css样式会被应用。

最后 p 中的文本会设置为green，这个层叠很好理解，理解为后面的样式会覆盖前面的样式：

p{color:red;}
p{color:green;}
<p class="first">三年级时，我还是一个<span>胆小如鼠</span>的小女孩。</p>

重要性

用于为某些样式设置具有最高权值，可以使用!important来解决
!important要写在分号的前面

p 段落中的文本会显示的red红色：

p{color:red!important;}
p{color:green;}
<p class="first">三年级时，我还是一个<span>胆小如鼠</span>的小女孩。</p>

html中标签元素的分类

常用的块状元素有：

<div>、<p>、<h1>...<h6>、<ol>、<ul>、<dl>、<table>、<address>、<blockquote> 、<form>

常用的内联元素（行内元素）有：

<a>、<span>、<br>、<i>、<em>、<strong>、<label>、<q>、<var>、<cite>、<code>

常用的内联块状元素有：

<img>、<input>

块级元素

特点：
1、每个块级元素都从新的一行开始，并
且其后的元素也另起一行。（一个块级元素独占一行）
2、元素的高度、宽度、行高以及顶和底边距都可设置。
3、元素宽度在不设置的情况下，是它本身父容器的100%（和父元素的宽度一致），除非设定一个宽度。

在html中<div>、 <p>、<h1>、<form>、<ul> 和 <li>就是块级元素。设置display:block就是将元素显示为块级元素。如下代码就是将内联元素a转换为块状元素，从而使a元素具有块状元素特点：

a{display:block;}

内联元素

特点：
1、和其他元素都在一行上；
2、元素的高度、宽度及顶部和底部边距不可设置；
3、元素的宽度就是它包含的文字或图片的宽度，不可改变。

在html中<span>、<a>、<label>、 <strong> 和 <em>就是典型的内联元素（行内元素）（inline）元素。当然块状元素也可以通过代码display:inline将元素设置为内联元素。如下代码就是将块状元素div转换为内联元素，从而使 div 元素具有内联元素特点。

 div{
     display:inline;
 }

......

<div>我要变成内联元素</div>

内联块状元素
内联块状元素（inline-block）就是同时具备内联元素、块状元素的特点，代码display:inline-block就是将元素设置为内联块状元素。(css2.1新增)，<img>、<input>标签就是这种内联块状标签。

特点：
1、和其他元素都在一行上；
2、元素的高度、宽度、行高以及顶和底边距都可设置。

实例：

<style type="text/css">
a{
    display:inline-block;
    width:20px;/*在默认情况下宽度不起作用*/
    height:20px;/*在默认情况下高度不起作用*/
    background:pink;/*设置背景颜色为粉色*/
    text-align:center; /*设置文本居中显示*/
}
</style>

隐性改变display类型

当为元素（不论之前是什么类型元素，display：none除外）设置以下之一：
1、position：absolute
2、float：left或float：right

元素的display显示类型就会自动变为display：inline-block（块状元素）的方式显示，就可设置width和height了，且默认宽度不占满父元素。

a标签是行内元素，所以设置它的width是没有效果的，但是设置为position：absolute以后即可。

html代码：

<div class="container">
    <a href="#" title="">进入课程请单击这里</a>
</div>

css代码：

<style>
.container a{
    position:absolute;
    width:200px;
    background:#ccc;
}
</style>

Vera_fei

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
HTML+CSS基础

HTML+CSS中一些掌握不牢的知识点
复制链接

扫一扫

专栏目录

HTML+CSS基础

“相关推荐”对你有帮助么？