网页制作

HTML基础

基本标签

HTML基本结构

1
2
3
4
5
6
7
8
9
<!DOCTYPE html>
<html>
    <head>
        ...
    </head>
    <body>
        ...
    </body>
</html>

标题

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
<--!一级标题-->
<h1>
    ...
</h1>
    
<--!二级标题-->
<h2>
    ...
</h2>
    
<--!三级标题-->
<h3>
    ...
</h3>
    
<--!四级标题-->    
<h4>
    ...
</h4>
    
<--!五级标题-->    
<h5>
    ...
</h5>
    
<--!六级标题-->    
<h6>
    ...
</h6>

注释

1
<--!注释-->

空格

1
&npsp

页面标题

1
<title>...</title>

文本

1
<p>...</p>

换行

1
<br/>

水平线

1
<hr/>

表格

有序列表( P46 )

1
2
3
4
<ol>
    <li>...</li>
    <li>...</li>
</ol>

无序列表( P48 )

1
2
3
4
<ul>
    <li>...</li>
    <li>...</li>
</ul>

定义列表(用的较少)( P53 )

1
2
3
4
<dl>
    <dt>名词</dt>
    <dd>描述</dd>
</dl>

表格结构( P57 )

1
2
3
4
5
6
<table>
    <tr>
    	<td>...</td>
        <td>...</td>
    </tr>
</table>

表头单元格(会以粗体、居中显示)

1
2
3
4
5
6
<table>
    <tr>
    	<th>...</th> <!--表头单元格-->
        <td>...</td>
    </tr>
</table>

表格标题

1
2
3
4
5
6
7
<table>
    <caption>标题</caption>
    <tr>
    	<td>...</td>
        <td>...</td>
    </tr>
</table>

合并行( P65 )

1
<td rowspan="行数">...</td>

合并列( P66 )

1
<td colspan="列数">...</td>

图片

图片引用( P68 )

1
<img src = "路径"/>

超链接

超链接( P79 )

1
2
3
4
<a href = "地址" target="..." />
<!--target对应打开窗口方式，属性有_self、_blank、_parent、_top-->
	<img src="..." alt="..." title="..."/><!-- alt -> 搜索引擎  title -> 用户 -->
</a>

锚点链接( P83 )

1
2
3
4
<a href="#某个id">...</a>
<div id="某个id">
    ...
</div>

表单

表单标签存放( P89 )

1
<from>表单</from>

input标签(自闭和)( P91 )

1
<input type="表单类型"/>

单行文本框( P92 )

1
2
<input type="text" value="..." size="..." maxlength="..."/>
<!--value:默认值 size:文本框长度 maxlength:最多输入-->

密码文本框(与 text 同有 value、size、maxlength属性)( P94-97 )

1
<input type="password" value="..." size="..." maxlength="..."/>

单选框( P97 )

1
2
3
<input type="radio" name="A" value="B"/>B
<input type="radio" name="A" value="C"/>C
<!--name值相同才是单选-->

复选框( P101 )

1
2
<input type="checkbox" name="A" value="B"/>B
<input type="checkbox" name="A" value="B" checked/>B <!--默认选中-->

普通按钮( P103 )

1
<input type="botton" value="..."> <!--value:按钮上文字-->

提交按钮( P104 )

1
<input type="submit" value="..."> <!--value:按钮上文字-->

重置按钮( P105 )

1
2
<input type="reset" value="..."> <!--value:按钮上文字-->
<!--对该按钮所在的form内的表单元素生效-->

多行文本框( P109 )

1
<textarea rows="行数" cols="列数" value="取值">默认内容</textarea>

下拉列表( P109 )

1
2
3
4
<select>
    <option>...</option>
    <option selected>...</option> <!--默认选中-->
</select>

框架结构

通过使用框架，可以在同一个浏览器窗口中显示不止一个页面。

垂直框架

1
2
3
4
5
6
7
8
9
10
11
12
<html>

<frameset rows="*,*,*">

  <frame src="/example/html/frame_a.html">
  <frame src="/example/html/frame_b.html">
  <frame src="/example/html/frame_c.html">

</frameset>

</html>

水平框架

1
2
3
4
5
6
7
8
9
10
11
<html>

<frameset cols="*,*,*">

  <frame src="/example/html/frame_a.html">
  <frame src="/example/html/frame_b.html">
  <frame src="/example/html/frame_c.html">

</frameset>

</html>

混合框架嵌套

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<html>

<frameset rows="50%,50%">

<frame src="/example/html/frame_a.html">

<frameset cols="25%,75%">
<frame src="/example/html/frame_b.html">
<frame src="/example/html/frame_c.html">
</frameset>

</frameset>

</html>

其他

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
文本标签 P29
块元素 P38
自闭和标签 P37-38
行内元素 P40
特殊符号 P42
type(列表项符号) P47
绝对/相对路径 P72-74
图片格式 P75
target属性 P81
内部链接 P82
from属性 P90-91
input属性 P91
密码文本框属性 P96
下拉列表属性 P111
option属性 P113

CSS基础

CSS引入

CSS引入( P122-125 )

1
2
3
4
<!--外部样式表-->
<link rel="stylesheet" type="text/css" herf="路径"/>
<!--内部样式表-->
<style type="text/css" >...</style>

元素的id和class

id属性( P126 )

1
2
3
4
5
6
<div id="content">
    ...
</div>
<p id="content">
    ...
</p>

class属性( P127 )

1
2
3
4
5
6
<div class="content">
    ...
</div>
<p class="content">
    ...
</p>

CSS选择器

元素选择器( P129-130 )

1
2
3
4
5
6
<style type="text/css">
    div{color:red;}
</style>
<div>
    ...
</div>

id选择器( P130-131 )

1
2
3
4
5
6
<style type="text/css">
    #lvye{color:red;}
</style>
<div id="lvye">
    ...
</div>

class选择器( P132-133 )

1
2
3
4
5
6
<style type="text/css">
    .lvye{color:red;}
</style>
<div class="lvye">
    ...
</div>

后代选择器( P134-135 )

1
2
3
4
5
6
7
8
9
10
11
12
<style type="text/css">
    #father1 div{color:red;}
    #father2 span{color:blue;}
</style>
<div id="father1">
    <div>
        ...
    </div>
</div>
<div id="father2">
    <span>...</span>
</div>

群组选择器( P135-138 )

1
2
3
4
5
6
7
8
9
<style type="text/css">
    p,div{color:red;}
</style>
<div>
    ...
</div>
<p>
    ...
</p>

盒子模型( P214 )

1
2
3
4
5
6
7
8
9
10
11
12
<style type="text/css">
    div{
        display:inline-block;/*将块元素转换为inline-block元素*/
        padding:20px;
        margin:40px;
        border:2px solid red;
        background-color:#ffdead;
    }
</style>
<div>
    ...
</div>

其他

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
CSS概念 P122
选择器概念 P127
字体样式 P139
CSS注释 P148
文本样式 P152
边框样式 P163
列表样式 P171
表格样式 P177
图片样式 P183
背景样式 P192
超链接样式 P203
鼠标样式 P208
浮动布局 P230
定位布局 P240
CSS常用属性 P252
WSC 十六色 P254
School Learning
网页制作
https://equinox-shame.github.io/2022/03/14/网页制作/
作者
梓曰
发布于
2022年3月14日
许可协议