由于typora非代码区HTML格式冲突，标签不再加</>

HTML基本结构

HTML结构

1
2
3
4
5
6
7
8
9
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
	...
	</head>
	<body>
	...
	</body>
</html>
  • html标签的作用是向浏览器指明网页的开始和结束，代码声明网页使用的是W3C组织的XHTML标准
  • head标签内部只能定义一些特殊内容

通常放置和网页相关信息，如title、meta等不会直接显示在网页上的标签信息

  • body标签是背部编写绝大多数标签代码

head标签

title标签：唯一作用就是定义网页的标题，显示在浏览器上栏的标题

meta标签：又称“元信息标签”，一般定义页面的关键字和描述信息有助于搜索引擎搜索界面

  • name属性
属性 说明
keywords 网页关键字（可多个用英文逗号隔开）
description 网页描述
author 网页作者
copyright 版权信息
  • http-equiv属性
    • 定义页面使用的语言
    • 定义页面自动刷新跳转
1
2
3
4
5
6
<head>
    <meta http-equiv="content-type" content="text/html;charset=gb2312"/>
    <!--告诉浏览器该页面使用的字符集是国际汉子码-->
    <meta http-equiv="refresh" content="秒数;url=网址";/>
    <!--告诉浏览器经过多少秒刷新（整数）跳转至网址-->
</head>

link标签：引用外部CSS样式

style标签：用于定义CSS样式

script标签：用于定义JavaScript代码

段落与文字

常用总结

标签 说明
h1~h6 标题
p 段落
br 换行
hr 水平线
div 分隔
span 区域
strong 加粗文本
em 斜体文本
sup 上标
sub 下标
small、big 用于版权声明
s 删除线
  • 标题元素根据需要再用，对于网页的搜索引擎优化极其重要
  • p标签会自动换行，段落与段落之间有一定的缝隙
  • br给文字换行不会出现缝隙，为自闭合标签

特殊符号

特殊符号 代码
空格 &nbsp;
双引号（英） &quot;
左单引号 &lsquo;
右单引号 &rsquo;
乘号 &times;
除号 &divide;
小于号 &it;
大于号 &gt;
与符号 &amp;
长破折号 &mdash;
竖线 &#124;

想在网页中显示特殊符号有两种方法：

  • 直接在网页中输入该特殊符号
  • 在网页中输入该特殊符号对应的HTML代码

自闭合标签

HTML标签分为两类：一般标签和自闭合标签

一般标签：有开始和结束符号，标签内部可以插入其他标签或者文字

自闭和标签：没有结束符号，只能定义自身的一些属性

常见自闭和标签，其他的都是一般标签

自闭和标签 作用
mata 信息
link 连接外部文件
br 换行
hr 水平线
input 表单
img 图像

行内元素和块元素

行内元素 块元素
与其他元素位于一行 独占一行
可以容纳行内元素但不可容纳块元素 容他其他行内元素和块元素
常见行内元素 常见块元素
strong、em、s、u、a、span、img、input h1~h6、p、br、hr、div、span

列表

注意：在CSS中改用list-style-type定义列表项样式，type属性弃用

有序列表

从<ol>开始到</ol>结束，中间的列表项是<li>标签内容

type属性：更改列表项序号

属性 序号类型
1 数字1、2、3
a 小写英文字母
A 大写英文字母
i 小写罗马字母
ii 大写罗马字母

无序列表

从<ul>开始到</ul>结束，中间的列表项是<li>标签内容

注意：对于ul元素内部的子元素只能是li，而不能是其他的元素。对于ul内部的文本，也只能是在li元素内添加，而不能在li元素外部添加

type属性：更改列表项样式

属性 序列类型
disc 默认实心圆
circle 空心圆
square 实心正方形

定义列表

在实际开发用的不多，一般分为两类：定义条件和定义描述

  • dl定义列表的开始和结束
  • dt后面添加要解释的对象
  • dd后面添加改名词的具体解释（会自动缩进文本）
1
2
3
4
5
6
7
<body>
    <dl>
        <dt>定义名词</dt>
        <dd>定义描述</dd>
        <!--可多对dt和dd-->
    </dl>
</body>

表格

因为基本被淘汰所以不再做笔记了

