HTML 简介

个人编写HTML使用的软件是dreamweaver，这个软件的话，正版是要购买的，一开始学习HTML就是用的这个软件了，挺好用的，而且代码提示特别方便，不用担心太多的标签和属性记劳~

1.什么是HTML？

HTML 是用来描述网页的一种语言，指的是超文本标记语言: HyperText Markup Language；
HTML 不是一种编程语言，而是一种标记语言；
HTML文档也叫做 web 页面；

2.HTML基本结构

<!DOCTYPE html>：文档声明；
<html>：HTML 页面的根元素；
<head>：用于定义文档的头部，是所有头部元素的容器；
<meta>：提供有关页面的元信息，位于文档的头部，不包含任何内容；
<title>：文档的标题；
<body>：定义文档的主体，包含文档的所有内容；

3.HTML标签使用？

HTML 标签是由尖括号包围的关键词，且通常是成对出现的如<a></a>，当然也有单个的，只不过比较少如<hr>；
标签对中的第一个标签表示开始标签，第二个标签表示结束标签；

4.HTML常用标签介绍

除了HTML基本结构的几个标签以外，HTML还有一些比较常用的基本标签；

（1）文本标签：

h1-h6：用于定义标题，h1为最大标题，h6为最小标题；
p：定义段落；
span：组合文档中的行内元素；
br：换行；
hr：水平线；
strong/b：加粗文字；
em/i：斜体；
u：下划线；
s：删除线；
pre：定义预格式化的文本，保持原有格式；
sub：下标；
sup：上标；
blockquote：块引用；

（2）布局标签：

div：定义文档中的分区或节，把文档分割为独立的、不同的部分；
header：定义页面的头部；
aside：用作文章的侧栏；
section：定义文档中的节；
footer：定义文档或节的页脚，通常包含文档的作者、版权信息、使用条款链接、联系信息等；
article：规定文章独立的其他内容，如标题、内容、评论；

（3）多媒体标签：

img：用于在网页中插入图像；
audio：定义声音，比如音乐或其他音频流；
video：定义视频，比如电影片段或其他视频流；

（4）超链接标签：

a：定义超链接，指定页面间的跳转；

（5）序列化标签：

ul：定义无序列表；
ol：定义有序列表；
li：定义列表项目，可用在无序列表ul和有序列表ol中；
dl：定义了定义列表；
dt：定义了定义列表中的项目（即术语部分）；
dd：在定义列表中定义条目的定义部分；

（6）表格标签：

table：定义 HTML 表格；
tr：定义表格的行；
td：定义表格的单元；
th：定义表头；
caption：定义表格标题；
col：为表格中一个或多个列定义属性值；
colgroup：用于对表格中的列进行组合，以便对其进行格式化；
thead：定义表格的表头；
tbody：表格主体，也就是正文部分；
tfoot：定义表格的页脚（脚注或表注）；

（7）表单标签：

form：用于为用户输入创建 HTML 表单；
input：用于搜集用户信息；
button：定义一个按钮；
select：创建单选或多选菜单；
option：定义下拉列表中的一个选项；
textarea：定义多行的文本输入控件；
label：为 input 元素定义标注（标记）；
fieldset：用于将表单内的相关元素分组；
legend：为 fieldset 元素定义标题；

5.HTML注意事项

HTML文件当以后缀名为 .html 或 .htm 来命名；
HTML标签和属性是不区分大小写的，建议HTML标签和属性都小写，属性值必须用双引号包围；
HTML标签都是以开始标签起始，以结束标签终止；
HTML标签之间尽量缩进与换行，每行代码不要过长，方便阅读和维护；
HTML标签使用必须符合标签嵌套规则，如禁止a标签嵌套a标签，p标签嵌套div标签等；
建议不使用HTML已经废弃的或者不赞成使用的标签，少使用table布局、iframe框架嵌套以及flash播放器；

Ol 对象

Ol 对象表示一个 HTML <ol> 元素。

访问 Ol 对象

您可以使用 getElementById() 来访问 <ol> 元素：

var x = document.getElementById("myOl");

创建 Ol 对象

您可以使用 document.createElement() 方法来创建 <ol> 元素：

var x = document.createElement("OL");

Ol 对象属性

属性	描述
compact	HTML5 中不支持。使用 style.lineHeight 替代。设置或返回列表是否呈现比正常情况更小巧的效果。
reversed	设置或返回列表是否为降序。
start	设置或返回有序列表的 start 属性的值。
type	设置或返回有序列表的 type 属性的值。

标准属性和事件

Ol 对象同样支持标准属性和事件。

如您还有不明白的可以在下面与我留言或是与我探讨QQ群308855039，我们一起飞！

ody

常用标签

body分为块级和行内

块级独占整行
行内内容有多少就占多少

文本格式化标签

br 换行

<div>qwer<br/>zxcv</div>

div和span

div 块级标签样式

<div style="background-color: green;">qwer</div>

span 行内标签样式

span style="background-color: green;">zxcv</span>

p 段落

<p>hahahahah</p> 
<p>hahahahahaaa</p>

h 标题

h1~h6y依次变小

   <div>默认文字字体</div>
   <h1>再再再再再粗一点</h1>
   <h2>再再再再粗一点</h2>
   <h3>再再再粗一点</h3>
   <h4>再再粗一点</h4>
   <h5>再粗一点</h5>
   <h6>粗一点</h6>

