前端---认识HTML

什么是HTML？

我们知道 网站 = 前端（网页） + 后端（服务器）。前端（网页）是展示给用户看的；后端（服务器）是用来存储数据和组织业务逻辑的。

那如何制作一个前端的网页呢？ 其实主要依赖三门编程语言：
HTML：描述页面的结构
CSS：描述页面的样式
JS：描述页面的动态交互

今天，我们就先来介绍一下HTML的语法和使用，让大家可以做出一个网站的页面结构。CSS和JS会在后面的篇章中介绍。

HTML的读取、运行

我们知道代码的执行都是需要经过编译的，想要编译就一般需要使用到开发工具，就像Java运行在JDK上一样。那么前端的这三种编程语言该运行在什么样的开发工具上呢？直接使用浏览器就可以。

HTML不需要编译，直接让浏览器“读取”就能执行。浏览器最核心的东西就是内核，它的内核就能帮助我们识别HTML并把页面渲染在浏览器上。

HTML的标签

HTML是一个标签化的语言，它借助标签来完成自己的功能。

注：

1. html是由标签组成的

2. 大部分标签都有开始标签和结束标签，小部分的标签只有开始标签没有结束标签

3. 标签之间是可以嵌套的，他们之间是树形结构的。

   html是head和body的父标签；head和body是html的子标签。 head和body是兄弟标签

注释标签

1

注：我们可以在 !- -和- -直接添加注释内容

标题标签

	<h1>这是一级标题h1>
    <h2>这是二级标题h2>
    <h3>这是三级标题h3>
    <h4>这是四级标题h4>
    <h5>这是五级标题h5>
    <h6>这是六级标题h6>
1
2
3
4
5
6

段落标签

 	<p>
        这是一段话
    p>
1
2
3

注：段落标签之间会换行，并且有明显的段落间距

换行标签

<br>
1

注：

1. br标签是一个单标签，只有开始标签没有结束标签
2. 在HTML里面必须使用br标签进行换行，直接按enter换行是没用的

格式化标签

	<strong>加粗strong>
    <b>加粗b>

    <i>倾斜i>
    <em>倾斜em>

    <s>删除线s>
    <del>删除线del>

    <u>下划线u>
    <ins>下划线ins>
1
2
3
4
5
6
7
8
9
10
11

图片标签

<img src="" alt="">
1

注：

1. img标签是一个单标签，只有开始标签没有结束标签
2. img标签必须要有一个src属性，通过这个属性来指定你要展示的图片的路径。这个路径可以是绝对路径，也可以是相对路径，还可以是网络路径
3. alt属性会在图片加载失败时，显示出alt里面的文字（自己写入的）

a标签

<a href="">a>
1

注：a标签就是超链接的意思，可以链接到另外一个资源，点击时即可访问。

表格标签

	<table>
        <tr>
            <th>姓名th>
            <th>年龄th>
        tr>
        <tr>
            <td>张三td>
            <td>1td>
        tr>
        <tr>
            <td>李四td>
            <td>2td>
        tr>
        <tr>
            <td>王五td>
            <td>3td>
        tr>
        <thead>这是thead部分thead>
        <tbody>这是tbody部分tbody>
    table>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

列表标签

• 有序列表

	<ol>
        <li>张三li>
        <li>李四li>
        <li>王五li>
    ol>
1
2
3
4
5

• 无序列表

	<ul>
        <li>张三li>
        <li>李四li>
        <li>王五li>
    ul>
1
2
3
4
5

• 自定义列表

	<dl>
        <dt>一些人dt>
        <dd>张三dd>
        <dd>李四dd>
        <dd>王五dd>
    dl>
1
2
3
4
5
6

表单标签

表单标签就是为了和用户交互的。

form标签

	<form action="/hi" type="get">
        <input type="text">
        <input type="submit" value="提交">
    form>
1
2
3
4

注：

1. form标签的功能是构造一个HTTP请求，进行前后端交互。
2. 必须搭配submit使用

input标签

input标签有很多的形态：

文本框

	<input type="text">
    <input type="password">
1
2

单选框

	<input type="radio" name="gender">男
    <input type="radio" name="gender">女
1
2

注：设置为单选框类型后，只有指定相同的name属性，才能达到互斥的效果

	<input type="radio" name="gender" id="male"><label for="male">男label>
    <input type="radio" name="gender" id="female" checked="checked"><label for="female">女label>
1
2

注：

1. 可以使用label来扩大点击范围。不设置时只有点击⭕才能选上；设置后点击文字也可以选上
2. 使用checked属性可以设置默认选中

复选框

	<input type="checkbox" name="action">吃饭
    <input type="checkbox" name="action" checked="checked">睡觉
    <input type="checkbox" name="action">打豆豆
1
2
3

注：也可以设置checked属性，也可以使用label来放大点击范围

普通按钮

<input type="button" value="这是按钮" onclick="alert(hello)">
1

注：点击按钮后会触发onclick设置的行为

提交按钮

<input type="submit" value="提交按钮">
1

注：搭配form表单标签使用，进行前后端交互

文件选择框

<input type="file">
1

注：可以在本地选择文件，上传到服务器

select标签

	<select>
        <option>北京option>
        <option>深圳option>
        <option>上海option>
        <option selected="selected">杭州option>
    select>
1
2
3
4
5
6

textarea标签

<textarea cols="50" rows="10">textarea>
1

注：

1. input只能写一行；textarea可以写多行
2. 可以通过cols属性设置文本框的宽度；可以通过rows设置文本框的高度

特殊标签

下面介绍的这两个标签搭配CSS、JS可以实现上面介绍的大部分标签的功能

div标签

<div>这是divdiv>
1

注：是块级元素，默认会换行

span标签

<span>这是spanspan>
1

注：是行内元素，默认会放在同一行