一、简介

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>