第四周笔记

HTML表格

1.表格的定义

//字母 td 指表格数据(table data)
//即数据单元格的内容。
//数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等。
//可以用<th>来定义表头,
//使用<caption>表示表格标题。

2.使用colSpan和rowspan
使用colSpan属性设置单元格要跨越的表格列数。rowspan设置单元格要跨越表格的多少行。例如:

<table border="1">
	<caption>跨行跨列的表格</caption>
	<tr>
		<th>姓名</th>
		<th colspan="2">电话号码</th><!-- 跨列 -->
	</tr>
	<tr>
		<td rowspan="2">李志伟</td><!-- 跨行 -->
		<td>123123</td>
		<td>123123</td>
	</tr>
	<tr>
		<td>123123</td>
		<td>123123</td>
	</tr>
</table>

3.cellpadding属性设置边距

<table border="1"  cellpadding="30">
	<tr>
		<td>First</td>
		<td>Row</td>
	</tr>
</table>

4.cellspacing属性设置单元格间距

<table border="1" cellspacing="10">
	<tr>
		<td>First</td>
		<td>Row</td>
	</tr>   
	<tr>
		<td>Second</td>
		<td>Row</td>
	</tr>
</table>

5.background属性
background设置背景色或背景图片

6.align属性设置对齐方式

<th align="left">总计</th>

7.frame属性
设置表格周围的边框显示的方式。

8.表格标签

<table>	//定义表格		
<caption>//定义表格标题。
<th>//定义表格的表头。			
<tr>//定义表格的行。
<thead>//定义表格的页眉。
<tbody>//定义表格的主体。		
<tfoot>//定义表格的页脚。
<col>//定义用于表格列的属性。	
<colgroup>//定义表格列的组。

HTML 列表

(1)定义列表的标签

//<ol>	定义有序列表。			<ul>	定义无序列表。
//<li>	定义列表项。				<dl>	定义定义列表。
//<dt>	定义定义项目。			<dd>	定义定义的描述。

(2)无序列表

<ul type="disc">
	<li>第一个</li>
	<li>第二个</li>
</ul>

(3)有序列表

<ol>
	<li>第一个</li>
	<li>第二个</li>
</ol>

(4)自定义列表

<dl>
	<dt>第一</dt>
	<dd>第一条数据</dd>
	<dt>第二</dt>
	<dd>第二条数据</dd>
</dl>

(5)type属性
设置列表的样式。

HTML表单和输入

(1)各种表单标签

//<form>		定义供用户输入的表单				<input>		定义输入域
//<textarea>	定义文本域 (一个多行的输入控件)		<label>		定义一个控制的标签
//<fieldset>	定义域							<legend>		定义域的标题
//<select>		定义一个选择列表					<optgroup>	定义选项组
//<option>		定义下拉列表中的选项				<button>		定义一个按钮

(2)包含各种表单元素的示例

<fieldset>
<legend>表单元素:</legend>
<form>
	自行车:	<input type="checkbox" name="Bike"><br/>
	汽车:	<input type="checkbox" name="Car" checked="checked"><br/>
	男性:	<input type="radio" checked="checked" name="Sex" value="male"/><br/>
	女性:	<input type="radio" name="Sex" value="female"/><br/>
	<select name="cars">
		<option value="volvo">111</option>
		<option value="saab">222</option>
		<option value="fiat" selected="selected">333</option>
		<option value="audi">444</option>
	</select><br/>
	<textarea rows="10" cols="30">文本域</textarea><br/>
	<input type="button" value="按钮"><br/>
	<input type="submit" value="提交" /><br/>
	<input type="reset" value="还原" /><br/>
</form>
</fieldset>

HTML颜色

(1)HTML颜色名
大多数的浏览器都支持颜色名集合。仅仅有 16 种颜色名被 W3C 的 HTML4.0 标准所支持。它们是:aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white, yellow。
(2)HTML颜色值
颜色由一个十六进制符号来定义,这个符号由红色、绿色和蓝色的值组成(RGB)。每种颜色的最小值是 0(十六进制:#00)。最大值是 255(十六进制:#FF)。例如:RGB(255,255,255)或#FFFFFF表示白色。

CSS 基础语法

1.层叠次序
一般而言,所有的样式会根据下面的优先级层叠于一个新的虚拟样式表中:
1.浏览器缺省设置
2.外部样式表
3.内部样式表(位于 标签内部)
4.内联样式(在 HTML 元素内部)
因此,内联样式(在 HTML 元素内部)拥有最高的优先权,这意味着它将优先于以下的样式声明:

标签中的样式声明,外部样式表中的样式声明,或者浏览器中的样式声明(缺省值)。 CSS 语法CSS 规则由两个主要的部分构成:选择器,以及一条或多条声明。 每条声明由一个属性和一个值组成。每个属性有一个值。属性和值被冒号分开。 例如: ```java selector {declaration1; declaration2; ... declarationN } selector {property: value} ```

下面这行代码的作用是将 h1 元素内的文字颜色定义为红色,同时将字体大小设置为 14 像素。在这个例子中,h1 是选择器,color 和 font-size 是属性,red 和 14px 是值。

h1 {color:red; font-size:14px;}lector {property: value}

Css联级样表

<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
		<title>No--Title</title>
		<style type="text/css">
			h2{color:red;font-size:15px;}
			#h2{color:red;font-size:15px;}	id样式
			.h2{color:red;font-size:15px;}	类样式
		</style>
</head>

Head头里添加黑体信息,h2标签内的内容均为style里的样式

CSS Cascading Style Sheets层叠式样表

字体样式的定义规则
font-family
font-size
font-weight
font-style
font-height
line-height 行高,单位px
text-align 水平对齐方式(center,left,right,justify)
Color 可以为英文,也可以为#xxx或者#xxxxxx(十六进制)
网页字体大小通常为12和14px,可以设置的css样式(body{font-size:12px;}即可,body是标签选择器

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值