基本构成

  • table标签（表格）、tr标签（行）、td标签（单元格）
  • tr和td标签必须放在<table>和<table/>标签对内才有效
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<body>
    <table>
        <caption>表格标题</caption>
        <!--表头-->
        <thead>
            <tr>
                <th>一个表头单元格</th>
            </tr>
        </thead>
        <!--表身-->
        <tbody>
            <tr><!--一行的开始-->
            	<td>一个单元格</td>
        	</tr><!--一行的结尾-->
        </tbody>
        <!--表脚-->
       <tfoot>
        </tfoot>
        <tr>
            <td></td>
        </tr>
    </table>
</body>

默认情况下表格是没有边框的。table布局已经完全被淘汰，往后改用DIV+CSS布局

图像

img标签

在HTML中图像使用<img/>自闭合标签并掌握三个属性

属性 说明
src 图像文件地址
alt 图片显示不出来是提示的文字
title 鼠标移动到图片上的提示文字

src和alt两个属性必不可少，title可有可无

图像标签

绝对路径：就从根目录开始一直写到引用对象

相对路径：从当前文件和要引用文件的共同位置往后开始写,开头用../

图片格式

  • JPG：网页、相册一般常用
  • PNG：转为Web设计的图像，可以悬浮在其他页面文件和图像之上，并且体积小无损压缩保证了网页的打开速度，小的logo图片首选
  • GIF：效果差但是动态

超链接

外部链和内部链接(锚点链接)

a标签

对于无论是图片还是文字，通通放在<a>和<a/>中就可以了（行内元素）

链接地址放在href里，如果是内部文件之间链接就是路径引用

<a href="www.baidu.com" target="_blank"><img/></a>

a标签只用掌握target属性（控制目标窗口打开方式）

属性 语义
_self 默认方式，当前窗口打开
_blank 在全新的空白窗口打开
_top 顶层的框架中打开
_parent 当前框架打开

只用记前两个，别忘了加上’_’

锚点链接

一种内部链接，不过他的链接对象是当前页面内部的某个区块，可以方便用户查看较长的文档中的内容

定义：目标锚点的id和超链接部分

1
2
3
4
5
6
7
8
9
10
11
12
13
<body>
    <div>
        <a href="#music">音乐</a>
        <a href="#movie">电影</a>
    </div>
    ...<!--一堆其他的内容-->
    <div id="music">
        ...
    </div>
    <div id="movie">
        ...
    </div>
</body>

简单的很，就是注意链接对象必须是id

表单

最常用最核心的部分了，作用就是在客户端收集用户的信息交给服务器处理

常说的表单就是指文本框、按钮和下拉列表等的总称

form标签

就和表格类似，表格的内容大放在<table>和<table/>中，那表单的内容就放在<form>和<form/>中

值的注意的是不是所有的表单对象都要放在form标签对中，需要向后端提交的数据放在form标签中，若是不需要的话没必要放

属性

和head一样比较抽象、缺乏操作性，和后端有关，其中提交action属性和传送方法method属性不记了被淘汰了，还有编码方式enctype属性用的少也不记了

  • 表单名称name属性

为了区分同一个网页之间不同的表单得给他们取个名字防止在提交后在后端出现混乱

  • 目标显示方式target属性
属性 语义
_self 默认方式，当前窗口打开
_blank 在全新的空白窗口打开
_top 顶层的框架中打开
_parent 当前框架打开

和超链接的target属性一样

表单对象

表单的value属性值就是用来方便后端传数据的，很重要的

使用input标签表单

自闭合标签，表单类型不同在于type属性不同取值

单行文本框text

作用：用户登录注册

<input type="text" value="" size="" maxlength=""/>

属性 说明
value 定义文本框默认值，也就是文本框内初始内容
size 定义文本框的长度，以字符为单位
maxlength 设置文本框中最多可以输入的字符数
密码文本框password

作用：遮住输入字符

和单行文本框用法一样

单选按钮radio

作用：单选按钮只能从选项列表中选择一项，选项与选项之间是互斥的

属性 说明
name 单选按钮所在组名
value 单选按钮的取值

注意：两个属性缺一不可，同一个问题的不同单选之间的name必须相同，不然做不到排斥

1
2
3
4
5
<form>
    性别：
    <input type="radio" name="question1" value="boy">男<br/>
    <input type="radio" name="question2" value="girl">女
</form>

