前端——html（基础）

小鱼儿 2022-11-13 00:51 235阅读 0赞

## 双标签 ##

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
    </head>
    <body>
        <h1>这是一级标题</h1>
    </body>
    </html>

## 单标签 ##

/在后面

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>单标签</title>
    </head>
    <body>
        
        <hr/>
    </body>
    </html>

## 标签的级别 ##

>  *  J3 -  
>     容器级别、文本级别

### 文本级别 ###

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>单标签</title>
    </head>
    <body>
        <p>我是p标签58+*/--==；嚄435%%￥#@%……</p>
        <span>我是span标签</span>
    </body>
    </html>

>  *  J3 -  
>     a、p、span、img、表单元素  
>     只能插入文字或者其他级别的文本标签（不要同一标签嵌套）否则将来学习样式的时候网页的布局会受到影响

### 容器级别 ###

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>单标签</title>
    </head>
    <body>
        <h1>
            我是文字
            <p>
                这是文字
            </p>
        </h1>
    </body>
    </html>

>  *  J3 -  
>     div、hl、dl、dt、dd、ul、ol、li等  
>     网页显示内容部分，可以插入任意内容（文字、文本级别的标签、其他级别的容器标签），或其他级别的标签

### 标签的属性 ###

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>HTML</title>
    </head>
    <body>
        
        <h1 class="box1">
        </h1>
    </body>
    </html>

>  *  J3 -  
>     属性由属性名和属性值两部分组成，标签的属性可能对于整个网页有影响，也可能对一个标签有影响  
>     注意：标签名字和属性之间有一个空格、一个属性可以有多个属性值、一个标签可以有多个属性（属性与属性之间得有空格）  
>     标签与标签之间对于换行和空格是不敏感的，但是为了美观，我们尽量换行

# 标签 #

## h系列标签 ##

>  *  J3 -  
>     headline 标题  
>     容器级别的标签（不能自己嵌套自己）

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>HTML</title>
    </head>
    <body>
        <h1>一级标题</h1>
        <h2>二级标题</h2>
        <h3>三级标题</h3>
        <h4>四级标题</h4>
        <h5>五级标题</h5>
        <h6>六级标题</h6>
    </body>
    </html>

## p标签 ##

>  *  J3 -  
>     paragraph 段落 文本标签只能放文本级别的标签，不能放容器标签，以及自己嵌套（容易出错）

## img标签 ##

>  *  J3 -  
>     单标签  
>     image 图片、图像 可以在网页中显示图片，把他当做本文标签使用即可  
>     属性  
>     src：source 资源，设置图片显示的文件路径  
>     width 宽  
>     height 高  
>     title 标题 主要的作用是当用户的鼠标移动到图片上的提示文字  
>     border 边框 主要设置图片的外层宽度  
>     alt 当图片没有图像的时候，用文字进行替代

## a标签 ##

>  *  J3 -  
>     双标签 文本标签  
>     anchor 锚  
>     俗称超链接，可以实现不用网页的跳转，或同一网页中不同位置进行跳转  
>     属性  
>     href： 路径  
>     title：鼠标移上去提示的文字

# 列表 #

>  *  J3 -  
>     有一个黑色容器，容器中有一项一项小表展示网页内容  
>     列表会将结构相同、内容相关、样式类似的结构，可以用列表来搭建  
>     web领域：无序列表，有序列表，定义列表

## 无序列表 ##

>  *  J3 -  
>     在网页中搭建一个没有顺序的列表  
>     两个标签结合使用ul和li，li标签不能脱离ul、单独使用  
>     ul：UNorder list 表示一个列表的容器（大结构）  
>     li：list item item（项）

## 有序列表 ##

>  *  J3 -  
>     在网页中搭建一个有顺序的列表  
>     两个标签结合使用ol和li，li标签不能脱离ul、单独使用  
>     ol order list

## 定义列表 ##

>  *  J3 -  
>     自定义标题和列表  
>     有时候需要三个标签一起使用dl、dt、dd  
>     dl：definition list 定义 最外层的大结构  
>     dt：definition item 拜师列表主题或者术语  
>     dd：definition description 对于主题术语的描述  
>     dl标签和dt、dd标签嵌套使用（父子关系） dt和dd（兄弟关系）

# 布局标签 #

>  *  J3 -  
>     div和span  
>     俗称盒子，双标签，容器标签  
>     div：division 区域，跨度、分割  
>     划分页面区域，辅助布局（可以将一些内容相识）  
>     span：小区域，小跨度 文本标签  
>     可以用于局部调整

# 表格 #

>  *  J3 -  
>     至少需要三个标签能弄成一个表格  
>     table：表格 ——最外成的大框架  
>     tr table row 表格的行 定义表格内部的行  
>     td table dock 表格单元格，每一行中的单元格  
>     嵌套关系  
>     table——tr——td

