HTML--简述、常用标签、列表标签、表单、表格标签、实体字符、块元素和行内元素

小白小白从不日白

已于 2022-04-06 13:22:18 修改

阅读量865

点赞数 1

分类专栏： html+css 文章标签： html5 html

于 2021-03-26 20:49:25 首次发布

本文链接：https://blog.csdn.net/weixin_43285360/article/details/115254303

版权

html+css 专栏收录该内容

8 篇文章 1 订阅

订阅专栏

一、简述

在这里插入图片描述
HTML：超文本标记语言
超：代表超链接
超文本：指的是通过一系列的超链接，将不同空间里面的资源链接在一起，形成一个网状的可相互连接的结构。可以传递文字、图片、视频、音频等等。浏览器发送一次请求，服务器就可以响应多个资源。

标记（也称为标签）：例如<html></html> 其中第一个标签是开始标签，第二个标签是结束标签

<font color="red" size="5">
通俗理解：在记事本当中，用标记写出来的一种计算机标记语言。

注意： HTML中所有的标记都是W3C标准组织已经规范了，不能自己创建标签。并且每个版本都会有一些差异，HTML有很多版本。目前最新使用最多的版本是H5

什么是W3C标准？

万维网联盟（外语缩写：W3C）创建于1994年，是Web技术领域最具权威和影响力的国际中立性技术标准机构。到目前为止，W3C已发布了200多项影响深远的Web技术标准及实施指南标准不是某一个标准，而是一系列标准的集合。

HTML特点：

简单性：没有复杂的逻辑，你掌握这些标签的作用，合理搭配就可以设计出网页
可扩展：HTML标签有很多功能，新增一个标签就可以带来一个新的功能
跨平台：网页的运行环境是浏览器，只要保证你的系统有浏览器就可以运行。
通用性：页面写好了之后，可以相互的嵌套。一旦网页设计好了后，任何人都可以访问到你的页面。不管你使用什么浏览器都可以访问

1.1 主流浏览器都有哪些？内核又是什么？

首先主流浏览器如下：

其次我们来分析一下它们的内核：
IE:trident
Chrome(谷歌):webkit(以前) blink(现在)
Opera(欧朋):webkit(以前) blink(x现在)
Firefox(火狐):gecko
Safari:trident+webkit

1.2 HTML的标准结构（骨架）

<!--声明文档类型，是HTML5的声明位于文档的最前面，处于标签之前，不区分大小写，是网页必备的组成成分，为了避免浏览器的怪异模式-->
<!DOCTYPE html>
<html>
	<head>
        <!--强制设置字符集，解决汉字乱码-->
		<meta charset="utf-8">
        <!--声明浏览器渲染方式-->
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
         <!--
         开启理想视口 如果不写该代码，移动端的默认值则为980px
         width=device-width：视口宽度=设备宽度
         initial-scale=1.0：初始化的缩放比例
         maximum-scale=1.0：最大缩放比为1
         user-scalable=no：不允许用户进行缩放
          -->
        <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
        <!-- 设置网页的关键字 -->
        <meta name="keywords" content="蜗牛学院">
        <!-- 网页描述 -->
        <meta name="description" content="设置网页的描述">
        <!-- 设置作者 -->
        <meta name="author" content="xiaowoniu">  
		<title>my first page</title>
	</head>
	<body>
		<!-- 主体内容区域 -->
	</body>
</html>

DOCTYPE的作用：

使用了DOCTYPE可以正确声明文档的类型，有利于浏览器解析
可以正确告诉浏览器，我们使用的HTML版本是哪一个。浏览器根据不同版本对代码有不同解析
正确声明DOCTYPE有利于浏览器识别采用哪种模式来运行代码

浏览器两种解析模式：

严格模式：又称标准模式，是指浏览器按照 W3C 标准解析代码（服务于标准规则）
混杂模式：又称怪异模式或兼容模式，是指浏览器用自己的方式解析代码（服务于旧式规则）
浏览器为什么有两种解析模式：
浏览器在发展的最初没有标准化，老版本浏览器下面能运行的代码，现在放在新版本浏览器下面无法运行，新版本的浏览器采用W3c的标准。以前写的代码就会不兼容，浏览器为了解决这个问题，所以采用两种模式来解析代码
如何区分两种解析模式：如果文档包含严格的 DOCTYPE ，那么它就是以严格模式呈现，否者为混杂模式。

拓展：

<base href="/">

用得相对较少，作用就是指定一个基础路径，其中 href=“” 这个就是基础路径，指定之后你所有的链接都是以这个为基准来进行计算
在这里插入图片描述