单选按钮也可以像下面复选框的选项一样选择设定checked属性

复选框checkbox

作用：可以从选项列表中选择多个选项

属性 说明
checked 是否选中
value 按钮的取值

checked=“checked"加上按钮默认是选中的，不加就是未选中的

1
2
3
4
5
<form>
    最爱的歌曲：
    <input id="checkbox1" type="checkbox" checked="checked" value="music1"/><label for="checkbox1">歌曲1</label><br/>
    <input id="checkbox2" type="checkbox" checked="checked" value="music2"/><label for="checkbox2">歌曲2</label>
</form>

注意：复选框必须用label标签，具体原因和JavaScript

表单按钮

HTML中按钮分为三种：普通按钮button、提交按钮submit、重置按钮reset

普通按钮button

<input type="button" value="普通按钮取值" onclick="JavaScript脚本程序"/>

提交按钮submit

作用：提交按钮submit真正的用处是把表单内容提交给后台服务器处理，和后端有关

<input type="submit" value="提交按钮的取值"/>

重置按钮reset

作用：重置按钮reset可以看做是一种具有特殊功能的普通按钮，可以清除用户在用户在当前表单中输入的信息，对当前表单之外的表单无影响

<input type="reset" value="重置"/>

隐藏域hidden

<input typde="hidden" value="10">

作用：一些前端传向后端的数据不想让客户看见可以通过隐藏域遮盖让这些数据不在浏览器中显示

前端用不到，后端常见。虽然看不见数据但是查看HTML代码还是会看到的，所以不能用来隐藏敏感信息（手机号、密码之类的）

文件域file

作用：网盘、邮箱等文件的上传

注意：再使用文件域的时候必须在form标签中说明编码方式``enctype="multipart/form-data"，否则服务器不能正常接收文件

1
2
3
<form name="myform" enctype="multipart/form-data">
    <input type="file"/>
</form>

textarea多行文本框

单行文本框只能输入一行信息，多行文本框就输入多行信息，但是不再用inut标签而是textarea标签

<textarea rows="函行数" cols="列数">默认内容<textarea/>

下拉列表select

作用：节省页面空间的选择方式，单击下拉菜单打开菜单后才会看到全部的选项

特点：和列表类似，由select和option两个标签配合使用

1
2
3
4
5
<select>
    <option>HTML</option>
    <option>CSS</option>
    <option>jQuary</option>
</select>
slelect标签属性
属性 说明
multiple 可选属性，也只有这一个属性。默认情况下列表只能选择一项，当设置为mutiple="mutiple"时下拉列表可以选择多项
size 下拉列表展开之后可见列表项的数目

<selsect multiple="multiple" size=""><select/>

option标签属性
属性 说明
value 选项值
selected 初始是否选中

<option value="选项值" selected="selected"><option/>

selected和单选按钮radio的checked属性是一样的意思

多媒体

插入音频、视频和Flash

作用：对于在线的音频和视频常用HTML5新增的自闭和标签embed实现。src属性写明引用路径就可以了。

<embed src="">

embed标签会有一个放有几个简单功能的播放界面

支持格式：mp4、avi、rmvb等等主流视频格式，不行的话就转码

插入背景音乐

在embed标签的基础上多了几个属性（还是src写明引用地址）

属性 说明（取值为true/false）
hidden 是否显示播放器
autostart 是否一进页面自动播放
loop 是否循环播放

HTML5还新增了audio、video标签等用于多媒体开发的标签

框架

作用：HTML5新增一个标签iframe浮动框架（它是在浏览器窗口中嵌套的子窗口），iframe框架可以完全由设定者定义高度和宽度，并且可以放置在网页的任何位置，极大地扩展框架页面的应用范围

<iframe src="源文件地址" width="浮动框架的宽" height="浮动框架的高" scrolling="滚动条设置">

在普通框架结构中，由于框架就是整个浏览器的窗口，因此不需要设置大小。但是浮动框架iframe是插入到普通HTML中的，所以可以调整框架的大小。浮动框架的宽度和高度都是以像素（px)为单位的。width和height都是可选属性

滚动条设置

iframe的scrolling属性来控制滚动条三种形态：

属性 说明
auto 默认值，整个表格在浏览器中左对齐（根据需要显示）
yes 总是显示滚动条
no 不显示滚动条

语义化标签表