html 基础篇

来源：互联网发布：数据分析视频教程编辑：程序博客网时间：2024/06/05 01:54

一、html 定义、语法、及xhtml xml的区别

html: 超文本标记语言，hyper text markup language
标记（又叫元素）：用尖括号括起来的，用于描述功能的特定符号。标记分为封闭型（双标签）和非封闭型（单标签）。比如： <body></body> <div></div> <br/>
属性：用于修饰元素。属性和值用等号连接，值用双引号括住。
例子：<p align="center"></p>。
绝大多数元素都支持的属性叫标准属性： id title class style
注释的语法:
相似体：xml 和xhtml.
（摘自：http://www.cnblogs.com/shishixiaozi/p/5688590.html）
他们的定义：
①、html即是超文本标记语言（Hyper Text Markup Language），是最早写网页的语言，但是由于时间早，规范不是很好，大小写混写且编码不规范；
②、xhtml即是升级版的html（Extensible Hyper Text Markup Language），对html进行了规范，编码更加严谨纯洁，也是一种过渡语言，html向xml过渡的语言；
③、xml即时可扩展标记语言（Extensible Markup Language），是一种跨平台语言，编码更自由，可以自由创建标签。（前些时候xml也用于网站前后端的数据传递，现在网站基本上都用json 格式的字符串来传输数据）
他们的区别：
①、xhtml对比与html，xhtml文档具有良好完整的排版，体现在两方面：a、元素必须要有结束标签；b、元素必须嵌套；
②、对于html的元素和属性，xhtml必须小写，因为xml是严格区分大小写的，<li>和<LI>是不同的标签；
③、xhtml的属性值必须在引号之中；xhtml不支持属性简略写法。比如h5 （h5 以下表示html 5 简称）提议的当属性值为true时checked 简写。这个在xhtml是不支持的。
④在xhtml中，name属性是不赞成使用的，在以后的版本中将被删除。

二、html的标签结构　

1.基本结构
<!doctype html> 是document type(文档类型)的简写，用来说明你用的XHTML或者HTML是什么版本。h5以下版本：需要写明dtd的类型，dtd类型有3类：过渡的(Transitional) 严格的(Strict) 框架的(Frameset)。h5 提供了这部分的简写：
<html lang=en> 页面开始的标签，可添加全局生效的属性。比如：lang 页面的支持的语言，style:”font-size:14px“ (手机兼容的字体大小定义)。
这标签支持的属性详细列表：http://www.w3school.com.cn/tags/html_ref_standardattributes.asp
<head> 定义全局信息
<meta charset=utf-8> 定义网页的编码格式
<title>网页标题</title> 网页标题
</head>
<body> 网页主体
</body>
</html> 网页结束标签
2. head 里面的标签及用法
<meta name="robots" content="all"> 允许搜索机器人搜索站内所有连接。如果不想被搜索，设置name=”robots.txt”。
<meta name="keywords" content="关键字"> 跟百度搜索有关
<meta name=description" content="网页的描述信息" > 跟百度搜索有关
<meta name="viewport" content="width=device-width,inital-scale=1.0,user-scalable=no"> 视口设置，设置网页的宽度等于设备的宽度，初始倍数为：1，不允许客户调整窗口大小。响应式网站必用，手机网站也用到。
<meta http-equiv="x-us-compatible" content="IE=edg"> 设置IE 浏览器用最新版本来渲染
<link rel="stylesheet" href="" media="only screen and (min-width:1001px)"> 用于引入外部文件（css或者icon）
引入icon的例子：
<link rel="icon" href="/favicon.ico" type="image/x-icon">
<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon">
<style type="text/css">
@import url(CSS文件路径地址); 用于样式里面引入外部css样式，css2.1以下浏览器不支持该用法，不推荐使用。
</style>

<style></style> css 内部样式，建议用外部样式来配置css
<script scr="" async></script> js脚本，建议js都放置在</body>的标签之前。
async 属性规定一旦脚本可用，则会异步执行。注释：async 属性仅适用于外部脚本（只有在使用 src 属性时）。注释：有多种执行外部脚本的方法：如果 async="async"：脚本相对于页面的其余部分异步地执行（当页面继续进行解析时，脚本将被执行）如果不使用 async 且 defer="defer"：脚本将在页面完成解析时执行如果既不使用 async 也不使用 defer：在浏览器继续解析页面之前，立即读取并执行脚本

三、常用标签

