HTML和CSS网页布局相关知识

最新推荐文章于 2022-01-12 22:14:11 发布

lxl1994121

最新推荐文章于 2022-01-12 22:14:11 发布

阅读量500

点赞数

本文链接：https://blog.csdn.net/lxl1994121/article/details/42084107

版权

1.HTML主体结构

<!-- ---------------------------------- -->
<!--           HTML标准代码             -->      
<!--           HTML主体结构介绍         -->  
<!-- ---------------------------------- -->
<html>
    <head>
		<base href="URL" target="WINDOW_NAME">                    <!--  URL指定浏览器中文件的绝对路径 target指向窗口 -->  
		<link rel="stylesheet" href="style.css">                          <!--  CSS外部链接 -->
		<meta http-equiv="Content_Type" content="text/html;charset=gbk">  <!-- meta指定编码和语言 -->
	</head>

	<body>                                                             <!-- 主体部分 -->
    	<div>
      		Hello everyone!!!
    	</div>
	</body>
</html>

title标记是浏览器上的标题显示。

base标记一般用于设定浏览器中文件的绝对路径，然后在网页文件中只需要写下文件的相对位置即可，一个HTML最多一个base。

link是外链标记。

meta标记的用处比较多，提供文档的关键字，作者，描述，编码和语言等多种信息,可存在多个。

title和meta主要是方便与搜索引擎打交道，提高网页被搜索引擎搜到的几率。

2.HTML字符实体

HTML本身语言所占用的字符的输出需要其他的字符串代替。

显示结果	描述	实体名称	实体编号
	空格
<	小于号	<	<
>	大于号	>	>
&	和号	&	&
"	引号	"	"
'	撇号	' (IE不支持)	'

3.HTML标签属性

属性	描述
id	标签编号
name	标签名称
class	标签样式的类选择器
style	标签样式属性

4.HTML格式标签

标签	描述
<br>	换行
<p>	换段落
<center>	居中
<pre>	保留文字在源码格式
<li>	列表项目
<ul>	无序列表
<ol>	有序列表
<hr>	水平分隔线

5.图片链接

<html>
<head>
<title>title</title>
</head>

<body>                                         
<img src="images/logo.jpg" alt="text" height="" border="">    <!-- 图片显示 -->
<a href="link.html"><img src="logo.jpg"></a>                  <!-- 图片链接 -->
</body>
</html>

6.表格

<html>
	<head>
		<title>title</title>
	</head>

	<body>                                         
	     <table>
	            <caption>table name</caption>
	            <tr>
	            	<th>head</th>
	            	<th>head</th>
	            </tr>
	            <tr>
	            	<td>content</td>
	            	<td>content</td>
	            </td>
	     </table>
	</body>
</html>

tr表示一行。

td和th 类似，th是首行，td是普通的表内容。

7.框架划分

把一个浏览器窗口划分为多个小窗口，只需要把<body>标签替换为<frameset>，然后通过<frameset>的子标签<frame>定义每一个子窗口的页面属性。

<!-- ---------------------------------- -->
<!--         文件名：index.html         -->      
<!--           窗口划分                 -->  
<!-- ---------------------------------- -->
<html>
<head>
<title>title</title>
</head>

<frameset rows="90,*" >
<frame src="top.html name="top">
<frameset cols="150,*">
<frame src="menu.html name="menu">
<frame src="main.html name="main">
</frameset>
</frameset>
</html>

<!-- ---------------------------------- -->
<!--         文件名：top.html         -->      
<!--           窗口划分                 -->  
<!-- ---------------------------------- -->
<html>
	<head>
		<title>title</title>
	</head>

	<body>
		<a href="menu1.html" target="menu">类别一</a>
		<a href="menu2.html" target="menu">类别二</a>
	</body>>
</html>

<!-- ---------------------------------- -->
<!--         文件名：menu.html         -->      
<!--           窗口划分                 -->  
<!-- ---------------------------------- -->
<html>
	<head>
		<title>title</title>
	</head>

	<body>
		<a href="main1.html" target="main">类别一</a>
		<a href="main2.html" target="main">类别二</a>
	</body>>
</html>

<!-- ---------------------------------- -->
<!--         文件名：main.html         -->      
<!--           窗口划分                 -->  
<!-- ---------------------------------- -->
<html>
	<head>
		<title>title</title>
	</head>

	<body>
		<center>manger</center>
	</body>>
</html>

8.表单

<input type="text" name="" value="" size="" maxlength="">            <!-- 输入框 -->
<input type="password" name="" value="" size="" maxlength="">        <!-- 密码 -->
<input type="submit" name="" value="">                               <!-- 提交 -->
<input type="reset" name="" value="">                                <!-- 重置 -->
<input type="button" name="" value="">                               <!-- 普通 -->
<input type="radio" name="" value="" checked>                        <!-- 单选 -->
<input type="checkbox" name="" value="" checked>                     <!-- 多选 -->
<input type="hidden" name="" value="">                               <!-- 隐藏表单 -->
<textarea name="" rows="" cols="" value="">多行文本</textarea>       <!-- 多行 -->
<select name="" size="" multiple>                                    <!-- 下拉 -->
	<option value="" selected></option>
	<option value="" ></option>
</select>