1.3 标签分类情况

单标签例如：<! Doctype html>
双标签例如：<html></html> <head></head> <title></title>
包含（嵌套关系）例如： <head><title></title></head>
并列关系例如： <head></head><body></body>

1.4 常用的开发工具

Dw 历史悠久，设计师使用。
Sublime 轻量级有很多好用的插件。
Webstorm 重量级太过智能。
VSode 轻量级有很多好用的插件
Hbuilder 重量级太过智能
……
其实对于如何选择编码工具这个并没有什么硬性的要求，记事本我也照样可以写html代码，所以在选择编码工具的时候完全取决于自己，那种编码工具用起上手就用哪种。

二、常用标签

2.1 标题标签

标题标签：h1~h6

 <!--
        		标题标签：h1~h6
            语法：<hn>标题</hn>
            特点：
                1.h1也就是一级标题在一个页面最好只出现一次
                2.从h1到h6，其标题字体大小依次逐级减小,h6为最小级标题，没有所谓的h7,h8等标题标签
                3.为块级元素，独占一行
                4.标题标签之间不可相互嵌套
    -->
    <h1 align="left/right/center">我是一级标题</h1>
    <h2>我是二级标题</h2>
    <h3>我是三级标题</h3>
    <h4>我是四级标题</h4>
    <h5>我是五级标题</h5>
    <h6>我是六级标题</h6>

生成h1~h6的快捷键：h$*6

2.2 段落、换行、水平线

p标签

<body>
    <!--
        p标签：
            语法:<p>文本内容</p>
            特点：
                1.块级元素
                2.上下自动生成空白行
                3.文字与文字之间的多个空格、换行，会被折叠成一个空格
                4.标签之间的“内壁”和文字之间的空格会被忽略
                5.p标签里面不能嵌套p标签，可以嵌套其他标签	
    -->
    <p>  come on  </p>
</body>

换行 <br/>
水平线 <hr/>

<hr color="" width="" size="" align="" />

color:设置水平线的颜色
width:设置水平线的宽度
size:设置水平线的高度
align:设置水平线的对齐方式（默认居中），可取值left|right|center

2.3 图片标签

图片标签：img

 <!--
     语法：<img src="">
		属性：
            1.alt=""      图片不能显示时的说明性文字   
            2.title=""    将鼠标放在图片上时显示的文字
            3.width=""     宽度
            4.height=""    高度
     特点：
            1.行内块元素
            2.单标签
     注意：
        	图片没有定义宽高的时候，图片按照百分之百比例显示，
        如果只更改图片的宽度或者高度，图片等比例缩放。
  -->
    <img src="images/qiu.jpg" alt="秋天" title="秋天">

常用的图片格式：

2.4 路径详解

在这里插入图片描述
相对路径：
相对于文件自身出发，就是相对路径
文件和图片（html文档）在同一个目录(文件夹) ，直接写文件名或者./文件名。

图片（html文档）在文件在下一级目录里。文件夹名称+/+图片（html）名称
在这里插入图片描述
图片（html）在文件的上一级目录里，…+/+图片（html）名称

图片在文件的上一级的其他目录里，…/文件夹名称/图片名称

**总结：**找到下一级目录（文件夹）的图片（文件）用 /
跳出当前目录使用…/

绝对路径
网址和盘符属于绝对路径
例如：
在这里插入图片描述

2.5 超文本连接

在这里插入图片描述

a标签

<body>
    <!--
        超链接标签：a
            属性：
                1.href-要跳转的页面
                2.target="_blank/_self/_top/_parent"  表示在新窗口中打开/在当前窗口打开/在当前窗体打开链接，并替换当前的整个窗体(框架页)/在父窗口中打开链接
                3.title-提示文本，鼠标放在链接上显示的文字
                4.type  规定目标 URL 的 MIME 类型。仅在 href 属性存在时使用。注：MIME = Multipurpose Internet Mail Extensions
                5.shape=" default/rect/circle/poly"  规定链接的形状(HTML5 不支持)
                6.download="filename"   指定下载链接
    -->
    <a href="https://home.firefoxchina.cn" title="网址标签" target="_blank">超链接</a>

    <!--内部链接-->
    <a href="index.css">我</a>

    <!--图片链接-->
    <a href="//www.runoob.com/html/html-tutorial.html">
        <img border="10" src="smiley.gif" alt="HTML 教程">
    </a>
    <a href="//www.runoob.com/html/html-tutorial.html">
        <img border="0" src="smiley.gif" alt="HTML 教程">
    </a>

    <br>
    <br>
    <p>
        这是一个电子邮件链接：
        <a href="mailto:someone@example.com?Subject=Hello%20again" target="-top">发送邮件</a>
    </p>
    <p>
        <b>注意:</b>单词之间空格使用过 %20 代替，以确保浏览器可以正常显示文本.
    </p>

    <a href="#">空链接</a>
