HTML学习 -- (一)html入门常用标签与属性

HTML

HTML简介

HTML，Hypertext Markup Language ,超文本标注语言。
HTML是一种规范，是一种标准，编写网页的一种标准。
超文本：就是网页上不光有文本，还有图片、音乐、视频等。
标注：是一种记号，是一种标志。如：红绿灯
语言：这里的“语言”就是代码，跟所谓“程序语言”一点关系都没有。
HTML的主要目的：就是用来显示网页的不同效果、不同部分

HTML文件结构

<html>
    <head>
        <title>标题</title>
</head>
<body>
    网页正文……
</body>
</html>

<title></title>中只能是纯文本，任何标记都会原封不动的显示。

HTML标签格式

HTML标记，大致分两类：(1)双边标记；(2)单边标记
1、双边标记
双边标记，是指有开始和结束标记，内容放在开始和结束标记之间。如：内容
语法格式：<标签属性1 = “值1” 属性2 = “值2”>内容</标签>

2、单边标记
单边标记，只有开始标记，而没结束标记，单边标记一般是没有内容。如： 
单边标记一般起一个特殊的功能。
单边标记常用的有10多个标记。
语法格式：<标签属性1 = “值1” 属性2 = “值2”>

HTML标签编写规范

HTML标记不区分大小写。如：、、
HTML标记属性可有可无。有的标记是没有属性的，如：<html>、<head>、<title>等
双边标记的内容在开始和结束标签之间，单边标记没有内容。
HTML标记可以相互嵌套，但一定注意是顺序嵌套，外层套内层，一层套一层。

<body>的常用属性

bgColor：网页背景色。如：<body bgColor = “red”>
background：网页背景图片地址。如：<body background = “images/bg.jpg”>

XHTML简介

传统的HTML开发的初衷是面向pc机的，而随机移动终端的不断出现，HTML已经满足不了市场的需求了。
XHTML是新一代的HTML标注语言。
XHTML的目的是为了取代HTML。
XHTML的标记，与HTML一模一样。
XHTML的语法要比HTML严格的多。
XHTML可扩展超文本标注语言。

XHTML编写规范

所有的标记和属性要全小写
单边标记必须关闭。如： ——> 
所有的属性值都必须要加引号。
所有的属性都必须有值。如：<hr noshade> —— <hr noshade = “noshade” />
标记之间要顺序嵌套，外层套内层，一层套一层。
XHTML网页必须要有DTD文档类型定义代码。

DTD文档类型定义

DTD文档类型定义的目的：是一种验证机制，也就是说检验一下你写的XHTML标记语法是否合法。
DTD一共有三大类型：
（1）严格型的DTD
在严格型的DTD中，不能再使用各种表现的标记。如：、、<body bgColor>
要求必须使用CSS来取代各种表现标记。<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
（2）过渡型的DTD
在过渡型的DTD中，可以继续使用HTML中的表现的写法。
这些表现标记，还可以继续使用。如：、、<body bgColor> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
（3）框架的DTD
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">

HTML常用标记

HTML文本修饰标记

<b></b><strong><strong/>：加粗bold。如：<b>HTML文件</b>
<i></i><em><em/>：斜体italic。如：<i>HTML文本</i>
<u></u><ins><ins/>：下划线underline。如：<u>HTML文本</u>
<s></s><del><del/>：删除线strike。如：<s>删除线</s>
<sup></sup>上标。
<sub></sub>下标。

<font></font>字体标记
属性：Size：文本大小，取值1-7。1小，7大。
     Color：颜色值。
     Face：字体，楷体、黑体、宋体...

HTML排版标记

1.<p></p>表示一个段落。
常用属性：align：水平对齐方式，取值：left(左)、 center(居中)、 right(右)
举例：<p align="center">水平对齐方式居中对齐</p>

2.换行标记<br>

3.水平线标记(单边标记)：<hr>
size：水平线的粗细，单位一般为px。
color：水平线的颜色。
width：水平线的宽度。
noshade：去掉水平线的阴影(在HTML中，noshade是没有值的属性)。如：<hr noshade>

4.<pre>预排版标记
功能：将保留所有的空白字符(空格、换行符)，换句话说：就是原封不动输出。
语法：<pre>内容</pre>

