<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    
</body>
</html>

网页基本结构的翻译：

<!DOCTYPE html> ---声明当前网页类型

<html lang="en">---

html---一个页面的根节点

lang属性设置或返回元素的语言

"lang"的意思就是“language”语言的意思，

“en”即表示english，

如果是中文页面，可将其改为<html lang="zh">zh即表示中文

<meta charset="UTF-8">---字符集编码,格式是utf-8

(必须三码合一，只有三码合一，才能保证当前我们浏览的页面不会出现乱码)

三码指:

(1)标签内charset的编码是不是UTF-8

(2)编译器右下角显示的编码是不是UTF-8

(3)把html文件用记事本打开，记事本内点文件另存为后显示的右下角的编码是不是UTF-8

HBuilderX代码在浏览器中运行：

选择自己有的浏览器，推荐安装火狐或谷歌。因为公司一般要求前端代码兼容谷歌浏览器。

二、html的标签：

title标签：

<title>html第一次课</title>-----网页的标题，

<title>艺淳的html寒训</title>

标签里面写的字显示在页面选项卡中。

编写页面时注意事项:

标签要成对出现（有开始标签，就会有结束标签）

body标签里都可以放什么？

标题标签，段落标签、页面布局标签、无序列表标签

body标签里写的内容都会在浏览器端呈现

标题标签 h1 h2 h3 h4 h5 h6---要成对出现,如<h1> </h1>

在一个页面中h1最多只能出现一次，如果出现多次，搜索引擎就会认为你是在作弊，严重情况下会k掉整个网站

h1 --- 一级标题（主标题）

h2 --- 副标题

h3 --- 副标题

h2--h6 (可以出现多次)

<!-- 标题标签（从百度里学习借鉴一下各个h的用法） -->
    <h1>主标题</h1>
    <h2>二级标题</h2>
    <h3>三级标题</h3>
    <h4>四级标题</h4>
    <h5>五级标题</h5>
    <h6>小标题</h6>

运行效果：

特点:1.文字大小逐级变小 2.默认加粗 3.占一行自动换行

文字标签

<a></a>

默认的属性href --- 文字链接（指定跳转的页面）

target属性:如果没给target属性,默认就是在当前选项卡刷新显示href的链接所跳转的页面，等于target="_self"；如果给target="_blank"，那么在新的选项卡打开（推荐使用的）a标签特点：默认文字带有颜色，

浏览器默认的文字大小16px！

而12px是最小字号，不能比12px再小

<!-- 2.文字标签a -->
   <!-- 在新的选项卡打开 -->
   <a href="http://www.baidu.com" target="_blank">百度</a>
   <!-- 在当前的选项卡打开 -->
   <a href="http://jd.com" target="_self">京东</a>

注意事项：标签内属性用 = 号。

段落标签p

<!-- 3.段落标签 -->

    <p>段落标签</p>

页面布局标签 div

<!-- 4.页面布局标签 -->

    <div>页面布局</div>

p标签和div标签差异:

div标签默认没有上下外边距；

p标签默认是有上下外边距(橙色区域margin)

span标签:

<!-- 5. span标签 -->

    <span>小区域</span>

正常如果不添加任何样式(style、css)，这个span是无意义的,

此标签需要与样式一起使用；

无序列表ul li --- 必会（常用），嵌套写

快捷方式：ul>li*n个需要的li

<!-- 6.无序列表 -->

    <ul>

        <li>淳淳</li>

        <li>瑶瑶</li>

        <li>琪琪</li>

    </ul>

运行结果：

特点：li标签自带样式----小黑色的圆圈

有序列表ol li --- 简单了解即可，嵌套写

    <!-- 7. 有序列表-->

    <ol>

        <li>淳淳</li>

        <li>瑶瑶</li>

        <li>琪琪</li>

        <li>星星</li>

    </ol>

运行结果：

特点：li标签自带数字序号

列表项 dl dt dd

dt-----表的头

dd----对表头进行阐述和说明

<dl>
	<dt>apple</dt>
	<dd>意思是苹果</dd>
	<dt>banana</dt>
	<dd>意思是香蕉</dd>
</dl>

运行结果

不是嵌套写，而是dl套dt和dd，dd在dt后面。

img标签 --- 图片

src属性----用于存放图片路径（相对路径和绝对路径）

相对路径： ../ (每次向上返回一层就用一个../)

向上返回两层 ../../

文件夹名/图片名+图片的格式

         <!-- 相对路径 -->

    <img src="../img/xcc.jpg" alt="">

绝对路径：

(1) 带有硬盘盘符号

本地图片用浏览器打开后复制上面显示的地址

(2)带有域名（以http协议开头的）

网上的图片，右键，复制图片地址

<!-- 绝对路径：带有硬盘盘符号 -->
<img src="file:///C:/Users/Administrator/Desktop/ychx/img/xyy.jpg" alt="">

<!-- 绝对路径：带有http协议 -->
<img src="https://www.baidu.com/img/pc_1c6e30772d5e4103103bd460913332f9.png" alt="">