</body>

在这里插入图片描述

锚点标签：a

<body>
    <!--锚点：-->
    <!-- <p id="sd">href 去往的路径（跳转的页面） 必写属性 
        title 提示文本 鼠标放到链接上显示的文字 
        target=”_self” 默认值 在自身页面打开（关闭自身页面，打开链接页面） 
        Target=”_blank” 打开新页面 （自身页面不关闭，打开一个新的链接页面）
    </p>
    <p>
        1.先定义一个锚点
        <p id="sd"></p>
        2.超链接到锚点
        <a href="#sd"></a>
        ７.2空链 不知道链接到那个页面的时候，用空链
        <a href="#"></a>
        ７.3压缩文件下载 不推荐使用
        <a href="../../01-sss.rar"></a>
        ７.4超链接优化写法
        <base href="bland"> 
    </p><a href="#sd">回到顶部</a><img src="C:\Users\夕阳的刻痕\Desktop\图片\love2.png" alt="loving" /> 

    跳转到指定页的指定位置处：  
                        1.<a href="1.html#fruit">水果</a>
                        2.<h4 id="fruit">水果</h4>
    -->

    <p id="top">这里是顶部</p>

    <!--定义锚点-->
    <a href="#fruit">水果</a><br>
    <a href="#vegetables">蔬菜</a><br>
    <a href="#">运动</a>

    <!--超链接到锚点-->
    <h4 id="fruit">水果</h4>
    <ul>
        <li>苹果</li>
        <li>香蕉</li>
        <li>车厘子</li>
        <li>李子</li>
        <li>梨子</li>
        <li>柑桔</li>
        <li>芒果</li>
        <li>火龙果</li>
    </ul>
    <a href="#top">返回顶部</a>

    <h4 id="vegetables">蔬菜</h4>
    <ul>
        <li>西红柿</li>
        <li>黄瓜</li>
        <li>茄子</li>
        <li>秋葵</li>
        <li>白菜</li>
        <li>空心菜</li>
        <li>芹菜</li>
        <li>土豆</li>
    </ul>
    <a href="#top">返回顶部</a>
</body>

2.6 文本标签

- 文本格式化标签在这里插入图片描述

<body>
    <!--
        都是文本加粗标签，其中
        b标签：定义粗体的文本
        strong标签：重要的文本应该用 <strong> 标签表示
    -->
    <strong>a</strong> <b>a</b>

    <!--
        都是文本倾斜标签，其中
        <em> 标签是一个短语标签，用来呈现为被强调的文本
        <i> 定义与文本中其余部分不同的部分，并把这部分文本呈现为斜体文本
        <i> 标签被用来表示科技术语、其他语种的成语俗语、想法、宇宙飞船的名字等等
    -->
    <em>b</em> <i>b</i>

    <!--
        都是删除线标签，其中
        <del> 标签定义文档中已删除的文本
        所有主流浏览器都支持 <del> 标签
        <del> 和 <ins> 一起使用，描述文档中的更新和修正。浏览器通常会在已删除文本上添加一条删除线，在新插入文本下添加一条下划线
        所有主流浏览器都支持 <s> 标签
        <s> 标签对那些不正确、不准确或者没有用的文本进行标识
        <s> 标签不应该用来定义替换的或者删除的文本
    -->
    <del>c</del> <s>c</s>

    <!--
        都是下划线标签，其中
        <ins> 标签定义已经被插入文档中的文本
        <u> 标签定义与常规文本风格不同的文本，像拼写错误的单词或者汉语中的专有名词
        请尽量避免使用 <u> 为文本加下划线，用户会把它混淆为一个超链接
    -->
    <ins>d</ins>
    <u>d</u>

		<!-- 预处理 -->
    <pre>
        2
           4
    </pre>
</body>

2.7其他标签

2.7.1 跑马灯标签

<marquee scrollamount="滚动的速度" behavior="alternate" direction="方向">公告：明天周五，要周末了，但是周六上课</marquee>

方向的属性：
left  向左
right 向右
up   向上
down  向下

