HTML

一、简介

1、声明编码方式

<meta charset="utf-8">

2、后缀名

.html 或 .htm

3、HTML：HyperText Markup Language 超文本标记语言

HTML的结构

声明一个HTML页面

<!DOCTYPE html>

注：声明的html不区分大小写

二、head标签内元素

标签	描述
<head>	定义了文档的信息
<title>	定义了文档的标题
<base>	定义了页面链接标签的默认链接地址
<link>	定义了一个文档和外部资源之间的关系
<meta>	定义了HTML文档中的元数据
<script>	定义了客户端的脚本文件
<style>	定义了HTML文档的样式文件

meta用法：关键字、描述、作者、固定刷新当前页面时间


<meta name="keywords" content="HTML, CSS, XML, XHTML, JavaScript">
<meta name="description" content="免费 Web & 编程 教程">
<meta name="author" content="Runoob">
<meta http-equiv="refresh" content="30">

三、HTML基础

1、标题

HTML 标题（Heading）是通过<h1> - <h6> 标签来定义的.

<h1>这是一个标题</h1>
<h2>这是一个标题</h2>
<h3>这是一个标题</h3>

2、段落

<p>这是一个段落。</p>
<p>这是另外一个段落。</p>

3、链接

    <a href="http://www.baidu.com" target="_blank">百度一下</a>

target 跳转的自身(_self)或者新建一页(_blankl)

锚标签：页面内的跳转 #name

邮件链接：mailto：...

4、图像

    <img src="img/IMG_6544.JPG" alt="没出图片替代文字" title ="悬停时名称" width="258" height="200" />

相对路径：../ 返回上一级

四、HTML元素

开始标签 *	元素内容	结束标签 *
<ol>	<li>有序列表</li>	</ol>
<ul>	<li>无序列表<li>	</ul>
<dl>	<dt>自定义列名称</dt> <dd>自定义内容</dd>	<dl>
<table>	表格标签 <tr> <td >行一列一</td> <td>行一列二</td> </tr>	</table> colspan="2" 跨行 rowspan="2" 跨列
<iframe src="" >	内联框架	</iframe>
<form action="提交地址" 　　method="get"/"post" >	提交表单 <p>名字: <input type="text" name = "username"> </p>	</form>
<br>	换行
<hr>	水平线
&nbsp/&...	空格/特殊符号

五、表单举例

   <form action="#" method="get">
        用户名：<input type="text" placeholder="请输入用户名"><br>
        密&emsp;码：<input type="password" placeholder="默认为123456"><br>
        性&emsp;别：<label><input type="radio" name="sex" >男
                    <input type="radio" name="sex">女
                     <!--默认选中  保密-->
                    <input type="radio" name="sex" checked="checked">保密
                    </label><br>
        爱&emsp;好：<label><input type="checkbox" name="hobby" checked>运功
                    <input type="checkbox" name="hobby">旅游
                    <input type="checkbox" name="hobby">阅读
                    <input type="checkbox" name="hobby">摄影
                    </label><br>
        地&emsp;址：<label><select name="列表名称" id="" >
                        <!--默认选中广州-->
                        <!--<option value="gz" selected="selected">广州</option>-->
                        <option>请选择</option>
                        <option value="bj">北京</option>
                        <option value="sh">上海</option>
                        <option value="sz">深圳</option>
                    </select></label><br>
        上传头像：<input type="file"><br>
        个人简介：<br>
        <label><textarea cols="20" rows="5">不少于10字</textarea></label><br>
        <input type="submit" value="提交"> <input type="reset" value="重置">
    </form>

hidden隐藏域

readonly只读

disable禁用

placeholder 默认用户提示

required 非空

pattern 正则表达式判断

五、HTML属性

属性	描述
class	为html元素定义一个或多个类名（classname）(类名从样式文件引入)
id	定义元素的唯一id
style	规定元素的行内样式（inline style）
title	描述了元素的额外信息 (作为工具条使用)

六、文本格式化标签

标签	描述
<b>	定义粗体文本
<em>	定义着重文字斜体
<i>	定义斜体字
<small>	定义小号字
<strong>	定义加重语气粗体
<sub>	定义下标字
<sup>	定义上标字
<ins>	定义插入字
<del>	定义删除字

七、媒体元素

1、视频

<video src="... .mp4" controls autoplay></video>

2、音频

<audio src="... .mp3" controls autoplay></audio>