5.标题标记：<h1>……<h6>
功能：定义各种标题。
属性：align水平对齐方式，取值：left、center、right。
语法：<h1  align = “left | center | right”></h1>

<div>和标记

<div>是没有任何意义的标记，但是，又是使用最多的标记。<div>一般要与CSS配合使用。<div>是一个块元素。
<span>是没有任何意义的标记，但是，又是使用最多的标记。<span>要与CSS配合使用。<span>是行内元素。

（1）块元素
块元素，一般是单独占一行，不管内容多少，总是占一行。
块元素有哪些？<div>、<p>、<h1>、<h2>、<pre>等

（2）行内元素
行内元素，不会单独占一行。
行内元素的宽度，主要是根据内容决定。
多个行内元素，会排在同一行。
行内元素有哪些？<font>、<b>、<i>、<u>、<sub>、<sup>等

结论：在标记嵌套时，一般是块元素中嵌套行内元素。

HTML字符实体

Snip20160412_4.png

HTML项目符号(无序列表)

<ul>
    <li>内容1</li>
    <li>内容2</li>
    <li>内容3</li>
</ul>

<ul>或<li>的常用属性
type：项目符号的类型，取值：disc(小黑点)、circle(空心圆)、square(实心方块)

注意：在HTML标记中，内容应该放在最底层标记中。
注意：<ul>和<li>是块元素。

HTML编号列表(有序列表)

<ol>
    <li>列表1</li>
    <li>列表2</li>
    <li>列表3</li>
</ol>
<ol>或<li>的常用属性
type：编号类型，取值：1、a、A、i、I
start：从第几个开始编号(数字)。

自定义列表

<dl>
    <dt>帮助中心</dt>
    <dd><a href="#">账户管理</a></dd>
    <dd><a href="#">购物指南</a></dd>
    <dd><a href="#">订单操作</a></dd>
</dl>
<dt>定义标题</dt>
<dd>定义描述</dd>

滚动字幕标记<marquee>

语法格式：<marquee>滚动的内容</marquee>
常用属性
Direction：滚动方向，取值：up、down、left、right
Width：滚动宽度
Height：滚动高度
bgColor：滚动背景色
scrollAmount：滚动步长值。值越大，滚动越快。
scrollDelay：两步之间的停留时间，以毫秒单位。1秒=1000毫秒。
loop：循环滚动的次数。

图片标记：行内元素，单边标记

语法格式：<img  属性 = “值”>

必须属性：
Src：图片的路径(相对路径)
常用属性：
Width：图片宽度
Height：图片高度
Border：图片边框粗细。
Align：图片的水平对齐方式，取值：left、center、right
alt：图片不能显示时的替换文本
title：鼠标悬停时显示的文本
Hspace：图片与左右文字之间的距离(水平距离)
Vspace：图片与上下文字之间的距离(垂直距离)。

- 注意事项
如果图片想等比例缩放，只需要指定width或height其中一个。
Align属性只能让文本居中，不能让图片单独居中。
Align可以实现“图文混排”效果。align = “left | right”
要想让图片实现居中效果，可以给图片增加一个<div>元素

超级链接：行内元素，<a>中不能再套<a>标记

    语法格式：<a  属性 = “值”>……</a>
    常用属性
    href：目标文件的地址URL，该URL可以是相对地址，也可以是绝对地址。
    target：目标文件的显示窗口。
         _blank：在新窗口中打开目标文件。
         _self：在当前窗口中打开目标文件(默认打开)，相当于“替换”操作。
        _parent：在父级窗口来打开目标文件。
        _top：在最顶级窗口来打开目标文件。
        其中_parent、_top常用框架网页中
    name：定义锚点链接的名称
        锚点链接
            含义：锚点链接，是在一个网页的不同区域进行跳转。锚点理解为“定义记号”。
            定义锚点(作个记号)：<a  name = “锚点名称”></a>
            锚点名称的命名规则：可以包含字母、数字、下划线，但只能以字母开头。
            注意：<a>和</a>之间没有内容，换句话说：这个记号不是让我们看的，而是给链接用的。
            例如：<a  name = “top2”></a>
            跳转到锚点(记号)：
            语法：<a  href = “文件名#锚点名称”>……</a>
            文件名：可有可无。如果是同一个网页的不同部分跳转，不需要文件名；如果是跳到另一个网页的不同部分，这时必须要有文件名。
            注意：这里的<a>和</a>要有内容，否则，无法进行跳转。
            例如：<a  href = “#top2”>返回顶部</a>   //跳转到同一个网页的不同部分
            例如：<a  href= “news.html#bottom”>返回底部</a>  //跳转到news.html文件的底部