# 表单元素 #

可以让用户输入文字的一个小控件

## form ##

>  *  J3 - 白起  
>     双闭合标签  
>     不是一个结构性的标签，是一个功能性的标签，可以将表单元素收集到的数据提供给服务器（后台），所有的表单元素都得书写在form标签的里面  
>     作用：可以设置收集到的数据提交给谁，设置提交数据的方式  
>     这个标签有两个重要属性  
>     method：方法 设置提交数据的方式（get post）  
>     action： 动作 设置收集到的表单数据提交给谁（路径）  
>     form 表单

## input ##

>  *  J3 - 白起  
>     单标签（只有开始没有结束）相当于一个特殊的文字  
>     input有一个非常重要的属性type，根据不同的type值，去创建不同类型的表单元素  
>     如果表单元素type的属性值为text，会创建一个文本框

>  *  J3 - 白起  
>     input标签还有一个常用的属性value，可以设置文本框默认的数值，属性值可以是任意的字符

## 密码框 ##

>  *  J3 - 白起  
>     可以通过input标签获取到  
>     只需要将type类型设置为password

![在这里插入图片描述][20210324212323946.png]  
效果：  
![在这里插入图片描述][20210324212413720.png]

## 单选框 ##

>  *  J3 - 白起  
>     也是通过input获取，type属性值为radio  
>     radio 录音机  
>     单选框都是成组出现，多个选项之间是互斥的

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTg1MTk0NQ_size_16_color_FFFFFF_t_70]

>  *  J3 - 白起  
>     设置单选按钮互斥的方法：同时给这组单选按钮添加一个name的属性，属性值要一样

![在这里插入图片描述][20210324213243420.png]

## 复选框 ##

>  *  J3 - 白起  
>     也是通过input获取，type属性值为checkbox  
>     checkbox：多选、复选

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTg1MTk0NQ_size_16_color_FFFFFF_t_70 1]

>  *  J3 -  
>     如果想要默认选中，可以给这个表单元素设置checked属性，属性值就是它自己

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTg1MTk0NQ_size_16_color_FFFFFF_t_70 2]

## 按钮 ##

>  *  J3 -  
>     input获取  
>     type不同  
>     button：普通按钮  
>     reset ：重置按钮，单击后，form标签内的全部表单元素恢复初始值  
>     submit：提交按钮 单击后，将form的内容给服务器，form标签内的全部表单元素恢复初始值

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTg1MTk0NQ_size_16_color_FFFFFF_t_70 3]

## 文本域 ##

>  *  J3 -  
>     最开始讲得一个文本框,只能给用户提供输入一行文字的地方而文本域可以输入多行文字  
>     常用属性 rows，cols，可以修改文本域的大小，在标签内部写上文字就可以默认的显示出来  
>     ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTg1MTk0NQ_size_16_color_FFFFFF_t_70 4]

## 下拉菜单 ##

>  *  J3 -  
>     需要两个标签结合使用select、option嵌套关系select——option  
>     两者都是双标签、文本标签  
>     select 下拉菜单整体的结构  
>     option 选项 下拉菜单当中的每一项

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTg1MTk0NQ_size_16_color_FFFFFF_t_70 5]  
如果想要有默认值，则得给option添加一个select属性，属性值为select

# 特殊含义的字符 #

>  *  J3 -  
>     空格 &nbsp  
>     <> &gt  
>     版本符号 &copy

[20210324212323946.png]: /images/20221022/bedd38c4647b4f99b532c5151cf0ae60.png
[20210324212413720.png]: /images/20221022/e00fba8f0f0c4c788ed74134e8577c7b.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTg1MTk0NQ_size_16_color_FFFFFF_t_70]: /images/20221022/2443480938e942f4a4ee79b8f2b35b77.png
[20210324213243420.png]: /images/20221022/a8502c0249ad4cef8b37ff465ab45728.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTg1MTk0NQ_size_16_color_FFFFFF_t_70 1]: /images/20221022/7a390a565d5049fd9a60c8d055695a4b.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTg1MTk0NQ_size_16_color_FFFFFF_t_70 2]: /images/20221022/e60ca50aef7645288581df4918eb2f44.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTg1MTk0NQ_size_16_color_FFFFFF_t_70 3]: /images/20221022/b9c206e00b4040f2980bc3d2602004e7.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTg1MTk0NQ_size_16_color_FFFFFF_t_70 4]: /images/20221022/4bc53adabbc24abd80faa97327385f04.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTg1MTk0NQ_size_16_color_FFFFFF_t_70 5]: /images/20221022/c2350559588b4626bbcffe9df1a57d62.png