链接

a 超链接，跳转到指定的地址

<a href="http://www.baidu.com" title="baidu">百度</a>

锚点，点击后跳转到指定位置

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title>野鸡平台</title>
</head>
<body>
<h1>章节</h1>
<a href="#i1" title="第一章">第一章 寂寞的春天</a>
<a href="#i2" title="第二章">第二章 寂寞的夏天</a>
<a href="#i3" title="第三章">第三章 寂寞的秋天</a>
<a href="#i4" title="第四章">第四章 寂寞的冬天</a>
<h1>内容</h1>
<div style="height: 1000px;" id="i1">
   <h3>第一章 寂寞的春天</h3>
   <p>春暖花开,万物复苏,又到了交配的季节。</p>
</div>
<div style="height: 1000px;" id="i2">
   <h3>第二章 寂寞的夏天</h3>
   <p>夏天夏天悄悄过去留下小咪咪</p>
</div>
<div style="height: 1000px;" id="i3">
   <h3>第三章 寂寞的秋天</h3>
   <p>今年的秋天真是寂寞呀！！！</p>
</div>
<div style="height: 1000px;" id="i4">
   <h3>第四章 寂寞的冬天</h3>
   <p>下雪</p>
</div>
</body>
</html>

ul ol dl 列表展示

ul 无序列表
ol 有序列表
dl 层级列表
li 列表项目

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>野鸡平台</title>
</head>
<body>
    <ul>
        <li>周杰伦</li>
        <li>林俊杰</li>
        <li>王力宏</li>
    </ul>
    <ol>
        <li>铁锤</li>
        <li>钢弹</li>
        <li>狗蛋</li>
    </ol>
    <dl>
        <dt>河北省</dt>
        <dd>邯郸</dd>
        <dd>石家庄</dd>
        <dt>山西省</dt>
        <dd>太原</dd>
        <dd>平遥</dd>
    </dl>
</body>
</html>

table 表格

table表格标题
thead表格标题
tr 行标签
th 列名
tbody表格内容
tr 列标签
td 列内容

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>6666</title>
</head>
<body>
    <table border="3">   <!--border 选择表格样式-->>
        <thead>
            <tr>
                <th>姓名</th>
                <th>年龄</th>
                <th>爱好</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>xxxx</td>
                <td>18</td>
                <td>看书</td>
            </tr>
            <tr>
                <td rowspan="3">aaaa</td>  <!--rowspan 合并单元格-->>
                <td>18</td>
                <td>吃饭</td>
            </tr>
            <tr>
                <td>33</td>>
                <td>heiheihei</td>>
            </tr>>
        </tbody>
    </table>
</body>
</html>

img 图片

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>6666</title>
</head>
<body>
    <!--显示本地图片，找不到图片则显示alt中的文字-->
    <img src="img/lover.png" alt="美女">
    <!--显示网络图片-->
    <img src="https://images.cnblogs.com/cnblogs_com/wupeiqi/662608/t_212313579359018.png" alt="妹子">
</body>
</html>

用户交互

按钮标签

type

buttom: 普通
submit: 提交
reset: 重置

 <button type="button"> 按钮 </button>

input

text，文本框。
password，密码框。
radio，单选框（必须设置name属性相同，否则无法实现）。
checkbox，复选框。
file，文件上传。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>666666</title>
</head>
<body>
    <h3>文本框</h3>
    <input type="text">
    <h3>密码框</h3>
    <input type="password">
    <h3>单选框</h3>
    <input type="radio" name="gender">男
    <input type="radio" name="gender">女
    <h3>复选框</h3>
    <input type="checkbox">篮球
    <input type="checkbox">足球
    <input type="checkbox">橄榄球
    <h3>上传文件</h3>
    <input type="file">
</body>
</html>

select下拉框

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>HTML学习</title>
</head>
<body>
    <h3>单选</h3>
    <select>
        <option>上海</option>
        <option>北京</option>
        <option>深圳</option>
    </select>
    <h3>多选</h3>
    <select multiple>
        <option>上海</option>
        <option>北京</option>
        <option>深圳</option>
    </select>
</body>
</html>

textarea多行文本框

<!DOCTYPE html>
卧槽，无情呀
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <title>HTML学习</title>
</head>
<body>
    <textarea>文本内容写在这里...</textarea>
</body>
</body>
</html>

form表单

用于提交数据到后台

提交时，只会提交form标签内部【用户交互】相关的标签。
<input type="submit" value="提交"> 用于提交当前所在的表单。
<input type="reset" value="重置"> 用于重置当前标签中的选项。
form标签内置属性action="/xx/" ，表示表单要提交的地址。method="get"，表示表单的提交方式。enctype="multipart/form-data"，如果form内部有文件上传，必须加上此设置
form内部【用户交互】相关标签必须设置name，不然提交数据后后端无法获取

// 提交表单之后，实际上会将表单中的数据构造成一种特殊的结构，发送给后台，类似于：
{
    user:用户输入的姓名,
  pwd:用户输入的密码,
    ...
}

radio、checkbox、select 除了要设置name属性以外，还必须设置value属性，因为这三中标签在form表单提交时，不会把看到的内容提交到后台，而是把选择选项对应的value值提交到后台。

在线咨询

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商