HTML基础HTML-超文本标记语言，网页制作的标准语言。 HTML文件：以.htm或.html结尾的文件。

一、结构-HTML

负责构建页面结构

HTML简单介绍

HTML-超文本标记语言，网页制作的标准语言。 <title>我是内容</title>

元素

<title>我是内容</title>整体为元素

属性

<img src="logo.png" alt="标志" /> src、alt为属性

HTML DOM树

HTML文件结构

HTML文件：以.htm或.html结尾的文件。

<!DOCTYPE html> 文档类型：符合html5标准
<html lang="en"> 搜索引擎：en 英文 zh 中文
<head>
    <meta charset="utf-8"> 元信息 charset 字符集编码方式 utf-8 国际标准编码（utf-8表示所有语言且占用空间小） 
    <title><title>
</head>
<body>
</body>
</html>

乱码问题

1.源码保存编码方式不正确

2.源文件<meta charset="utf-8">中的编码方式不一致

HTML标签

标题h1-h6

段落相关

段落p

换行br

预定义格式pre

水平线hr

行内标签span

注释内容 <!--内容-- >

超链接a

<a href="login.html">登录</a>

1.链接到本站点的其它页面

<a href="person.html">个人</a>

2.链接到其它站点

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

2.虚拟链接

<a href="#">模块1</a>

图片img

<img src="images/logo.png" alt="标志" /> src 图片路径（相对路径，绝对路径），alt 图片显示不出来所显示的文字

图片格式

1.jpg 有损色彩丰富

2.gif 简单动画，背景透明

3.png 无损压缩，透明

区域 div

<div class="content">
    <h1>标题</h1>
    <p>一些内容</p>
</div>

无序列表

<ul>
    <li>无序列表1</li>
    <li>无序列表2</li>
    <li>无序列表3</li>
</ul>

有序列表

<ol>
    <li>有序列表1</li>
    <li>有序列表2</li>
    <li>有序列表3</li>
</ol>

表格

<table border="1">
    <tr>
        <td>内容1</td>
        <td>内容2</td>
    </tr>
    <tr>
        <td>内容3</td>
        <td>内容4</td>
    </tr>
    <tr>
        <td>内容5</td>
        <td>内容6</td>
    </tr>
</table>

<table border="1">
    <tr>
        <th>表头1</th>
        <th>表头2</th>
    </tr>
    <tr>
        <td>内容1</td>
        <td>内容2</td>
    </tr>
    <tr>
        <td>内容3</td>
        <td>内容4</td>
    </tr>
    <tr>
        <td>内容5</td>
        <td>内容6</td>
    </tr>
</table>

表单

表单：采集用户信息表单元素：文本输入框，按钮，单选框，复选框，下拉框，文本域

    <h3>表单</h3>
    <form action="">
        <div>
            <span>账号:</span>
            <input type="text" placeholder="输入账号" name="user">
        </div>
        <div>
            <span>密码:</span>
            <input type="password" placeholder="输入密码" name="password">
        </div>
        <div>
            <span>性别:</span>
            男<input type="radio" value="man" name="sex" checked>
            女<input type="radio" value="woman" name="sex">
        </div>
        <div>
            <span>爱好:</span>
            唱歌<input type="checkbox" value="song" name="hoppy" checked>
            跳舞<input type="checkbox" value="dance" name="hoppy">
        </div>
        <div>
            <span>选项:</span>
            <select name="chose" id="">
                <option value="1">选项1</option>
                <option value="2">选项2</option>
                <option value="3">选项3</option>
            </select>
        </div>
        <div>
            <span>内容:</span>
            <textarea name="content" id="" cols="30" rows="10" placeholder="请输入内容"></textarea>
        </div>
        <div>
            <input type="reset" value="重置" name="reset">
            <input type="submit" value="提交" name="submit">
        </div>
    </form>

type值

type	解释
text	文本
password	密码
radio	单选
checkbox	多选
reset	重置
submit	提交

下拉框

<select name="chose" id="">
        <option value="1">选项1</option>
        <option value="2">选项2</option>
        <option value="3">选项3</option>
</select>

文本域

<textarea name="content" id="" cols="30" rows="10" placeholder="请输入内容"></textarea>

注： checked表示默认选中

语义化

目的：

1.使页面具有良好的结构，让人和机器更好的理解页面内容

2.结构清晰，有利于团队开发和维护

3.有利于seo（搜索引擎）理解和优化

4.容易兼容不同设备

em

强调 替换 斜体，无语义

strong

强调 替换 加粗，无语义

自定义列表

    <h3>自定义列表</h3>
    <dl>
        <dt>结构-html</dt>
        <dd>用于构建页面结构</dd>
        <dt>样式-css</dt>
        <dd>用于页面布局样式</dd>
        <dt>行为-js</dt>
        <dd>用于页面的交互行为</dd>
    </dl>