HTML标签及属性

一．html整体结构

<!DOCTYPE html>

<html>

<head>

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

               <meta charset="utf-8"/>

               <meta http-equiv="content-type" content="text/html; charset=utf-8"> //老版本

               <meta name="keywords" content="手机,电脑,数码"/> 设置网站的关键字，用于搜索

               <link rel="stylesheet" type="text/css" href="css.css">  //链接样式

               <script type="text/javascript" src="js.js"></script>    //链接JS

               <style>写css样式</style>

</head>

<body>

网页正文……

</body>

</html>

l 功能：告诉浏览器，如何翻译汉字。

l http-equiv：模拟http协议的文件头原信息，主要目的是服务器向客户端返回时，用什么格式显示。

l Content-type：内容类型。

l Content：详细内容类型介绍。

l Text/html：网页是text格式，html是文本中的小格式。

l Charset：字符集，主要控制汉字如何显示。

l Utf-8：多国语言编码，什么国家的语言都可以正常显示。

二．格式标签:

<hr>：水平线       <br>：换行         <p>：段落

<pre>：原样输出，不支持标签直接输出     <center>：居中

<ol  有序列表 style start reversed （倒序）>   例：（ol type=”A”,start=”3”）

<ul 无序列表 [type]  样式  disc circle  square>：

<li>：列表中的项目

释义列表：<dl 定义列表><dt 列表标题><dd 详情></dd></dt></dl> //一般用在网页最下面

三．文本标签

<h1>-<h6> 标题 /            
<b><i><u>粗 斜 下划线 /

<sub><sup>上下标/         
<font face（字体） size(1-7) color>; /         
<s>：中划线（del）

四．a标签

