目录

  • 1 引言
  • 2 常用标签
  • 2.1 基础标签
  • 2.2 格式标签
  • 2.3 表格标签
  • 2.4 表单标签
  • 2.5 列表标签
  • 2.6 其他标签

1 引言

静态网页技术

  • 静态网页开发技术包括HTML、CSS、JavaScript。
  1. HTML用于搭建基础网页、展示页面内容。
  2. CSS用于美化页面、布局页面。
  3. JavaScript用于控制页面元素、让页面有一些动态效果，如轮播图等等。

HTML

  • HTML是Hyper Text Markup Language的简称，表示“超文本标记语言”。
  1. 超文本：用超链接的方法，将各种不同空间的文字信息组织在一起的网状文本。
  2. 标记语言：由标签(<标签名称>)构成的语言。 如 html，xml等都是标记语言。
  • 注：标记语言不是编程语言，它不含逻辑性，写出的代码按顺序执行，不像编程语言有if-else判断等。
  1. 入门代码
<!DOCTYPE html>
<html>
	<head>
		<title>HelloWorld</title>
	</head>
	<body>
		Hello World ! ! !
	</body>
</html>

2 常用标签

2.1 基础标签

标签

含义

备注

<!-- -->

注释

h

标题

h1~h6

p

段落

br

换行

hr

水平线

2.2 格式标签

标签

含义

备注

b

加粗

i

斜体

u

下划线

center

居中

常用属性：face(字体)、color、size

font

字体

2.3 表格标签

标签

含义

备注

table

表格

常用属性：width、border、bgcolor、align

tr

行

td

列

colspan：跨列、rowspan：跨行

thead

页眉

tbody

主题

tfoot

页脚

th

表头

一般浏览器会加粗

caption

表格标题

2.4 表单标签

标签

含义

备注

form

表单

method常用的两种方式：get、post

input

输入

type属性：text(placeholder)、password、radio、checkbox、file等

label

标签

button

按钮

submit、button、image等

textarea

多行文本框

cols：指定列数，即每行几个字符

rows：指定行数

select

下拉框

option

选择列表中选项

2.5 列表标签

标签

含义

备注

ul

无序列表

ol

有序列表

li

列表项

2.6 其他标签

标签

含义

备注

img

图片

./ 表示当前目录，../ 表示上一级目录

a

超链接

div

块级标签

占一行

span

内联标签

不换行

<!-- 注：重连接有两种功能：(1)可以被点击，样式发生改变；(2)点击后跳转到href指定的url -->
<!-- 需求：保留上面第一种功能，去掉第二种功能 -->
<a href="http://www.baidu.com/">点我1</a>
<a href="javascript:void(0);">点我2</a>