标签（又叫元素）：由<>括起来的内容；便签分为单标签和双标签。
单标签有<img><hr><br>
如果按作用分：标签又分为行内元素和块级元素；
行内元素：span a img s b em strong i sup sub audio svg video等
块级元素：p div h1~h6 等
h5 新加的结构标签：header 页头 nav 定义导航条 section 主体内容部分 aside footer定义页脚
1 a 标签
<a href="" target="_self/_blank" title="">
作用：
① 超链接，完成页面的跳转动作。
href=”#” 跳到页面顶部
href=”javascript: void(0)” 屏蔽a 标签的跳转动作
② 目标为下载资源
<a href="*.rar/*.rar"></a>
③ 电子邮件连接
<a href="mailto:g-yuan@tedu.cn"> 打开邮件</a>
④ 连接到JS
<a href="javascript:JS代码或函数">执行JS功能</a>
⑤ 锚点，跳转到已标记的锚点
怎么标记锚点： <a name="自定义锚点名称"></a> 其他标签:<any id="">内容</any>
怎么跳转到指定锚点：
本页面跳转：<a href="#锚点名称">内容</a>
跳转到其他页面锚点处： <a href="页面的url#锚点名称">内容</a>
2. form 表单
表单作用：收集数据并提交给服务器
① 表单元素：<form action="" method="" enctype="" name="" id=""></form>
action 定义表单提交时发生的动作，值为要传递地址。省略为，提交给本页。
method: 定义表单提交数据的方式；跟据http协议，提交方式共有8种。最常用的有get\post 请求。
enctype: 指定编码方式。编码方式有3中，application/x-www-form-urlencoded 默认方式；multipart/form-data 将文件进行二进制提交（不包括字符\标点）；3. text/plain 将表单中的普通字符进行二进制编码提交。
name: 提交数据时用到，用于区分不同的表单
② 表单控件input
作用：用于接收用户数据并依托于表单提交服务
分类：文本输入框（text，password）,按钮，单选，复选，隐藏，文件选择框，图片。
h5 新加的类型：search tel url range number color email week date month
③ textarea 文本域
④ select 和option
⑥label 用法 <label>控件</label> <label for="控件ID"></label>.
⑦fieldset 用法
<fieldset> <legend>分租标题</legend> </fieldset>
例子：

 <form action="http://www.baidu.com" method="post" name="form1" id="f1">    <fieldset>      <legend>用户基本信息</legend>    <!--文本输入框-->     <p>        用户名：<input type="text" name="txtName" maxlength="10" placeholder="请输入用户名">     </p>     <p>        密&nbsp;码：<input type="password" name="txtPwd" maxlength="20" placeholder="请输入密码" value="123456">     </p>     <p>        确认密码：<input type="password" name="txtConfirmPwd" disabled value="123456">     </p>     <!--单选按钮-->     <p>       用户性别：       <input type="radio" id="chkMale" name="rdoGender" value="M" checked>       <label for="chkMale">男</label>       <input type="radio" id="chkF" name="rdoGender" value="F">       <label for="chkF">女</label>     </p>    </fieldset>     <!--复选框-->     <p>       用户爱好：        <input type="checkbox" name="chkHobby" value="Eat">吃        <input type="checkbox" name="chkHobby" value="Drink">喝        <input type="checkbox" name="chkHobby" value="play" checked>玩        <input type="checkbox" name="chkHobby" value="happy">乐     </p>      <!--隐藏域和文件选择框-->        <p>          <input type="hidden" name="txtID" value="1102345">          <input type="file" name="txtFile">        </p>      <!--文本区域-->       <p>         自我介绍：         <textarea name="txtIntro" cols="50" rows="10">这家伙很懒，什么都没留下</textarea>       </p>      <!--下拉框（滚动列表）-->      <p>        籍贯地址：        <select name="selAddress">          <option value="BJ">北京</option>          <option value="TJ">天津</option>          <option value="SH">上海</option>          <option value="CD">成都</option>          <option value="CQ">重庆</option>          <option value="GZ">广州</option>        </select>      </p>      <p>        就业城市：         <select name="selCity" size="4" multiple>          <option value="BJ">阿富汗</option>          <option value="TJ">伊拉克</option>          <option value="SH">叙利亚</option>          <option value="CD">印度</option>        </select>      </p>     <!--按钮-->      <p>         <input type="submit" value="提交">         <input type="reset" value="重置">         <input type="button" value="普通">         <input type="image" src="images/btn_login.JPG">         <button>另提交</button>       </p>    </form>

四.属性

属性：用于修饰标签内容
语法：写在<>里边，属性=”“。如：width=”“100
标准属性：id class style title

阅读全文

0 0