已经废弃，后面可以通过css3动画实现，还可以通过js控制

2.7.2 iframe标签

<ul>
    <li><a href="http://www.woniuxy.com" target="frame">蜗牛学院</a> </li>
    <li><a href="http://www.baidu.com" target="frame">百度</a> </li>
</ul>
<iframe src="http://www.baidu.com" name="frame"  frameborder="1" width="1200px" height="500px"></iframe>

target=""代表我们需要跳转页面时，控制我们自定义的框架，将目标网页渲染到我们指定的框架标签里面（name=“”中的值必须和target一致）
缺点：需要去指定宽高

2.7.3 fieldset标签

带边框的容器

<fieldset>
     <legend>登录</legend>
     <form action="">
         <label for="user">用户名：</label>
         <input type="text" placeholder="请输入用户名" value="admin" id="user"> <br>
         密码：
         <input type="password">
     </form>
</fieldset>

legend:设置容器边框上的名字，边框左上角

三、列表标签

3.1 无序列表

在这里插入图片描述

<!--
无序列表(unorder list)
1）语法
<ul>  
    <li>...</li> 
    <li>...</li>
    <li>...</li>
</ul>

2）ul和li的属性
type：设置项目符号的类型
	disc  默认值   黑色实心圆
	circle  空心圆
	square  实心矩形
	none   不显示

3)无序列表相互嵌套
<ul>
    <li>
    ...
        <ul>
            <li>...</li>
            <li>...</li>
        </ul>
    </li>
    <li>...</li>
    <li>...</li>
</ul>
-->
    <!--案例1-->
    <ul type="circle">
        <li type="square">
            <a href="https://news.163.com/20/0902/08/FLGOBRJD000189FH.html" target="_blank">
                <b>密云水库是无价之宝</b>
            </a>
        </li>
        <li><b>密云水库是无价之宝</b></li>
    </ul>

    <!--案例2-->
    <ul type="none">
        <li>你过线了！</li>
    </ul>

    <!--案例3-->
    <ul>
        <li><a href="https://news.163.com/20/0902/06/FLGFLJ530001899O.html" target="_blank">医院回应河南一早产儿“死而复生”：非正常发育</a></li>
        <li><a href="#">医院回应河南一早产儿“死而复生”：非正常发育</a></li>
    </ul>

    <!--案例4-->
    <ul type="none">
        <li><a href="#">手机 电话卡</a></li>
        <li><a href="#">手机 电话卡</a></li>
    </ul>

    <!--案例5-->
    <ul>
        <li>
            中国
            <ul type="disc">
                <li>
                    北京
                    <ul>
                        <li>东城</li>
                        <li>西城</li>
                        <li>
                            朝阳
                            <ul>
                                <li>朝阳大悦城</li>
                            </ul>
                        </li>
                    </ul>
                </li>
                <li>天津</li>
                <li>河北</li>
            </ul>
        </li>
        <li>俄罗斯</li>
        <li>法国</li>
    </ul>

3.2 有序列表

在这里插入图片描述有序列表是一列项目，列表项目使用数字进行标记。有序列表始于<ol>标签。每个列表项始于<li>标签

<!--
有序列表
1）语法
<ol>
    <li>....</li>
    <li>....</li>
    <li>....</li>
</ol>

2）ol和li的属性
①type：设置项目符号
1   默认
A
a
i
I

②start：设置从第几个开始数，取值number

③reversed：设置倒序
reversed="reversed"  当属性等于属性值时，简写为属性

3）相互嵌套
<ol>
    <li>
    ...
        <ol>
            <li>
            ...
                <ul>
                    <li>..</li>
                    <li>..</li>
                </ul>
            </li>
            <li>...</li>
            <li>...</li>
        </ol>
    </li>
    <li>...</li>
    <li>...</li>
</ol>
-->
    <!--案例1-->
    <ol type="I" start="7" reversed>
        <li>直播</li>
        <li>直播</li>
        <li>直播</li>
        <li>直播</li>
        <li>直播</li>
    </ol>

    <!--案例2-->
    <ol>
        <li><a href="#">直播</a></li>
        <li><a href="#">直播</a></li>
        <li><a href="#">直播</a></li>
    </ol>

    <!--案例3-->
    <ol>
        <li>
            中国
            <ol>
                <li>
                    北京
                    <ul>
                        <li>东城</li>
                        <li>西城</li>
                        <li>朝阳</li>
                    </ul>
                </li>
                <li>天津</li>
                <li>河北</li>
            </ol>
        </li>
        <li>法国</li>
        <li>巴西</li>
    </ol>

