新手入——常用HTML元素大纲及基本知识

最新推荐文章于 2024-08-17 12:42:41 发布

原创最新推荐文章于 2024-08-17 12:42:41 发布 · 298 阅读

0 ·

CC 4.0 BY-SA版权

本文介绍了HTML的常用元素列表，并详细讲解了CSS的基本语法，包括选择器的使用，如标签选择器、ID选择器、类选择器，以及伪类、后代选择器、子选择器、通用选择器和群组选择器的概念。还提到了CSS样式的继承原则。

1.常用元素列表

<!--...-->	定义注释
<!DOCTYPE>	定义文档类型
<a>	定义锚
<body>	定义文档的主体
<br>	定义简单的折行
<button>	定义按钮
<caption>	定义表格标题
<center>	定义居中文本
<code>	定义计算机代码文本
<command>	定义命令按钮
<datalist>	定义下拉列表
<div>	定义文档中的节
<font>	定义文字的字体、尺寸和颜色
<form>	定义供用户输入的HTML表单
<frame>	定义框架集的窗口或框架
<h1>to<h6>	定义HTML标题
<head>	定义关于文档的信息
<header>	定义section或page的页眉
<hr>	定义水平线
<html>	定义HTML文档
<iframe>	定义内联框架
<img>	定义图像
<input>	定义输入控件
<ins>	定义被插入文本
<label>	定义input元素的标注
<li>	定义列表的项目
<link>	定义文档与外部资源的关系
<menu>	定义命令的列表或菜单
<meta>	定义关于HTML文档的元信息
<object>	定义内嵌对象
<ol>	定义有序列表
<ul>	定义无序列表
<option>	定义选择列表中的选项
<output>	定义输出的一些类型
<p>	定义段落
<pre>	定义预格式文本
<script>	定义客户端脚本
<span>	定义文档中的节
<style>	定义文档的样式信息
<sub>	定义下标文本
<sup>	定义上标文本
<table>	定义表格
<td>	定义表格中的单元
<th>	定义表格中的表头单元格
<tr>	定义表格中的行
<thead>	定义表格中的表头内容
<title>	定义文档的标题

2.CSS的基本语法

CSS代码可以放在HTML文件的<style>标签内，也可以放在网页标签的style属性内，通过<link>标签或者@import命令导入网页文档。

CSS样式由选择器（Selector）和声明(Declaration)两部分组成。

——选择器（Selector）

Selector {Propery:value}

——声明(Declaration)

body {
     font:14px;
     color:#000;
}

上面的样式定义了body元素的两个属性，即设置了页面字体大小和颜色。

3.CSS选择器

——标签选择器

<p>标签

p {
    font-size:12px;
    background:#900;
    color:090;
}

——#ID选择器

#intro {font-weight:bold;}
<p id="intro">This is a paragraph of introduction.</p>

——类选择器

<p class="important">this heading is very important.</p>
.important{color:red;}

4.伪类

——锚伪类

a:link {color: #ff000}  /*未访问的链接*/
a:visited {color: #ff000}  /*已访问的链接*/
a:hover {color: #ff000}  /*鼠标移动到链接上*/
a:active {color: #ff000}  /*选定的链接*/

5.后代选择器

后代选择器也称为包含选择器，用来选择特定元素或元素组的后代，后代选择器用两种常用的选择器，中间加一个空格来表示。其中前面的常用选择器选择父元素，后面的常用选择器选择子元素，样式最终会应用于子元素中。

<style>
.father.child {
          color:#0000cc;
}
</style>
<p class="father">
褐色
<label class="child">蓝色
<b>也是蓝色</b>
</label>
</p>

6.子选择器

该选择器区别与后代选择器的点在于它仅作用于子元素的第一个后代。通过“>”进行选择。

CSS:
#links a {color:red;}
#links > a {color:blue;}

HTML:
<p id="links">
<a href="#">教程</a>
<span><a href="#">布局实例</a></span>
<span><a href="#">2.0教程</a></span>
</p>

7.通用选择器

通用选择器用*来表示。

* {
   font-size: 12px;
  }

8.群组选择器

当几个元素样式属性一样时，可以共同调用一个声明，元素之间用逗号分隔。

p, td, li {
         line-height: 20px;
         color: #c00;
}
#main p, #slider span {
         color: #000;
         line-height: 26px;
}
.www_css_com, #main p span {
         color: #f60;
}
.text1 h1, #slider h3, .art_title h2 {
         font-weight: 100px;
}

9.继承

各个标记之间的“树”型父子关系：