Web基础系列一、Html(网页结构)

itCatface

已于 2022-05-28 23:05:16 修改

阅读量4k

点赞数 1

分类专栏： Web_基础知识文章标签： html 前端 css

于 2016-01-06 14:12:15 首次发布

本文链接：https://blog.csdn.net/itCatface/article/details/50468548

版权

Web_基础知识专栏收录该内容

7 篇文章 0 订阅

订阅专栏

HTML全称

HyperText Mark-up Language：超文本标记语言.

本篇基于HTML4，后续会推出HTML5的说明.

HTML文档由四部分组成

文档声明: <!DOCTYPE HTML>
html标签对: <html></html>
head标签对: <head></head>
body标签对: <body></body>

HTML编写规范

html程序以<html>开头，同时以</html>结束.
<html>中包含两个部分：
- <head><title>标题信息</title>设置html相关的信息</head>
- <body>页面上显示的内容</body>
html的标签不区分大小写.
html的标签有开始标签，也要有结束标签：<title></title>.
如果想对html中的数据进行样式变化，使用标签封装数据，通过修改标签的属性和属性值实现标签内数据样式的变化[一个标签相当于容器，修改容器的属性值可以实现容器内数据样式的变化]—html的操作思想.
个别标签没有结束标签，在标签内结束：<br/> <hr/>.

HTML常用标签

1.文字标签：<font></font>

color：字体颜色
- 英文单词：red black green orange white yellow gray.
- 十六进制：#fff RGB 使用工具.
size：字体大小
- 使用1-7表示大小范围(超过7按7显示).

2.注释标签

java有三种：单行//...、多行/*...*/、文档/**...*/
html、xml一种
css一种：多行/% ... %/
js两种：单行、多行

3.水平线标签：<hr/>

color：颜色
size：粗细(1-7表范围)

4.特殊字符：

<：<
>：>
&：&
空格：

5.标题标签：<h1><h1/>...<h6><h6/> <caption></caption>

6.列表标签

层级列表

<dl--列表范围>
	<dt--上层内容>
		<dd--下层内容><dd/>
	<dt/>
<dl/>

有序列表

<ol type="1/a/i"--排序显示方式>
	<li><li/>
<ol/>

无序列表

<ul type="circle/square/disc"--排序显示方式>
	<li><li/>
<ul/>

7.图像标签：<img src="img src">

wigth：图片高度
height：图片宽度
alt：图片存在，鼠标悬停显示文字；图片不存在，图片位置上显示文字

8.两种路径

绝对路径：图片的完全路径
相对路径
- 如果图片和html文件在一个目录下，可以直接写picture.jpg
- 如果图片在html文件所在目录的下层目录，aa/picture.jpg
- 如果图片在html文件所在目录的上层目录，../picture.jpg
- 如果图片在html文件所在目录的上层目录的上层目录，../../picture.jpg

9.超链接标签

funcA：链接资源

<a href="" target="_self/_blank/_parent/_top"--打开方式><a/>

funcB：定位资源
- 定义位置：<a name="locationName"><a/>
- 回到位置：<a href="#locationName"><a/>

10.表格标签

<table>
	<tr/th(居中加粗)--行 align="left/center/right"--位置>
		<td--格 align="left/center/right"></td>
	</tr/th>
</table>

border：表格线(1-7)
bordercolor
borderspacing：单元格间距
borderpadding：数据与单元格间距
width：表格宽度
height：表格高度

合并单元格思想：首先确定行数及每行内单元格数
– rowspan：跨行
– colspan：跨列

11.其他标签：b u i p(段落) s pre sub(下标) sup(上标) div span(行内元素)

12.头标签

title：定义文档的标题
base：定义默认超链接地址<base href="" target="_blank"></base>
meta：定义HTML文档中的元数据<meta name="keywords" content="catface, wyh">
link：引入外部资源文件(如css文件)
style：定义HTML文档的样式
script：加载客户端的脚本文件

13.框架标签：不能有body

frameset：页面划分方式
- rows：上下划分
- cols：左右划分
frame：具体封装的页面

★表单标签

要求一：每个输入项必须有name属性
要求二：单选框、复选框、下拉框必须有value属性

<form>表单范围</form>
- action：设置提交到哪个页面
- enctype：当需上传文件，属性值改为：multipart/form-data
- method：设置表单提交方式：get(默认)、post(提交的数据放到请求体中)
  
  get请求 post请求
  地址栏会携带数据地址栏不携带数据
  安全性很低安全性较高
  请求数据的大小有限制请求数据的大小无限制
普通输入项：<input type="text"/>
密码输入项：<input type="password"/>
单选输入项：<input type="radio" name=""--必须相同 checked--默认选中/>
复选输入项：<input type="checkbox"/ name=""--必须相同>
文件上传项：<input type="file"/>
提交按钮：<input type="submit"/>
提交操作使用图片：<input type="image" src="img src"/>
重置按钮：<input type="reset" value=""/>
隐藏项：<input type="hidden" name="hidden" value=""/>
文本域：<textarea rows=""--行数 cols=""--列数></textarea>
下拉选择框：不使用input便签，使用select标签
```
<select>
	<option></option>
</select>
```

get请求	post请求
地址栏会携带数据	地址栏不携带数据
安全性很低	安全性较高
请求数据的大小有限制	请求数据的大小无限制