3.3 自定义列表

在这里插入图片描述自定义列表不仅仅是一列项目，而是项目及其注释的组合
自定义列表以<dl>标签开始。每个自定义列表项以<dt>开始。每个自定义列表项的定义以<dd>开始

<!--
自定义列表
1）结构
<dl>
    <dt>项目</dt>
    <dd>项目的注释</dd>
   		......
    <dd>项目的注释</dd>
    <dt>项目</dt>
    <dd>项目的注释</dd>
    	......
    <dd>项目的注释</dd>
</dl>
-->

    <!--案例1-->
    <dl>
        <dt>项目</dt>
        <dd>项目的注释</dd>
        <dd>项目的注释</dd>
        <dd>项目的注释</dd>
    </dl>

    <!--案例2-->
    <dl>
        <dt>帮助中心</dt>
        <dd><a href="#">账户管理</a></dd>
        <dd><a href="#">账户管理</a></dd>
        <dd><a href="#">账户管理</a></dd>
    </dl>

四、表格、表单标签

4.1 表格标签

在这里插入图片描述 表格组成与特点：
行、列、单元格
单元格的特点：同行等高、同列等宽
表格标签：
表格：<table>
行：<tr>
单元格：<td>

  <!--
  		table
            语法: <table>...</table>
            相关属性：
                border  设置表格的边框，默认为0
                cellspacing-单元格与单元格的距离；
                cellpadding-内容距边框的距离；
                algin=center-表示表格居中；
                width、height设置表格的宽、高
                bgcolor-设置表格的背景颜色
                bordercolor  设置边框颜色
                background  设置背景图片，默认水平垂直平铺

        caption 定义表格的标题
            注意：
                通常会居中显示于表格之上；
                必须紧随table标签之后；
                只有存在于表格中才有意义

        th 表头单元格 里面的文字默认加粗、居中显示
            语法：<th>...</th>
            相关属性：
                algin=center-设置内容居中显示;

			tbody 表格身体

			tfoot 表格脚步

        tr
            语法：<tr>...</tr>
            相关属性：
                height  设置一行的高度
                bgcolor  设置一行的背景颜色
                background  设置一行的背景图片
                align  设置行里面内容的水平对齐方式，默认left，取值center、right
                valign  设置行里面内容的垂直对齐方式，默认middle，取值top、bottom
        
        td 
            语法：<td>...</td>
            相关属性：
                width  设置单元格的宽度，同列等宽
                height  设置单元格的高度，同行等高
                align  设置单元格内容的水平对齐方式
                valign  设置单元格内容的垂直对齐方式
                bgcolor  设置单元格的背景颜色
                background  设置单元格的背景图片
                colspan  跨列，水平合并，从左往右，写在开始的td中，取值为数值，水平合并删除同一行的td
                删除的个数 = 合并的个数 - 1
                rowspan  跨行，垂直合并，从上往下，写在开始的td中，取值为数值，垂直合并删除下面行的td
                删除的个数 = 合并的个数 - 1
        -->

    <!--案例1-->
    <table border="1" bgcolor="#a9a9a9" cellspacing="0" cellpadding="5" width="300px" align="left">
        <!--第1行-->
        <tr>
            <td>姓名</td>
            <td>性别</td>
            <td>年龄</td>
            <td>爱好</td>
        </tr>

        <!--第2行-->
        <tr>
            <td>张三</td>
            <td>男</td>
            <td>19</td>
            <td>排球</td>
        </tr>

        <!--第3行-->
        <tr>
            <td>李四</td>
            <td>男</td>
            <td>20</td>
            <td>写作</td>
        </tr>

        <!--第4行-->
        <tr>
            <td>张美美</td>
            <td>女</td>
            <td>18</td>
            <td>钢琴</td>
        </tr>
    </table>

在这里插入图片描述

    <!--案例2-->
    <table border="1" bgcolor="#a9a9a9" cellspacing="0" cellpadding="5" width="300px" align="right">
        <caption>个人信息统计表</caption>

        <!--第1行-->
        <tr>
            <th>姓名</th>
            <th>性别</th>
            <th>年龄</th>
            <th>爱好</th>
        </tr>

        <!--第2行-->
        <tr>
            <td>张三</td>
            <td>男</td>
            <td>19</td>
            <td>排球</td>
        </tr>

        <!--第3行-->
        <tr>
            <td>李四</td>
            <td>男</td>
            <td>20</td>
            <td>写作</td>
        </tr>

        <!--第4行-->
        <tr>
            <td>张美美</td>
            <td>女</td>
            <td>18</td>
            <td>钢琴</td>
        </tr>
    </table>

