HTML与CSS学习笔记
---恢复内容开始---
-
<a href="http://www.jisuanke.com" title="点击进入计蒜客" target="_blank">计蒜客</a>
title:当鼠标移动到“计蒜客”上时，显示文本提示 target:点击链接后打开一个新的标签页
-
<q>千金散尽还复来——李白</q>
result:q为短文本引用标签，会自动加上双引号。
- <em></em>:斜体；
- <strong></strong>:粗体；
- <br>：换行； <hr>:下划线（自闭和标签）
-  :空格
- 表格样例：
<table> <tr> <th>姓名</th> <th>班级</th> <th>分数</th> </tr> <tr> <td>小明</td> <td>高一一班</td> <td>89分</td> </tr> <tr> <td>李雷</td> <td>高一二班</td> <td>90分</td> </tr> </table>
-
男：<input type="radio" value="m" name="gender"> 女：<input type="radio" value="f" name="gender">
单选框：name属性值相同
-
看书<input type="checkbox" value="book" name="hobby">、 足球<input type="checkbox" value="soccer" name="hobby">、 游泳<input type="checkbox" value="swim" name="hobby">
复选框（checked = "checked"）
-
<select name="money"> <option value="500" selected="selected">五百元</option> <option value="5000">五千元</option> <option value="50000">五万元</option> <option value="500000">五十万元</option> </select>
下拉选框,selected意味着默认显示的选项。表单上传给服务器的是value和name
-
<input type="submit" value="确定" name="submit"> <input type="reset" value="重置" name="reset">
提交按钮和重置按钮
<a href="http://www.jisuanke.com" title="点击进入计蒜客" target="_blank">计蒜客</a>
---恢复内容结束---
-
<a href="http://www.jisuanke.com" title="点击进入计蒜客" target="_blank">计蒜客</a>
title:当鼠标移动到“计蒜客”上时，显示文本提示 target:点击链接后打开一个新的标签页
-
<q>千金散尽还复来——李白</q>
result:q为短文本引用标签，会自动加上双引号。
- <em></em>:斜体；
- <strong></strong>:粗体；
- <br>：换行； <hr>:下划线（自闭和标签）
-  :空格
- 表格样例：
<table> <tr> <th>姓名</th> <th>班级</th> <th>分数</th> </tr> <tr> <td>小明</td> <td>高一一班</td> <td>89分</td> </tr> <tr> <td>李雷</td> <td>高一二班</td> <td>90分</td> </tr> </table>
-
男：<input type="radio" value="m" name="gender"> 女：<input type="radio" value="f" name="gender">
单选框：name属性值相同
-
看书<input type="checkbox" value="book" name="hobby">、 足球<input type="checkbox" value="soccer" name="hobby">、 游泳<input type="checkbox" value="swim" name="hobby">
复选框（checked = "checked"）
-
<select name="money"> <option value="500" selected="selected">五百元</option> <option value="5000">五千元</option> <option value="50000">五万元</option> <option value="500000">五十万元</option> </select>
下拉选框,selected意味着默认显示的选项。表单上传给服务器的是value和name
-
<input type="submit" value="确定" name="submit"> <input type="reset" value="重置" name="reset">
提交按钮和重置按钮
CSS部分
<html> <head> <style> p {text-indent: 2em;} p {line-height: 1.5em;} p {text-align: right;} </style> </head> <body> <h1>老王的爱情</h1> <p id="first">为什么要那么痛苦地忘记一个人，时间自然会使你忘记。如果时间不可以让你忘记不应该记住的人，我们失去的岁月又有甚么意义?</p> <p id="second">爱情如果不落到穿衣、吃饭、睡觉、数钱这些实实在在的生活中去，是不会长久的。<span>真正的爱情</span>，就是不紧张，就是可以在他面前无所顾忌地打嗝、放屁、挖耳朵、流鼻涕；真正爱你的人，就是那个你可以不洗脸、不梳头、不化妆见到的那个人。</p> </body> </html>
- CSS嵌入的三种方式分别 为：内联式、嵌入式、外部式，其优先级为：内敛>嵌入>外部。
-
p {font-size: 12px;} // 标签选择器 .bac_blue {background-color: blue;} //类选择器 #first {background-color: green;} //id选择器 -
#food > div {border: 1px solid red;} //子选择器，只作用于第一代后代 #food div {color: blue;} //后代选择器，作用于所有后代
-
a:hover {color: green;} 伪类选择器 * {color: red;} 通用选择器 - 文字排版：
<html> <head> <style> body {font-family: "宋体";} #first {font-family: "Microsoft Yahei";} h1 {font-size: 40px; color: red;} #first span {font-style: italic;} #second span {font-weight: bold;} h1 {text-decoration: underline;} </style> </head> <body> <h1>老王的爱情</h1> <p id="first">为什么要那么痛苦地忘记一个人，时间自然会使你忘记。如果时间不可以让你忘记不应该记住的人，我们<span>失去的岁月</span>又有甚么意义?</p> <p id="second">爱情如果不落到穿衣、吃饭、睡觉、数钱这些实实在在的生活中去，是不会长久的。<span>真正的爱情</span>，就是不紧张，就是可以在他面前无所顾忌地打嗝、放屁、挖耳朵、流鼻涕；真正爱你的人，就是那个你可以不洗脸、不梳头、不化妆见到的那个人。</p> </body> </html>
-
<html> <head> <style> p {text-indent: 2em;} em代表一个字体宽度，indent意思是缩进 p {line-height: 1.5em;} p {text-align: right;} </style> </head> <body> <h1>老王的爱情</h1> <p id="first">为什么要那么痛苦地忘记一个人，时间自然会使你忘记。如果时间不可以让你忘记不应该记住的人，我们失去的岁月又有甚么意义?</p> <p id="second">爱情如果不落到穿衣、吃饭、睡觉、数钱这些实实在在的生活中去，是不会长久的。<span>真正的爱情</span>，就是不紧张，就是可以在他面前无所顾忌地打嗝、放屁、挖耳朵、流鼻涕；真正爱你的人，就是那个你可以不洗脸、不梳头、不化妆见到的那个人。</p> </body> </html>
- CSS简写：你一定还记得在讲盒模型时，外边距（margin）、内填充（padding）和边框（border）设置四个方向的边距是按照顺时针方向设置的：上右下左。
当上右下左四个方向的取值都相同，比如这样：
margin: 20px 20px 20px 20px;可缩写为：
margin: 20px; - CSS布局模型：流动模型、浮动模型、层模型地位
