笔试准备——HTML复习三

一、HTML表格

1、定义表格:

<table style="width: 100%">
	<tr>
		<th>Firstname</th>
		<th>Lastname</th>
		<th>age</th>
	</tr>
	<tr>
		<td>Jill</td>
		<td>Smith</td>
		<td>50</td>
	</tr>
	<tr>
		<td>Eve</td>
		<td>Jackson</td>
		<td>60</td>
	</tr>
</table>

<tr>行标签;

<th>表头,默认为粗体居中;

<td>表中数据,支持所有HTML元素,比如文字、图像、列表、表格等;

width:100%,表格占据窗口大小。

2、添加边框:

table,th,td{
	border:1px solid black;
}

此时表格和表格中的每一个单元格都有边框。

3、折叠边框:

table,th,td{
	border:1px solid black;
	border-collapse:collapse;
}

border-collapse属性默认为separate。

4、添加单元格内边距padding

th,td{
     paddig:15px;
}

5、表头居左

th{
    text-align:left;
}

6、添加边框间距

即单元格间距:

table{
    border-spacing:5px;
}

如果border-collapse的值为collapse,则不会显示间距。

7、表头对应多列

<table style="width:100%">
  <tr>
    <th>Name</th>
    <th colspan="2">telephone</th>
  </tr>
  <tr>
  	<td>zrj</td>
  	<td>1826007</td>
  	<td>809</td>
  </tr>
</table>

8、表头对应多行

<table style="width:100%">
	<tr>
		<th>Name</th>
		<td>zrj</td>
	</tr>
	<tr>
		<th rowspan="2">Telephone</th>
		<td>182600</td>
	</tr>
	<tr>
		<td>7809</td>
	</tr>
</table>

9、添加表格标题

<table style="width:100%">
<caption>Contact</caption>
	<tr>
		<th>Name</th>
		<td>zrj</td>
	</tr>
	<tr>
		<th rowspan="2">Telephone</th>
		<td>182600</td>
	</tr>
	<tr>
		<td>7809</td>
	</tr>
</table>

10、为某个表格添加特殊样式

<table id="t01">
</table>
table#t01{
    width:100%;
    background-color:#f1f1c1;
}

二、HTML列表

1、无序列表

<ul>
    <li>Coffee</li>
    <li>Tea</li>
    <li>Milk</li>
</ul>

2、无序列表的样式

使用CSS的list-style-type属性:

<ul style="list-style-type:disc">
...
</ul>

可取值:

  • disc:实心圆点
  • circle:空心圆点
  • square:实心方点
  • none:无标记

3、有序列表

<ol type="1">
    <li>...</li>
    ...
</ol>

4、有序列表的type属性

type属性的取值有1、A、a、I、i分别表示列表的开头。

5、说明列表

<dl>
    <dt>Coffee</dt>
    <dd>-black hot drink</dd>
    <dt>Milk</dt>
    <dd>-white cold drink</dd>
</dl>

<dt>——名称titile

<dd>——描述discription

6、列表嵌套

<ul>
    <li>...</li>
    ...
    <li>Tea
        <ul>
            <li>Black tea</li>
            <li>Grenn tea</li>
        </ul>
    </li>
    <li>...</li>
</ul>

7、水平列表

常用来做菜单栏:

<!DOCTYPE html>
<html lang="en-US">
<head>
<style>
	ul{
		list-style-type: none;
		margin:0;
		padding:0;
		overflow:hidden;
		background-color: #333333;
	}
	li{
		float:left;
	}
	li a{
		display:block;
		color:white;
		padding:16px;
		text-decoration:none;
		text-align:center;
	}
	li a:hover{
		background-color:#111111;
	}
</style>
</head>
<body>
<ul>
	<li><a href="#">Home</a></li>
	<li><a href="#">News</a></li>
	<li><a href="#">Contact</a></li>
	<li><a href="#">About</a></li>
</ul>
</body>
</html>

css菜单栏三、HTML块级元素与内联元素

大多数元素的显示值为块级元素或内联元素。

1、块级元素

块级元素总会另起一行,并占据所在区域的全宽,块级元素包括:

  • <div>
  • <h1>-<h6>
  • <p>
  • <form>

2、内联元素

内联元素不会另起一行,只会占据其所需的空间,包括:

  • <span>
  • <a>
  • <img>

3、<div>元素

<div>元素常作为其他HTML元素的容器,本身无需属性,但支持style与class,可使用<div>来指定某块区域的样式:

<div style="background-color:black; color:white; padding:20px;">
<h2>Heading</h2>
<p>...</p>
</div>

4、<span>元素

常用来作为部分文本的容器,设置某些文本的样式:

<h1>My <span style="color:red">important<span> heading</h1>

四、HTML class属性

用来为一些元素指定相同样式:

<div class="cities">
    ...
</div>
div.cities{
    background-color:black;
    color:white;
}

用于内联元素:

<p>This is some <span class="note">important</span> text</p>
span.note{
    color:red;
}

五、HTML iframe

iframe用来显示一个子页面,例如:

<iframe src="URL" height="200" width="300"></iframe>

去除边框:

<iframe src="URL" style="border:none;"></iframe>

也可通过CSS设置边框样式:

<iframe src="URL" style="border:2px solid grey;"></iframe>

作为链接显示区域:

<iframe src="#" name="iframe_a"></iframe>

<p><a href="http://www.icoder.top/" target="iframe_a">icoder.top</a></p>

六、HTML JavaScript

<script>用来定义客户端脚本语言JavaScript。

<p id="demo"></p>

<script>
    document.getElementById("demo").innerHTML="Hello JavaScript";
</script>

JavaScript可更改页面内容:

document.getElementById("demo").innerHTML="Hello JavaScript";

可更改页面样式:

document.getElementById("demo").style.fontsize="25px";
document.getElementById("demo").style.color="red";

可更改元素属性:

document.getElementById("image").src="picture.gif";

<noscript>标签:

如果用户的浏览器禁用了JavaScript,则会显示<noscript>中的内容

<noscript>
    Sorry, your browser dose not support JavaScript!
</nosrcipt>
发帖时间: web