在这里插入图片描述

    <!-- 案例3 -->
    <table border="1" align="center" width="500" height="240" cellspacing="0" cellpadding="10">
        <caption>
            <h3>小说排行榜</h3>
        </caption>

        <tr>
            <th>排名</th>
            <th>关键词</th>
            <th>趋势</th>
            <th>今日搜索</th>
            <th>最近七日</th>
            <th>相关链接</th>
        </tr>

        <tr>
            <td>1</td>
            <td>鬼吹灯</td>
            <td>
                <img src="../images/up.jpg">
            </td>
            <td>356</td>
            <td>3560</td>
            <td>
                <a href="#">贴吧</a>
                <a href="#">图片</a>
                <a href="#">百科</a>
            </td>
        </tr>

        <tr>
            <td>2</td>
            <td>鬼吹灯</td>
            <td>
                <img src="../images/down.jpg">
            </td>
            <td>356</td>
            <td>3560</td>
            <td>
                <a href="#">贴吧</a>
                <a href="#">图片</a>
                <a href="#">百科</a>
            </td>
        </tr>

        <tr>
            <td>3</td>
            <td>鬼吹灯</td>
            <td>
                <img src="../images/up.jpg">
            </td>
            <td>356</td>
            <td>3560</td>
            <td>
                <a href="#">贴吧</a>
                <a href="#">图片</a>
                <a href="#">百科</a>
            </td>
        </tr>

        <tr>
            <td>4</td>
            <td>鬼吹灯</td>
            <td>
                <img src="../images/down.jpg">
            </td>
            <td>356</td>
            <td>3560</td>
            <td>
                <a href="#">贴吧</a>
                <a href="#">图片</a>
                <a href="#">百科</a>
            </td>
        </tr>

        <tr>
            <td>5</td>
            <td>鬼吹灯</td>
            <td>
                <img src="../images/up.jpg">
            </td>
            <td>356</td>
            <td>3560</td>
            <td>
                <a href="#">贴吧</a>
                <a href="#">图片</a>
                <a href="#">百科</a>
            </td>
        </tr>

        <tr>
            <td>6</td>
            <td>鬼吹灯</td>
            <td>
                <img src="../images/up.jpg">
            </td>
            <td>356</td>
            <td>3560</td>
            <td>
                <a href="#">贴吧</a>
                <a href="#">图片</a>
                <a href="#">百科</a>
            </td>
        </tr>
    </table>

在这里插入图片描述

4.2 表单标签

在这里插入图片描述表单在 Web 网页中用来给用户填写信息，从而能采用用户信息，使网页具有交互的功能
表单是由容器和控件组成的，一个表单一般应该包含用户填写信息的输入框、提交按钮等，这些输入框、提交按钮叫做控件，表单就是容器，它能够容纳各种各样的控件

<form action="" method="get|post" name="myForm"></form>

<!--
1、表单
1）作用
收集用户信息，提交到服务器，服务器经过一些列的处理，反馈回来，使页面具有交互性

2）标签
<form action="" name="" method="">
    提交的数据
</form>
action:提交的地址
name：表单的名称
method：提交的方式，默认get，取值post

get和post的区别：
①get提交数据不安全，会在地址栏中显示；post安全
②get提交数据的大小有限制，不能大于2KB；post理论上没有限制，用来提交大量数据

一个页面可以有多个表单，表单之间不可以相互嵌套


完整的表单三部分组成：
①form
②表单域  例如用户名、密码等
③表单按钮  例如登录、注册等

表单域和表单按钮可以统称为表单元素

-->

<form action="" name="form1" method="post"></form>

表单元素1

普通文本框 <input type="text" name="表单元素的名称" value="当前值"/>
密码框 <input type="password" name="" value=""/>
单选按钮|单选框 <input type="radio" name="" value=""/> 一组单选按钮name一致
多选按钮|复选框 <input type="checkbox" name="" value=""/>
提交按钮 <input type="submit" value=""/>
重置按钮 <input type="reset" value=""/>
没有功能的按钮 <input type="button"/>
文件 <input type="file" name="img">
图片作为按钮：<input type="image" src="xxx" />
提交按钮 <button></button> 默认type="submit" 双标记之间可以写内容
重置按钮 <button type="reset"></button>
没有功能的按钮 <button type="button"></button>

在这里插入图片描述

