HTML基础教程-优快云博客

本文链接：https://blog.youkuaiyun.com/m0_74121155/article/details/128437912

HTML网页

目标

HTML的基本标签

HTML的表格

HTML的表单

HTML的框架

内容

1、什么是HTML？

HTML是(Hyper Text Markup Language)，超文本标记语言。

超文本：网页中的超链接（链接）
标记：标签语言（xml、HTML），标记语言不是编程语言。

2、HTML能做什么？

展示数据
收集数据
完成和用户的交互

3、怎么创建HTML文档？

3.1、创建一个文本文档，并将文档的后缀改为.html 或者 .htm

3.2、在文档中编写HTML内容

3.3、在web浏览器上打开文档

4、HTML快速入门

HTML标签的分类

1.双标签：有开始标签和结束标签，html、head、body。。等

2.单标签：单个标签，br、hr、img...等
在标签中可以使用属性，来设置标签的基本样式，属性需要是键值对，并且值需要用引号引起来
HTML中的标签是不区分大小写的，建议使用小写
HTML的基本结构

<html>
    <!-- HTML文档中的注释 -->
    <!-- head：html文档的头部内容 -->
    <head>
        <title>网页的标题</title>
    </head>
    <body>
        <!-- 在网页中显示的内容 -->
        <font color="red">hello，HTML!</font>        
    </body>    
</html>

5、HTML的基本标签

5.1、文件标签

文件标签构成了HTML中的最基本的标签。

html标签：html文件中的跟标签

head标签：头部标签，用于设置html的一些属性、引入其他的资源文件（css、JS）

body标签：主体标签，用于将内容展示在网页中。

title标签：网页标题标签

5.2、文本标签

文本标签用于设置网页中的文本内容

h1~h6：标题标签

p：段落标签

hr：绘制水平线

width：宽度

size：尺寸

algin：对其方式

color：颜色

br：换行标签

font：字体标签

color：字体颜色

size：字体的大小

i：斜体

b：加粗

        <!-- 标题标签：h1~h6 -->
        <h1>HTMl简介</h1>
        <h3>主讲人：陈燕</h3>
        <h6>时间：2020-08-11</h6>
        <h7>哈哈哈</h7>
        <!-- 段落标签:会在内容的最好自动加上换行标签 -->
        <p>
            闭合标签是指由开始标签和结束标签组成的一对标签，这种标签允许嵌套和承载内容。
        </p>
        <p>
            闭合标签是指由开始标签和结束标签组成的一对标签，这种标签允许嵌套和承载内。
        </p>
        <p>
            闭合标签是指由开始标签和结束标签组成的一对标签，这种标签允许嵌套和承载内容。
        </p>

        <!-- 
            hr：水平线
            align：对齐方式
            size：尺寸
            width：长度
            color：颜色
         -->
        <hr align="center" size="5" width="200px" color="red" />

        <h1>静夜思</h1>
        <h3>作者：李白</h3>
        <!-- 
            font:字体标签
                color：设置字体的颜色
                size：设置字体的大小
         -->
        <font color="aquamarine" size="20"> 床<i>前</i>明月光，<b>疑是</b>地上霜。</font> <br />
        举头望明月，低头思故乡。

5.3、图片标签【重点】

img：在网页中显示图片素材

相对路径相对与当前的HTML文档找到文件资源，相对路径没有盘符（c、d、e）

.：代表当前路径 ..：当前文件的上级路劲（文件夹）
绝对路径指目录下的绝对位置，直接到达目标位置，通常是从盘符开始的路径C:\Users\64085\Desktop\1.jpg

  <!-- 
            img：在网页中显示图片
            src：图片路径
            align：对齐方式，top、bottom、middle、left、right，根据周围的文本内容来进行排版
            width：图片的宽度
            height：图片的高度
            alt：当图片无法正常显示时，显示的文本内容
            title：标题，当鼠标放到图片时，显示的提示内容
        -->
        <img src="img/1.jpg" align="center" width="300px" height="400px" alt="局长" title="局长">
        <!--
            图片路径
                -- 相对路径
                    相对与当前的HTML文档找到文件资源，相对路径没有盘符（c、d、e）
                    .：代表当前路径
                    ..：当前文件的上级路劲（文件夹）
                -- 绝对路径
                    指目录下的绝对位置，直接到达目标位置，通常是从盘符开始的路径
                    C:\Users\64085\Desktop\1.jpg
        -->

