Html 初识2

最新推荐文章于 2024-07-24 16:51:37 发布

其实我也恋长安

最新推荐文章于 2024-07-24 16:51:37 发布

阅读量137

点赞数

分类专栏： html

本文链接：https://blog.csdn.net/ljwoainia/article/details/107962582

版权

html 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

一效果图

二代码

<!DOCTYPE html>
<html>

<head>
	<meta charset="UTF-8">
	
	<style type="text/css">
	a {color:blue}
	h1 {color:red;}
	</style>
	<title>Html 初识2</title>
</head>

<body>												  <!-- 文档主体-->
	<h1 style="text-align:center;">大标题1</h1>
	<h2 style="background-color:green;">大标题2</h2>
	<p style="font-family:arial;color:red;font-size:20px;">段落2</p>

	<p style="color:blue;margin-left:20px;">这是一个段落。</p>

	<p>一个图:<img src="D:/test.png" alt="代替图像" width="25" height="39" /></p>
	
	<a href="https://www.baidu.com" >
	<img src="D:/test2.png" width="70" height="39" />
	</a>											<!-- 将图片替换成文本-->
	
	<br/>				  <!-- 换行 相当于<br>..</br>-->
	
	<p>
	<a href="https://www.microsoft.com/" style="text-decoration:none;">本文本</a>
	 万维网链接。</p>
	
	<h4>两行三列:</h4>
	<table border="1" cellpadding="10" cellspacing="10">				<!-- border边框cellpadding边距cellspacing单元格间距-->
	<caption>这是标题</caption>
 	<tr>                		<!-- 3行-->
        <th>Header 1</th>    	<!-- 水平表头-->
        <th>Header 2</th>
        <th>Header 2</th>
        </tr>
	<tr>
  		<td>100</td>             <!-- 每行被分割为3单元格--> 
  		<td>200</td>
  		<td>300</td>
	</tr>
	<tr>
  		<td>400</td>
  		<td>500</td>
  		<td>600</td>
	</tr>
	</table>

	<h4>有序列表:</h4>
	<ol start="50">
  		<li>Coffee</li>
  		<li>Milk</li>
	</ol>

	<h4>正方形无序列表:</h4>
	<ul style="list-style-type:square">
		<li>Coffee</li>
		<li>Milk</li>
	</ul>

</body>

</html>

三笔记

表格三要素 table、tr、td 缺一不可。

<table> 标签常用属性：

border="1"   表格边框的宽度
bordercolor="#fff"   表格边框的颜色
cellspacing="5"   单元格之间的间距
width="500"   表格的总宽度
height="100"   表格的总高度
align="right"   表格整体对齐方式    (参数有  left、center、right)
bgcolor="#fff"   表格整体的背景色

<tr> 标签的常用属性:

bgcolor="#fff"    行的颜色
align="right"    行内文字的水平对齐方式    (参数有left、center、right)
valign="top"     行内文字的垂直对齐方式    (参数有top、middle、bottom)

<td>、<th> 标签的常用属性:

width="500"    单元格的宽度，设置后对当前一列的单元格都有影响
height="100"   单元格的高度，设置后对当前一行的单元格都有影响
bgcolor="fff"  单元格的背景色
align="right"  单元格文字的水平对齐方式    (参数left、center、right)
rowspan="3"    合并垂直水平方向的单元格
colspan="3"    合并水平方向单元格
valign="top"   单元格文字的垂直对齐方式    (参数middle、bottom、top)

引号里的数字和颜色代码均可以更改。

----------该笔记转自菜鸟教程 CHINA陈