<form action="ok.html" name="form1">
    用户名：<input type="text" name="userName" value="用户名"/>
    <br>
    密码：<input type="password" name="password" placeholder="请输入密码" />
    <br>
    性别：
    <input type="radio" name="sex" value="man"/>男
    <input type="radio" name="sex" value="woman"/>女
    <input type="radio" name="sex" value="hemophrodite"/>人妖
    <br>
    爱好：
    <input type="checkbox" name="hobby" value="sing">唱
    <input type="checkbox" name="hobby" value="dance">跳
    <input type="checkbox" name="hobby" value="rap">rap
    <br>
    <input type="submit" value="登录">
    <input type="reset" value="取消">
    <input type="button" value="没有功能的按钮">
    <button>提交</button>
    <button type="reset">重置</button>
    <button type="button">没有功能的按钮</button>
</form>

在这里插入图片描述

表单元素2

  <!--
下拉列表：
<select>
    <option>...</option>
    <option>...</option>
    <option>...</option>
</select>
<select>
    <optgroup label="组名">
        <option>...</option>
        <option>...</option>
        <option>...</option>
    </optgroup>
</select>

多行文本框：
<textarea></textarea>

提升用户体验度：<label for=""></label>  for属性和id属性一致

文件：<input type="file"/>  修改表单的编码格式为二进制  enctype="multipart/form-data"

图片提交按钮：<input type="image" src=""/>

隐藏域：<input type="hidden"/>  用户不可见，携带的信息可以正常的提交到服务器
-->

  <form action="ok.html" enctype="multipart/form-data">
        <p>
            性别：
            <input type="radio" name="sex" id="man">
            <label for="man">男</label>

            <input type="radio" name="sex" id="woman">
            <label for="woman">女</label>
        </p>
        <p>
            爱好：
            <!-- HTML4写法 -->
            <input type="checkbox" name="hobby" value="eat" id="eat">
            <label for="eat">吃</label>

            <input type="checkbox" name="hobby" value="eat" id="drink">
            <label for="drink">喝</label>

            <input type="checkbox" name="hobby" value="eat" id="play">
            <label for="play">玩</label>

            <input type="checkbox" name="hobby" value="eat" id="happy">
            <label for="happy">乐</label>

            <!-- HTML5写法 -->
            <label>
                <input type="checkbox" name="hobby" value="唱">唱
            </label>
        </p>
        <p>
            下拉列表：
            <select name="city" id="city">
            <option value="bj">北京</option>
            <option value="tj">天津</option>
            <option value="sh">上海</option>
            <option value="hb">河北</option>
            <option value="sd">山东</option>
            <option value="sx">山西</option>
            </select>
            <select name="city1" id="city1">
            <optgroup label="北京">
                <option value="bj">朝阳</option>
                <option value="tj">大兴</option>
                <option value="sh">东城</option>
            </optgroup>
            <optgroup label="河北">
                <option value="hb">石家庄</option>
                <option value="sd">唐山</option>
                <option value="sx">廊坊</option>
            </optgroup>
        </select>
        </p>
        <p>
            多行文本框：
            <textarea name="texts" id="texts" cols="60" rows="20">你好，
        </textarea>
        </p>
        <p>
            文件：
            <input type="file">
        </p>
        <p>
            图片提价按钮：
            <input type="image" src="images/img1.gif">
        </p>
        <p>
            隐藏域：
            <input type="hidden">
        </p>
    </form>

在这里插入图片描述