5.4、超链接【重点】

a：链接到其他的网页上

<!-- 
            a：超链接，链接到其他的网页中
            target：打开的方式
                -- _self，默认值，在当前页面打开
                -- _blank：默认值，在空白页面打开
                -- 
         -->
        <!-- 锚记点 -->
        <a name="top"></a>
        <a href="1.文本标签.html" target="_blank">跳转到1.文本标签.html</a>
        <br>
        <a href="http://www.baidu.com">百度</a>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <!-- 锚记链接:跳转到网页的某一个锚记点 -->
        <a href="#top">top</a>

5.5、列表标签

列表标签：用于展示一类数据

有序列表
- 用于展示排行榜之类的数据
- ol：有序列表
- li：列表中的项
无序列表
- 用于展示导航、同类型的数据信息
- ul：无序列表
- li：列表中的项

<!-- 有序列表 -->
        <ol type="A" start="5">
            <li>上课</li>
            <li>吃饭</li>
            <li>睡觉</li>
            <li>打豆豆</li>
        </ol>
        
        <!-- 无序列表 --> 
        <ul>
            <li>上课</li>
            <li>吃饭</li>
            <li>睡觉</li>
            <li>打豆豆</li>            
        </ul>
        <ul type="disc">
            <li>上课</li>
            <li>吃饭</li>
            <li>睡觉</li>
            <li>打豆豆</li>            
        </ul>
        <ul type="circle">
            <li>上课</li>
            <li>吃饭</li>
            <li>睡觉</li>
            <li>打豆豆</li>            
        </ul>
        <ul type="square">
            <li>上课</li>
            <li>吃饭</li>
            <li>睡觉</li>
            <li>打豆豆</li>            
        </ul>

6、HTML的表格【重点】

table：在早期的网页中，table是用于网页布局，也用于去展示数据（比如展示一个班级的学生信息）。

table的结构

table：表格
- width：table的宽度
- height：table的高度
- border：边框的宽度
- cellspacing：边框到边框的距离，如果为0，那么两个边框就重合了
- cellpadding：边框到内容的距离
- bgcolor：背景颜色
tr：行
td：单元格
th：表头
caption：表格的标题
thead：表格的头部
tbody：表格的主体
tfoot：表格的尾部

表格的结构
<!-- table:表格 -->
<table>
    <!--tr:行 -->
    <tr>
        <!-- th:表头的单元格 -->
        <th></th>
    </tr>
    <tr>
        <!-- td:单元格,table中最小的单位 -->
        <td></td>
    </tr>
</table>

7、HTML的表单【重点】

前面所有的标签都是用户展示内容的标签，表单标签可以获取到用户的数据，并和服务器进行数据交互

form：表单标签用于确定需要提交数据的区域，在网页中不会显示出来 action：form表单提交的地址 method：提交的的方式 -- get 提交的数据会显示在浏览器上的地址栏限制数据的大小，每个浏览器对url的长度限制都不相同安全性较低 -- post 提交的数据不会显示在浏览器上的地址栏不限制数据的大小安全性较高

表单需要通过submit按钮提交数据；表单项要能够提交的服务器，每个input都需要设置name属性。

表单元素的类型

input

常用属性

value：定义表单元素的值,此值是数据提交时键的值

name：定义表单元素的名称，此名称是提交数据时的键名

maxlength：最多能够输入多少个字符，text 和 password

placeholder：提示信息，text 和 password

readonly: 只读，text 和 password

disabled: 对所用input都好使.
- type="text" 定义单行文本输入框
type="password" 定义密码输入框
- type="hidden" 隐藏域，标签元素存在，但是不会在页面中显示
type="radio" 定义单选框
- 如果是一组单选按钮组，单选按钮name中的值需要一致
  - checked：是否默认选中
- type="checkbox" 定义复选框
  - 如果是一组复选框组，复选框name中的值需要一致
  - checked：是否默认选中
type="file" 定义上传文件 form表单需要加上属性enctype="multipart/form-data"
- type="date" 定义一个日期标签
type="date-local" 定义一个日期时间标签
- type="submit" 定义提交按钮
type="reset" 定义重置按钮
- type="button" 定义一个普通按钮
type="image" 定义一个图片按钮
select
- 下拉列表
  - select：默认选中某一项
textarea
- 多行文本域
  - cols：多行文本域的行数
  - rows：多行文本域的列数