alt属性---由于网络等因素导致图片无法正常加载，一般用文本替代图片（面试经常会问到的）

width属性

height属性

<!-- img的宽、高、alt属性 -->

    <img src="../img/dyy.jpg" width="200px" alt="">

    <img src="../img/.jpg" width="200px" alt="喜欢">

    <img src="../img/dcc.jpg" width="200px" alt="">

img标签的宽度和高度设置一个即可，另一个就会等比缩放

行内标签和块级标签区别：

块级标签：独占一整行（纵向排列）

（可以进行宽度和高度数值的设定，可设）

h1----h6 p div li dl dt dd

行内标签: 在一行内显示，不会另起一行（横向分布)

(设置宽度和高度是无效的)

a span strong

行内块标签:(本身自带宽度和高度的属性，可设)

img---行内块标签

strong标签: 一般用于对文字进行强调

<!-- strong强调标签 -->

    <p>淳淳<strong>喜欢</strong>学习</p>

运行结果：

· 标签的嵌套规则：

块级标签可以嵌套行内标签的，行内标签不可以套块标签。

不管乱不乱码！就是不能套！行业规范

p标签(块)却不能套块属性标签！可以套a、span等行内标签。

乱码

嵌套的时候注意代码缩进。

form基础表单:

目标:熟悉常见input表单的使用方式

作用:用于将用户输入的数据提交到后台服务器

<!-- 表单 -->

    <form action="http://www.baidu.com" method="get" name="ccdebiaodan"></form>

name属性: 表单提交时的名称

action属性: 表单提交到的地址

method属性:提交表单的方式post与get

面试常考:post与get提交方式的区别

（建议用post方式提交）

1.数据提交的方式不同，get提交方式在地址栏中可以看到， post方式提交在地址栏中看不到

2. get一般用于提交少量数据，post用于提交大量的数据

3. get最多能提交1K数据，受浏览器的限制；

post理论上无限制，受服务器限制

4. get提交的数据在浏览器历史记录中依然存在，安全性不好。

input标签里的name 和 value----- 是用来提交到后台的，value值可以为空，也可以写值（name必须要有）

    <!-- 文本 -->

    用户名：<input type="text" name="username" value="用户名">

    <!-- 密码 -->

    密码：<input type="password" name="pd" value="密码">

    <!-- 提交 -->

    提交：<input type="submit" value="表单提交">

    <!-- 单选按钮，name相同，value不同 -->

    男:<input type="radio" name="sex" value="0">

    女:<input type="radio" name="sex" value="1">

    <input type="submit" value="表单提交">

单选按钮不给value值是不可以的，默认显示的是on-----后台开发人员不清楚我们前端选择了男还是女

lable标签---没有实际意义提高用户体验，能绑定到input输入框上，它可以让input自动获取焦点（label的for属性必须等于input的id，才能绑定到一起）

 <!-- 字也能点（提高用户体验）： -->

        <input type="radio" name="x" id="girl" />

            <label for="girl">

                女

            </label>

        <input type="radio" name="x" id="boy"/>

            <label for="boy">

                男

            </label><br/>

<br/>换行

<!-- 默认提示信息 -->

    <input type="text" placeholder="默认提示信息" value=""/><br/>

头像：<input type="file"/><br/>

保密：<input type="hidden" value="保密"/><br/>

普通按钮：<input type="button" value="普通按钮"/><br/>

多选：

    <input type="checkbox"/>吃

    <input type="checkbox"/>喝

    <input type="checkbox"/>玩

    <input type="checkbox"/>乐<br/>

默认提示信息：

    <input type="text" placeholder="我爱你" value=""/><br/>

重置：<input type="reset"/><br/>

默认选择：

        <input type="radio" name="s" checked="checked" />是

        <input type="radio" name="s"/>否<br/>

不许更改：

        <input type="text" value="" disabled="disabled" />

        <input type="text" value="" readonly="readonly"/><br/>

输入框的长度设定：

        <input type="text" value="" size="50"/><br/>

多行文本输入标签：

        <br/><textarea cols="10" rows="5"></textarea><br/>

下拉菜单：

        <select>

            <option>地点</option>

            <option>长春</option>

            <option>四平</option>

            <option>延吉</option>

            <option>杭州</option>

            <option>北京</option>

            <option>上海</option>

        </select><br/>

下拉菜单改列表：<br/>

<select multiple="multiple">

    <option>地点</option>

    <option>长春</option>

    <option>四平</option>

    <option>延吉</option>

    <option>大连</option>

</select><br/>

下拉菜单加分标题：

<select>

    <optgroup label="吉林">

        <option>松原</option>

        <option>长春</option>

        <option>四平</option>

        <option>延吉</option>

    </optgroup>

    <optgroup label="辽宁">

        <option>葫芦岛</option>

        <option>秦皇岛</option>

        <option>沈阳</option>

        <option>大连</option>

    </optgroup>

</select>