1、绝对地址URL
    （1）远程的绝对地址
            访问远程的文件，总是以“http://”域名、主机名开头。
            
    （2）本地的绝对地址(很少使用)
            访问本地的绝对地址，是以file:///开头的绝对地址。

2、相对地址URL（项目中路径一般是相对路径）
    （1）当前文件和目标文件是同级关系，链接地址直接写目标文件名。
    
    （2）当前文件与目标文件所在的文件夹是同级关系，先找“文件夹名”，然后再找“文件名”。
        也就是，目标文件位于下一级。
        
    （3）目标文件位于上一层目录中，往上找对应的目录，再找目录中的文件。
        往上找，使用“../”符号表示。
        “../”代表上一级目录
        “../../”代表上两级目录
    
3、特殊的链接
    1、下载链接
什么样的文件会出现下载提示？
    反过来说，哪些文件网页可以直接执行？如：.jpg、.png、.gif、.html、.htm、.txt等。    
    大部分文件，浏览器是不能直接执行的。如：.doc、.xls、.ppt、.rar、.psd……
    
    2、邮箱链接
    
    3、普通空链接（#）
    
    4、JS链接：添加JS功能代码

<meta>标记

<meta>的主要作用，是提供网页的元信息。比如：指定网页的搜索关键字。

<meta>标记有两个属性：http-equid和name。

1.http-equiv属性

    功能：模拟http协议文件头信息，当信息从服务器端传到客户端时，告诉浏览器如何正确的显示网页内容。

    http-equiv属性一般要与content属性配合使用。Content属性指定信息的详细参数。

(1)设置网页的字符集
<meta http-equiv="Content-Type" content="text/html;
charset=utf-8" />

(2)网页自动刷新
<meta http-equiv="refresh" content="2">   //每隔2秒钟，自动刷新网页一次
<meta http-equiv="refresh" content="2;url=http://www.ifeng.com">   //2秒钟后，跳转到凤凰网


2.name属性
       name属性主要用于设置网页的搜索关键字、版权信息、作者等。

(1)设置网页搜索关键字

<meta name="keywords" content="网站建设，企业网站建设，网站制作，网上商城，网站推广，域名注册，中企动力" />

(2)设置网页描述信息
<meta name="description" content="网站建设、网站制作专家中企动力，为您提供专业的展示型网站建设、营销型网站建设、独立商城系统网站建设、并提供一体化的企业邮箱”>

表格标签（块元素）

1、表格的结构
<table border="1" cellspacing="0" cellpadding="5" width="500" height="200" align="center">
    <!-- 标题 -->
    <caption>演员表</caption>
    <tr>
        <th>姓名</th>
        <th>性别</th>
        <th>年龄</th>
    </tr>
    <tr>
        <td>姓名</td>
        <td>性别</td>
        <td rowspan="2">跨行合并单元格</td>
    </tr>
    <tr>
        <td>姓名</td>
        <td>性别</td>
    </tr>       
    <tr>
        <td>姓名</td>
        <td colspan="2">跨列合并单元格</td>
    </tr>               
</table>
2、<table>属性
Width：表格宽度，单位可以是百分比，也可以是固定值。
Height：表格高度。
Align：表格水平对齐方式，取值：left、center、right
Border：边框粗细。
Bordercolor：边框颜色。
bgColor：表格背景色。
background：背景图片URL。
cellpadding：单元格边线到内容间的距离(填充距离)
cellspacing：单元格与单元格之间的距离(间距)
rules：合并单元格边框线，取值：all
注意：rules兼容性不好，请使用CSS来取代它。
<table border="5" width="500" height="130" bordercolor="blue" bgColor="#99cc33" background="images/200.gif" align="center" cellspacing="0" rules="all">


3、<tr>属性——行标记
bgColor：行的背景色
height：行的高度
align：行中的文本水平居中，取值：left、center、right
valign：垂直居中，取值：top(上)、middle(中)、 bottom(下)

4、<td>或<th>属性
    <td>是普通单元格，<th>是标题单元各，居中加粗显示。
