html基础01

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>

说明：