表单综合练习

    <table align="center">
        <tr>
            <td align="right">姓名：</td>
            <td><input type="text"></td>
        </tr>
        <tr>
            <td align="right">密码：</td>
            <td><input type="password"></td>
        </tr>
        <tr>
            <td align="right">确认密码：</td>
            <td><input type="password"></td>
        </tr>
        <tr>
            <td align="right">密码提示问题：</td>
            <td>
                <form>
                    <select>
                        <option value="title">请选择一个问题</option>
                        <option value="name">我的名字</option>
                        <option value="age">我的年龄</option>
                        <option value="sex">我的性别</option>
                    </select>
                </form>
            </td>
        </tr>
        <tr>
            <td align="right">密码提示答案：</td>
            <td><input type="text"></td>
        </tr>
        <tr>
            <td align="right">性别：</td>
            <td>
                <form>
                    <input type="radio" name="sex" value="nan">男
                    <input type="radio" name="sex" value="nv">女
                </form>
            </td>
        </tr>
        <tr>
            <td align="right">年龄：</td>
            <td><input type="number" min="1" max="150"></td>
        </tr>
        <tr>
            <td align="right">籍贯：</td>
            <td>
                <form>
                    <select>
                        <option value="title">请选择</option>
                        <option value="name">山西</option>
                        <option value="age">内蒙古</option>
                        <option value="sex">广东</option>
                    </select>
                    省/直辖市
                    <select>
                        <option value="title">请选择</option>
                        <option value="name">太原</option>
                        <option value="age">临汾</option>
                        <option value="sex">大同</option>
                    </select>
                    市
                </form>
            </td>
        </tr>
        <tr>
            <td align="right">爱好：</td>
            <td>
                <form>
                    <input type="checkbox" name="aihao" value="i">上网
                    <input type="checkbox" name="aihao" value="m">看电影
                    <input type="checkbox" name="aihao" value="g">游戏
                </form>
            </td>
        </tr>
        <tr>
            <td align="right">个人介绍：</td>
            <td>
                <textarea cols="30" rows="10"></textarea>
            </td>
        </tr>
        <tr>
            <td align="right">上传头像：</td>
            <td>
                <input type="file">
            </td>
        </tr>
        <tr>
            <td align="right"></td>
            <td>
                <form>
                    <input type="submit" value="提交">
                    <input type="reset" value="重置">
                </form>
            </td>
        </tr>
    </table>

在这里插入图片描述

五、实体字符

在这里插入图片描述如果我们要在页面上显示一个<的时候，应该如何来写，如果直接写符号显然是不合理的，毕竟，它是属于标签的关键字，那么我们应该如何来实现呢？
如果希望正确地显示预留字符，我们必须在HTML源代码中使用字符实体
例如：

<p>&#165;</p>
<p>&reg;</p>

常用的实体字符如下：
在这里插入图片描述注意：实体字符大小写敏感即区分大小写

六、块元素与行内元素

在这里插入图片描述

在HTML5出现之前，经常把元素按照块级元素和内联元素（行内元素）来进行区分
在HTML5中，元素不再按照这种方式来区分，而是按照内容模型来区分，分为元数据型、区块型、标题型、文档流型、语句型、内嵌型、交互型
元素不属于任何一个类别，被称为穿透的，元素可能属于不止一个类别，称为混合的
内联元素和块级元素的区别：

6.1 块元素

常见块级元素：
在这里插入图片描述

div标签：
可以定义文档中的分区或者节
标签可以把文档分割为独立的、不同的部分
是一个块级元素。这意味着它的内容自动地开始一个新行
主要应用在布局上，作为布局的每个区域的容器

<body>
    <!--
        div标签：
            语法：<div>代码块</div>
            特点：
                1.块级元素 独占一行
                2.可以嵌套任何标签，例如：p,hn,a,div,span等标签
                3.所有主流浏览器都支持 <div> 标签
            用法：<div> 标签定义 HTML 文档中的一个分隔区块或者一个区域部分，经常与 CSS 一起使用，用来布局网页。
            属性：align: left/right/center/justify(HTML5 中不支持 align 属性)
    -->
    <div>
        <div style="color:#0000FF">
            <h3>这是一个在 div 元素中的标题。</h3>
            <p>这是一个在 div 元素中的文本。</p>
        </div>
    </div>
</body>

6.1 行内元素

常见内联元素：
在这里插入图片描述
行内块级元素（特点：不换行、能够识别宽高）：

font标签：

 <!--
        font标签:
            语法：<font>文本</font>
            属性：
                1.color: 颜色
                2.face:字体
                3.size:字体大小
            注意：
                1.html5已经废除了此标签，不再支持
    -->
    <font size="3" color="red">这是一些文本!</font>
    <font size="2" color="blue">这是一些文本!</font>
    <font face="verdana" color="green">这是一些文本!</font>

小白小白从不日白

关注

1
点赞
踩
8

收藏

觉得还不错? 一键收藏
打赏
0
评论
HTML--简述、常用标签、列表标签、表单、表格标签、实体字符、块元素和行内元素

一、简述HTML：超文本标记语言超：代表超链接超文本：指的是通过一系列的超链接，将不同空间里面的资源链接在一起，形成一个网状的可相互连接的结构。可以传递文字、图片、视频、音频等等。浏览器发送一次请求，服务器就可以响应多个资源。标记（也称为标签）：例如<html></html> 其中第一个标签是开始标签，第二个标签是结束标签<font color="red" size="5">通俗理解：在记事本当中，用标记写出来的一种计算机标记语言。注意： HTML中所有的
复制链接

扫一扫