<a href="" 可以是URL,也可以绝对路径和相对路径

               绝对路径: D:\wamp\www\tz.php

               相对路径: ./   当前目录  ../  上级目录   /根目录  “\”代表本地分割符“/”网络分割符

               target： 打开方式（_self  当前窗口/_blank  新窗口/_top  （这个目标使得文档载入包含这个超链接的窗口）在顶层窗口打开/ _parent  父级窗口打开）

               title：鼠标停留时的提示文字

               name：名字(定义锚点时配合#用)

例：1.<a href='user/index.php' target='main'> 跳转到index,在mian中打开。

2.<a href="./demo06.html#bottom">跳到底部</a>

  <a name="bottom">底部</a>

img标签

<img  src="URL"  width   height   title(提示文字) alt(替代图像的文本，无法加载时)>

image：图片按钮   有提交功能，再套个<a>标签。

五．表格标签

结构

<table><caption><tr><th><td>

<table>：表格

               属性：   width：宽度/height：高度/border：边框/bgcolor：背景颜色/

               background：     背景图片

               cellspacing：单元格间距(外间距)/cellpadding：单元格与内容间距(内间距)

               align：当对于外边的水平对齐方式

<caption>：表格标题

<tr>    代表HTML表格中的一行

               属性：   height/bgcolor

               align：水平对齐方式  left|center|right

               valign：垂直对齐方式 top|middle|bottom

<td>|<th>  代表单独的格子 （单独的给一个设置宽高即影响整行整列）

               属性：   width/height/bgcolor/align/valign

               colspan：合并列（横向合并）

               rowspan：合并行（纵向合并）

注意：tr没有宽度

反色原理：

<table border="0" cellspacing="1" bgcolor="black"> <tr bgcolor="white">

六．form表单相关标签

<form>

               action：接收的脚本地址

               method：提交的方式(get|post)

               enctype="multipart/form-data"        (表单文件二进制编码)

                                application/x-www-urlencoeded  默认

<input>：type：类型/name：名字/value：值/size：大小(可以设置框的长度) width/height

                 disabled：禁止(无值属性)/checked：选中(默认)/readonly：只读(无值属性)

                 placeholder：提示文字(html5)

其中type属性的值：

               text：文本框 （name为下标，value为默认值，不设置值的话只要下标，然后输入值）

        password：密码框  required(非空)

               radio：单选框       ( 同一组radio的name值必须相同)

               checkbox：复选框  (name的值后面要加[ ] 相当于数组)

               submit：提交按钮  有提交功能

               button：普通按钮  没有提交功能 /reset：重置

               file：文件域 multiple(一次上传多张(无值属性))

               hidden：隐藏域(传递不让用户看见的数据,name  value必须有)

select：下拉框

               name：名字        / size：下拉个数

               disabled：禁止(无值属性)

               option：选项（不设置value，也可以提交，就是option中间的文字）

               value：值/ disabled：禁止(无值属性)/ selected：(默认选中项)

<select>

<optgroup label="北京">  自动分组

 <option >南京</option>

 <option >北京</option>

</optgroup>

</select>

textarea：多行文本域

               name：名字        /cols：列数          /rows：行数

               disabled：禁止(无值属性)/readonly：只读(无值属性)/maxlength：最大可输入长度                <label> (挨文字选中)

两个提交按钮的区别：

submit具有提交功能，button一般需要和JS套用

七．frameset框架

frameset

               cols：分列的定义 可以用百分比或者像素，值用英文的逗号隔开(,) *表示剩下的所有

               rows：分行的定义

               border：边框

               frameborder：是否显示边框 yes | no

<iframe name="main" frameborder="0" style="width:800px;height:400px;">这是另一个框架，可以和body一起使用

frame

               href：显示的页面url地址

               name：名字

               scrolling：是否显示滚动条 yes|no

               noresize：禁止拖动 (定框架)

例：       <frameset rows="100, 600, *">

                               <frame src="./top.html" noresize/>  <!-- noresize固定当前框架 -->

                               <frameset cols="200,*">

                                              <frame src="menu.html" name="left" noresize/>

                                              <frame src="content.html" name="right" noresize/>

src是这个帧中显示的内容，name就是取名字，

                               </frameset>

                               <frame src="footer.html" noresize/>

               </frameset>

menu.html文件中<li><a href="./userlist.html" target="right">用户列表</a></li>

一点击用户列表，在右边出现userlist.html文件内容（先给帧名字，在用target去跳转）

注意事项：frameset不能和body标签一起使用。

八．HTML5新标签（语义化标签）

1、可以将写在form标签外面的表单元素提交到指定文件中 Password不在form标签里面

2、设置提交按钮指定的文件位置

3、为文本输入框，添加下拉选择项

4. 时间日期

<input type="week" name=""> <br/> 选取一年中的第几周

邮箱:<input type="email" name=""> <br/>

网址:<input type="url" name=""> <br/>

数字:<input type="number" name="" max="10" min="1" step="2"> <br/>

数字:<input type="range" name="" min="1" max="10" step="2"> <br/>

5.视频音频

Autoplay:自动播放

Loop：循环播放

Hidden：隐藏标签

6.还提供了很多API接口，比如地理位置锁定

7.简单的本地储存

8.web sql Database

9.Canvas 就一个标签，但是非常强大

<canvas id="myCanvas"></canvas> //一个画布

var canvas=document.getElementById('myCanvas');

var ctx=canvas.getContext('2d');

ctx.fillStyle='#FF0000';

ctx.fillRect(0,0,80,100);

</script>

10.websocket

九．实体符号

&quot; "       
&amp;  &              
&lt;   <         
&gt;   >
&nbsp; 空格    
&copy; ©             
&times; ×             
&yen; ¥ 
&hearts 心型

十．滚动字幕

<marquee direction="up" scrollAmount="10" scrollDelay="100" width="600" height="400" >滚动的内容</marquee>

scrollAmount (值越大，滚动越快)

scrollDelay(两步之间的停留时间)

Direction：滚动方向，取值：up、down、left、right

loop：循环滚动的次数

<mark></mark>给文字加亮

<legend>新增用户</legend> 新中夹框标签

附录：

1.HTML，Hypertext Markup Language ,超文本标注语言。

2.字符实体：在html中，< >这些符号是标签定义用的，不可以直接在网页中输出，如果我们希望正确的显示这些特殊符号，需要用字符实体比如：&nbsp(空格)

2.GB2312(简体中文)、BIG5(繁体中文)、JIS(日文)、utf-8(多国语言)

3.中文操作系统的默认字符集(字符编码)，就是GB2312，使用记事本写的网页，默认字符集也是gb2312。

4.<div>一般要与CSS配合使用。<div>是一个块元素,占一行。<div>、<p>、<h1>、<h2>、<pre>

5.<span>要与CSS配合使用。<span>是行内元素。 <font>、<b>、<i>、<u>、<sub>、<sup>

7.要想让图片实现居中效果，可以给图片增加一个<div>元素.

8.反过来说，哪些文件网页可以直接执行？如：.jpg、.png、.gif、.html、.htm、.txt等。

9.大部分文件，浏览器是不能直接执行的。如：.doc、.xls、.ppt、.rar、.psd……

10.注意：10进制兼容性不好，尽量少用。10进制颜色表示，常用于CSS中。

11.锚点链接，是在一个网页的不同区域进行跳转。<a name = “top2”></a> /<a href = “#top2”>返回顶部</a>

12.ASCII编码：用1个字节(8位二进制)来表示所有字符，共可以表示 2^8 = 256 。

HTML通用属性：id, class, style, title

13.（2）网页自动刷新

14.name：给表单起个名字。这个名字主要给JavaScript来用。JS主要用来做客户端表单验证,如果某个表单元素，不想往服务器传递数据，那么，我们可以不给它加name属性。传递到服务器的数据，如果没有name，则无法获取它的值。16.

u <select>标记的属性，只有一个name属性

u <option>标记的属性有两个：value属性、selected属性

u Selected：默认选中。如：selected = “selected”

17.图片按钮：<input type="image" src="images/btn02.png" /> //功能就是提交表单，与submit按钮功能一样

普通按钮：<input type="button" onclick="javascript:window.close()" value="关闭窗口" />

u 普通按钮本身是不具备任何功能的，一般要与JS程序配合使用，实现相应的功能。

18.value属性是只读属性，这个value的内容只能来自手动选择上传的文件，而不能用户自己指定一个路径。为了安全起见，value是只读的。

19.确定主页的宽度：778px。当前流行的主页的宽度一般为1000px

20.<frameset>属性 cols属性和rows属性，每个框架只能用其中一个，不能两个同时用。

posted on 2017-12-12 13:17 云中雪山阅读(264) 评论(0) 编辑收藏举报

刷新页面返回顶部

云中雪山