您的位置：首页 > Web前端 > HTML

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

2016-01-06 14:12 585 查看
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>


自动换行：从1-6字体大小递减

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>


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>
●自订标记独立使用或与样式表同用
注：

● 表示该标记属围堵标记，即需要关闭标记如 
</标记>
.

○ 表示该标记属空标记，即不需要关闭标记.

IE 表示该标记只适用于 Internet Explorer.

NC 表示该标记只适用于 Netscape Communicator.

反对 表示该标记不为 W3C 所赞同，通常这标记是 IE 或 NC 自订，且己为众所支 持，只是 HTML 标准中有其它同功能或更好的选择.

弃用 表示该标记己为 W3C 所弃用，是过时的标记，但 HTML 具向下兼容的特 性，不用担心新浏览器不支援旧标记.

新 表示该标记是 HTML 4.0 中新增的.

更为详细API请下载：http://download.csdn.net/detail/itcatface/9397058

以上。如有错误和疑问，欢迎指正提出。 catface.wyh@gmail.com
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航