HTML标记概览

标记	类型	译名或意义	作用	备注
文件标记
`<html>`	●	文件声明	让浏览器知道这是 HTML 文件
`<head>`	●	开头	提供文件整体资讯
`<title>`	●	标题	定义文件标题，将显示于浏览顶端
`<body>`	●	本文	设计文件格式及内文所在
排版标记
`<!--注解-->`	○	说明标记	为文件加上说明，但不被显示
`<p>`	○	段落标记	为字、画、表格等之间留一空白行
`<br>`	○	换行标记	令字、画、表格等显示于下一行
`<hr>`	○	水平线	插入一条水平线
`<center>`	●	居中	令字、画、表格等显示于中间	反对
`<pre>`	●	预设格式	令文件按照原始码的排列方式显示
`<div>`	●	区隔标记	设定字、画、表格等的摆放位置
`<nobr>`	●	不折行	令文字不因太长而绕行
`<wbr>`	●	建议折行	预设折行部位
字体标记
`<strong>`	●	加重语气	产生字体加粗 Bold 的效果
`<b>`	●	粗体标记	产生字体加粗的效果
`<em>`	●	强调标记	字体出现斜体效果
`<i>`	●	斜体标记	字体出现斜体效果
`<tt>`	●	打字字体	Courier字体，字母宽度相同
`<u>`	●	加上底线	加上底线	反对
`<h1>`	●	一级标题标记	变粗变大加宽，程度与级数反比
`<h2>`	●	二级标题标记	将字体变粗变大加宽
`<h3>`	●	三级标题标记	将字体变粗变大加宽
`<h4>`	●	四级标题标记	将字体变粗变大加宽
`<h5>`	●	五级标题标记	将字体变粗变大加宽
`<h6>`	●	六级标题标记	将字体变粗变大加宽
`<font>`	●	字形标记	设定字形、大小、颜色	反对
`<basefont>`	○	基准字形标记	设定所有字形、大小、颜色	反对
`<big>`	●	字体加大	令字体稍为加大
`<small>`	●	字体缩细	令字体稍为缩细
`<strike>`	●	画线删除	为字体加一删除线	反对
`<code>`	●	程式码	字体稍为加宽如`<tt>`
`<kbd>`	●	键盘字	字体稍为加宽，单一空白
`<samp>`	●	范例	字体稍为加宽如`<tt>`
`<var>`	●	变数	斜体效果
`<cite>`	●	传记引述	斜体效果
`<blockquote>`	●	引述文字区块	缩排字体
`<dfn>`	●	述语定义	斜体效果
`<address>`	●	地址标记	斜体效果
`<sub>`	●	下标字	指数
`<sup>`	●	下标字	下标字
清单标记
`<ol>`	●	顺序清单	清单项目将以数字、字母顺序排列
`<ul>`	●	无序清单	清单项目将以圆点排列
`<li>`	○	清单项目	每一标记标示一项清单项目
`<menu>`	●	选单清单	清单项目将以圆点排列，如`<ul>`	反对
`<dir>`	●	目录清单	清单项目将以圆点排列，如`<ul>`	反对
`<dl>`	●	定义清单	清单分两层出现
`<dt>`	○	定义条目	标示该项定义的标题
`<dd>`	○	定义内容	标示定义内容
表格标记
`<table>`	●	表格标记	设定该表格的各项参数
`<caption>`	●	表格标题	做成一打通列以填入表格标题
`<tr>`	●	表格列	设定该表格的列
`<td>`	●	表格栏	设定该表格的栏
`<th>`	●	表格标头	相等于`<TD>`，但其内之字体会变粗
表单标记
`<form>`	●	表单标记	决定单一表单的运作模式
`<textarea>`	●	文字区块	提供文字方盒以输入较大量文字
`<input>`	○	输入标记	决定输入形式
`<select>`	●	选择标记	建立 pop-up 卷动清单
`<option>`	○	选项	每一标记标示一个选项
图形标记
`<img>`	○	图形标记	用以插入图形及设定图形属性
连结标记
`<a>`	●	连结标记	加入连结
`<base>`	○	基准标记	可将相对 URL 转绝对及指定连结目标
框架标记
`<frameset>`	●	框架设定	设定框架
`<frame>`	○	框窗设定	设定框窗
`<iframe>`	○	页内框架	于网页中间插入框架	IE
`<noframes>`	●	不支援框架	设定当浏览器不支援框架时的提示
影像地图
`<map>`	●	影像地图名称	设定影像地图名称
`<area>`	○	连结区域	设定各连结区域
多媒体
`<bgsound>`	○	背景声音	于背景播放声音或音乐	IE
`<embed>`	○	多媒体	加入声音、音乐或影像
其他标记
`<marquee>`	●	走动文字	令文字左右走动	IE
`<blink>`	●	闪烁文字	闪烁文字	NC
`<isindex>`	○	页内寻找器	可输入关键字寻找于该一页	反对
`<meta>`	○	开头定义	让浏览器知道这是 HTML 文件
`<link>`	○	关系定义	定义该文件与其他 URL 的关系
StyleSheet
`<style>`	●	样式表	控制网页版面
`<span>`	●	自订标记	独立使用或与样式表同用