width：单元格宽度
height：单元格高度
bgColor：单元格背景色
background：单元格背景图片
align：水平对齐
valign：垂直水齐
rowspan：上下单元格合并。合并属性必须放在第一个单元格中。
colspan：左右单元格合并。合并时，有增就得有减，要保证每一行单元格的个数不变。

表单

1、表单的概念
    表单主要用来获取客户端用户数据(信息)的。如：注册表单、查询表单、登录表单等。

2、表单的工作原理
浏览有表单的网页，填写一些必要的信息，然后点击某个按钮进行提交。
这些表单数据，通过互联网，传递到了服务器上。
服务器上有专门的程序，对表单数据进行验证。如果验证成功，将你的数据存入数据库(MySQL)，则返回一个验证成功的信息。如果验证失败，将返回一个错误信息。
从上面表单的工作原来看：表单的制作分两个部分，一是前台页面的制作，二是后台PHP对表单数据的处理。

3、表单的结构
<form>标记属性——块元素
name：给表单起个名字。这个名字主要给JavaScript来用。JS主要用来做客户端表单验证。
method：表单的提交方式，取值：get或post。
action：指定表单的处理程序，一般是PHP文件。
如果action为空，那么表单数据发到哪里去了？
结果：那么表单数据提交给了它自己来处理。
enctype：指定表单数据的编码方式(解密方式)。这个属性只能用在 method = “post” 的情况下。
application/x-www-form-urldecoded  //默认的加密方式
multipart/form-data  //如果你上传文件，该值必须它自己。

单行文本域

语法格式：<input  type = “text” 属性 = “值” />
常用属性
name：文本框的名字。命名规则是：可以包含字母、数字、下划线，只能以字母开头。
type：表单元素的类型。
value：文本框中的值。
size：文本框的长度，以“字符”为单位。
maxLength：最多可以输入多少个字符，超出的就输不进去了。
readonly：只读属性。可以选中，但不能修改。如：readonly = “readonly”
disabled：禁用属性。不能选中，不能修改。如： disabled = “disabled”
举例说明：<input type="text" name="username" />

单行密码域

语法格式：<input  type = “password” 属性 = “值”  />
常用属性
name：密码框的名字。命名规则是：可以包含字母、数字、下划线，只能以字母开头。
type：表单元素的类型。
value：元素中的值。
size：元素的长度，以“字符”为单位。
maxLength：最多可以输入多少个字符，超出的就输不进去了。
readonly：只读属性。可以选中，但不能修改。如：readonly = “readonly”
disabled：禁用属性。不能选中，不能修改。如： disabled = “disabled”

单选按钮

语法格式：<input  type = “radio”  属性 = “值”  />
常用属性
Name：元素的名称
Value：元素的值，该value中数据将发往服务器。
Checked：默认选择哪一项。如：checked = “checked”


注意：一组单选按钮，只能选择一个，但name的值必须一致。如：name = “sex”
      单选按钮用户自己不能输入内容，用户只能选择，因此必须为它指默认值value。

复选框

语法格式：<input  type = “checkbox”  属性 = “值”  />
常用属性
Name：元素的名称
Value：元素的值
Checked：默认选中。如：checked = “checked”

注意：复选框也是一组选项，因此name的值必须一致。在PHP中，使用数组来获取多个同名的name的值。
      复选框可以同时选多个，也可以一个都不选。

下拉列表

<select  name = “city”>
    <option  value = “北京市”>北京市</option>
    <option  value = “天津市”>天津市</option>
    <option  value = “重庆市”>重庆市</option>
</select>
<select>标记的属性，只有一个name属性
<option>标记的属性有两个：value属性、selected属性
Selected：默认选中。如：selected = “selected”

文本区域

语法格式：<textarea  name = “名称”  cols = “宽度”  rows = “高度”></textarea>
常用属性
name：元素名称
cols：宽度，是指多少个字符宽。
Rows：高度，是指几行高。
提示：<textarea>和</textarea>之间是默认文本

各种按钮

提交按钮：<input type="submit" value="提交表单" />
重置按钮：<input type="reset" value="重新填写" />
图片按钮：<input type="image" src="images/btn02.png" />   //功能就是提交表单，与submit按钮功能一样
普通按钮：<input type="button" onclick="javascript:window.close()" value="关闭窗口" />
普通按钮本身是不具备任何功能的，一般要与JS程序配合使用，实现相应的功能。

