Html（超文本标记语言 HyperText Markup Language）主流4.01与5.0版本
1. 常识
（1 html与htm区别：运行环境不同 linux运行htm也可以运行html，
windows中html与htm是一样的）
（2开发工具：Dramwaver、Sublime、Atom、WebStrom）
（3标签 成对出现较多、单标记标签较少）
（4 sublime中tab+！可以快速出现html基本框架）
（5 html注释 <!-- -->快捷键ctrl+？ css注释 /* */快捷键ctrl+？ 缩进tab 向后缩进shift+tab）
（6 网页不乱码保障：文档编码、浏览器编码、html文档中charset的值 三者相同）
（7 文件命名 标签命名需要注意语义化）
（html中标签大小写可以随意、但最好遵循小写规范、便于理解）
（8 html与css分开写：表现形式与代码结构相分离）
2标签：
H1标题标签
示例：<h1>一号标题</h1>…………<h6>六号标题</h6>
说明：h标签是标题标签 数字越小字号越大，在文章中一般只有出现一次h1标签
P段落标签
示例：<p>段落标签</p>
说明：段落标签内容一般是文章中一段文字
meta
示例： <meta name=”author” content=”作者姓名” />
<meta name=”keywords” content=”dota2,dota官网” />
<meta name=”description” content=”描述文字” />
说明：单标记标签，author写作者，keywords可以提高网站排名，优化搜索引擎
Img图片
示例：<img src="地址" alt=”提示文字” title=”图片描述文字”>
说明：地址：包括（带域名的绝对地址、磁盘路径的绝对地址、相对路径）
带域名的绝对地址：打开网页——搜索图片————拖出浏览器用新窗口打开——复制URL里面的地址。Alt是图片无法加载是提示的信息。Title是鼠标移动上去之后的描述文字。
磁盘路径的绝对地址：盘符：/文件夹/文件名
相对路径：../images/文件名
a超链接
功能：
1创建超链接
示例：<a href=http://www.baidu.com target=”_blank”>文字图片都可以</a>
说明：这是一个连接到百度的链接。Target是目标网页的打开属性：_blank表示新窗口打开_self是在本窗口打开 _parent在父窗口打开 _top在本窗口重新打开
2锚点
示例：<a href=”http://www.baidu.com#name”>文字图片都可以</a>
在”http://www.baidu.com”网页中有一个标签id=”name” 注意name的语义化示例：<a href=”#name”></a>
在本网页中有一个标签id=”name” 注意name的语义化
说明：第一个链接是本网页到其他网页的锚点，第二个是本页的锚点。
3快速发邮件
示例：<a href=”mailto:174088681@qq.com”>文字图片都可以</a>
说明：（需要电脑端配置邮箱客户端）
4 js调用
示例：<a href=”javascript:alert(‘点我呀，敬请期待’)”>文字图片都可以</a>
说明：双引号与单引号可以交换位置。
Ul无序列表
示例： <ul>
<li></li>
<li></li>
<li></li>
</ul>
说明：
Ol有序列表
示例：<ol>
<li></li>
<li></li>
<li></li>
</ol>
说明：
Dl自定义列表
示例：<dl>
<dt></dt>
<dd></dd>
<dd></dd>
</dl>
说明：
<br>（换行）
表单form
<form action="URL" method="get"> </form>
<!-- method方法有post和get两种 比较如下：
1.get请求的数据会附在URL之后，post提交的数据是放置在http协议包体中。
2.get方式提交数据最多只能是2kb（URL长度限制），post方式相对其莫有限制。
3.post的安全性相对于get要高。
-->
文本框
示例：<input type=”text” name=”username” value=”” placeholder=”请输入姓名”>
说明：
密码框
示例：<input type=”password” name=”pwd” value=”” placeholder=”请输入用户密码”>
说明：
隐藏域
示例：<input type=”hidden” name=”hiddenURL” value=”服务器地址”>
说明：很重要 ，新闻网站生成标题可用
文件上传
示例：<input type=”file” name=”pics” value=””>
说明：
提交按钮
示例：<input type=”submit” name=”submit_01” value=”提交”>
说明：
重置按钮
示例：<input type=”reset” name=”reset_btn” value=”重置”>
说明：
单选框
示例：<input type=”radio” name=”sex” value =”male”>
<input type=”radio” name=”sex” value =”female”>
说明：(1)同名则同组 (2)<input type="radio" name="sex" value="female" id="female"><label for="female">女</label> 注释：点击“女”字同样有点击单选按钮效果
复选框
示例：<input type=”checkbox” name=”ft” value =”football”>
<input type=”checkbox” name=”bk” value =”basketball”>
说明：
普通按钮
示例：<button>普通按钮</button>(默认可以直接提交数据)
示例：<button type=”submit” name=”submit_btn2”>普通按钮</button>(默认可以直接提交数据)
说明：
下拉框
示例：<select name=”subject”>
<option value=”math”>数学</option>
<option value=”chinese”>语文</option>
<option value=”english”>英语</option>
</select>
说明：
文本域
示例：<textarea name=”texts” id=”” cols=”30” rols=”10” value=””>
说明：一个显示为10行30列大小的文本域
表格Table
示例：
<table>
<tr>
<th>内容</th>
<th>内容</th>
</tr>
<tr>
<td>内容</td>
<td>内容</td>
</tr>
<tr>
<td>内容</td>
<td>内容</td>
</tr>
</table>
说明：
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
