主要内容

一些常用标签和css简介

编写和上线一个简单的个人简历

css选择器，级联Cascading和继承

常用标签

<html> </html>
中间表示html代码

<head>
    <title>标题头</title>
    <style>设置样式</style>
</head>

<body>
    <h1>一级标题</h1>
    <p>段落</p>
</body>

<strong>粗体</strong>
<em>斜体</em>

<span>没有意义，作用就是设置样式</span>
例如:
<p class = "tip"><span>提示：</span>....</p>

CSS:
p.tip.span{
    font-weight: bold;
    color: #ff9955;
}

html4标准支持的颜色名：aqua(浅蓝), black, blue, fuchsia(粉色带紫), green, gray, lime(青绿色), maroon(棕色带红), navy(深蓝), olive(棕色带黄), purple, red, sliver, teal(蓝绿色), white, yellow

<q>短文本引用</q>

<blockquote>长文本引用</blockquote>

<p>换行<br></p>
<p>空格&nbsp;</p>

<hr>添加水平横线

<address>为网页加入地址信息</address>

<code>添加一行代码</code>
<pre>添加多行代码</pre>

<ul><li>无序列表</li></ul>
<ol><li>有序列表</li></ol>

<div>相当于容器，将独立的逻辑部分划分出来，用id属性来为div提供唯一的名称 </div>

<table>...</table>

<tbody>....</tbody>
表格内容很多的时候吗，会下载一点显示一点。
加上<tbody>标签后，会全部下载完后显示

<tr>...</tr>表格的一行，所以有几对tr表格就有几行

<td>...</td>表格的一个单元格，一行中包含几对，就说明一行中有几列

<th>...</th>表格头部的单元格，也就是表头

可以用css样式，给表格加上边框

<caption> 标签，为表格添加标题和摘要

例如：

<table border="1">
  <caption>Monthly savings</caption>
  <tr>
    <th>Month</th>
    <th>Savings</th>
  </tr>
  <tr>
    <td>January</td>
    <td>$100</td>
  </tr>
</table>

<a>链接到另一个页面

<a href="www.baidu.com" title="鼠标滑过显示的文本">链接显示的文本</a>

默认链接是当前浏览器窗口，加入target="_blank"即可以在新窗口打开

<img src="www.xxxx" alt="下载失败时的替换文本" title="提示文本">

<form>表单，主要和后端相关

<form method="传送方式" action="服务器文件">

<input type="text/password" name="名称" value="默认文本">

type为text的时候为文本输入框，为password的时候为密码输入框

<textarea rows="行数" cols="列数">多行输入文本</textarea>

<input type="radio/checkbox" value="值" name="名称" checked="checked" />

value是提交给服务器的值

checked是默认被选中了没有

<select><option value="下拉框">下拉框</option></select>

<input type="submit" value="提交框">

<input type="reset" value="重置框">

CSS语法

CSS样式由选择符和声明组成，声明又是由属性和值组成：

p.tip.span{
    font-weight: bold;
    color: #ff9955;
}

上述代码中，大括号之前为选择符，表示选择哪一个或多个元素，后面的为声明，表示该元素的属性和值分别是多少。

CSS代码插入方法

方法一：

<span style="color:blue">直接插入在需要样式的地方</span>

方法二:

写在head里

<style type="text/css">
p.tip.span{
    font-weight: bold;
    color: #ff9955;
}
</style>

方法三：

引入css样式文件

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

三种方法优先级：一>二>三

CSS选择器

类选择器：
- 语法：.类名{样式代码}
ID选择器：
- 语法：#名称{样式代码}
子选择器：
- 语法：.标签元素>第一代子元素{样式代码}
通用选择器：
- 语法：*{样式代码}，匹配html所有标签元素
伪类选择器：
- 语法： a:hover{样式代码}，允许给html中不存在的标签设置样式

级联cascading

多个css样式重叠的时候，ID>class>type名。如果加上了!important，则这个最大。

例如：

p{
    color:red !important;
}

主要内容

常用标签

CSS语法

CSS代码插入方法

CSS选择器

级联cascading