隐藏域

功能：隐藏域就是看不见的一个框。传递一些值，而这个值又不想让别人看见。
用处：主要用于PHP后面程序，如：修改某一条新闻内容时，需要传递一个新闻的id号。
语法格式：<input  type = “hidden”  name = “名称”  value = “默认值”  />

上传文件域

语法格式：<input  type = “file”  属性 = “属性”  />
常用属性
name：表单元素的名称
value：表单元素的值，这个值其实就是上传的文件名。value属性是只读属性，这个value的内容只能来自手动选择上传的文件，而不能用户自己指定一个路径。为了安全起见，value是只读的。
注意：现在只能实现上传文件框，而不能真正实现上传功能，上传功能用PHP来实现的。

<caption>表格标题

语法格式：<caption></caption>
提示：<caption>标记是<table>的子标记。<caption>放在<table>开始标记之后。

图片热点(图像地图)
图像热点：给一张图片加多个链接，默认情况下，一张图只能加一个链接。

1、标记结构：
<img  src = “images/01.jpg”  usemap = “#Map”  />
<map  id = “Map”  name = “Map”>
       <area  shape = “热区形状”  coords = “热区坐标”  href = “链接地址”  />
       <area  shape = “热区形状”  coords = “热区坐标”  href = “链接地址”  />
       <area  shape = “热区形状”  coords = “热区坐标”  href = “链接地址”  />
</map>
2、<area>标记的常用属性
Shape：热区的形状，取值：rect(矩形)、circle(圆形)、polygon(多边形)
Coords：执区的坐标(位置)
如果 shape = rect 时，那么，coords = “x1,y1,x2,y2” 例如：coords = “50,50,200,150”
(x1,y1)为矩形左上角的坐标值，(x2,y2)为矩形右下角的坐标值
如果 shape = circle 时，那么， coords = “x,y,r” ，其中(x,y)为圆心坐标，r为半径

此内容边学习边整理

最后编辑于：2019.11.13 17:41:14

人面猴
序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
沈念sama阅读 216,470评论 6赞 501
死咒
序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
沈念sama阅读 92,393评论 3赞 392
救了他两次的神仙让他今天三更去死
文/潘晓璐我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
开封第一讲书人阅读 162,577评论 0赞 353
道士缉凶录：失踪的卖姜人
文/不坏的土叔我叫张陵，是天一观的道长。经常有香客问我，道长，这世上最难降的妖魔是什么？我笑而不...
开封第一讲书人阅读 58,176评论 1赞 292
港岛之恋（遗憾婚礼）
正文为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
茶点故事阅读 67,189评论 6赞 388
恶毒庶女顶嫁案：这布局不是一般人想出来的
文/花漫我一把揭开白布。她就那样静静地躺着，像睡着了一般。火红的嫁衣衬着肌肤如雪。梳的纹丝不乱的头发上，一...
开封第一讲书人阅读 51,155评论 1赞 299
城市分裂传说
那天，我揣着相机与录音，去河边找鬼。笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。我是一名探鬼主播，决...
沈念sama阅读 40,041评论 3赞 418
双鸳鸯连环套：你想象不到人心有多黑
文/苍兰香墨我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
开封第一讲书人阅读 38,903评论 0赞 274
万荣杀人案实录
序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
沈念sama阅读 45,319评论 1赞 310
护林员之死
正文独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋以下内容为张勋视角年9月15日...
茶点故事阅读 37,539评论 2赞 332
白月光启示录
正文我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
茶点故事阅读 39,703评论 1赞 348
活死人
序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
沈念sama阅读 35,417评论 5赞 343
日本核电站爆炸内幕
正文年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
茶点故事阅读 41,013评论 3赞 325
男人毒药：我在死后第九天来索命
文/蒙蒙一、第九天我趴在偏房一处隐蔽的房顶上张望。院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
开封第一讲书人阅读 31,664评论 0赞 22
一桩弑父案，背后竟有这般阴谋
文/苍兰香墨我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。一阵脚步声响...
开封第一讲书人阅读 32,818评论 1赞 269
情欲美人皮
我被黑心中介骗来泰国打工，没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。一个月前我还...
沈念sama阅读 47,711评论 2赞 368
代替公主和亲
正文我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
茶点故事阅读 44,601评论 2赞 353