初识HTML

勿言128

已于 2023-05-22 19:07:25 修改

阅读量117

点赞数 3

文章标签： html

于 2023-05-22 19:03:22 首次发布

本文链接：https://blog.csdn.net/qq_61825662/article/details/130799860

版权

10.label标签(标识一下标签的作用)

11.textarea多行文本输入框

12. form表单标签

一.HTML介绍

HTML 是用来描述网页的一种语言。

HTML 指的是超文本标记语言 (Hyper Text Markup Language)
HTML 不是一种编程语言，而是一种标记语言 (markup language)
标记语言是一套标记标签 (markup tag)
HTML 使用标记标签来描述网页

注意：

HTML是一种标记语言（markup language），它不是一种编程语言。

　　 HTML使用标签来描述网页。不像python编程语言一样，有逻辑什么的，这个标记语言是没有逻辑的

1.HTML文档结构：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>


</body>
</html>

<!DOCTYPE html>声明为HTML5文档。
<html>、</html>是文档的开始标记和结束的标记。是HTML页面的根元素，在它们之间是文档的头部（head）和主体（body）。
<head>、</head>定义了HTML文档的开头部分。它们之间的内容不会在浏览器的文档窗口显示。包含了文档的元（meta）数据，配置信息等，是给浏览器看的，你看到的是在body标签里面写的。
<title>、</title>定义了网页标题，在浏览器标题栏显示。（修改一下title中的内容，然后看一下浏览器，你就会发现title是什么了）
<body>、</body>之间的文本是可见的网页主体内容。

2.HTML标签格式，严格封闭

HTML标签是由尖括号包围的关键字，如<html>, <div>等
HTML标签通常是成对出现的，比如：<div>和</div>，第一个标签是开始，第二个标签是结束。结束标签会有斜线。
也有一部分标签是单独呈现的，比如：<br/>、<hr/>、<img src="1.jpg" />等。
标签里面可以有若干属性，也可以不带属性。

二.HTML 文档 = 网页

HTML 文档描述网页
HTML 文档包含 HTML 标签和纯文本
HTML 文档也被称为网页

Web 浏览器的作用是读取 HTML 文档，并以网页的形式显示出它们。浏览器不会显示 HTML 标签，而是使用标签来解释页面的内容：

三.HTML 标签

HTML 标记标签通常被称为 HTML 标签 (HTML tag)。

HTML 标签是由尖括号包围的关键词，比如 <html>
HTML 标签通常是成对出现的，比如 <b> **和** </b>
标签对中的第一个标签是开始标签，第二个标签是结束标签
开始和结束标签也被称为开放标签和闭合标签

HTMl标签要封闭,全封闭,自封闭.

HTML文件不识别多个空格或多个换行符,都识别成一个空格.

注释:

1.基本的 HTML 标签 - 四个实例

1.1 HTML标题:

HTML 标题（Heading）是通过 <h1> - <h6> 等标签进行定义的。

实例:

<h1>This is a heading</h1>
<h2>This is a heading</h2>
<h3>This is a heading</h3>

1.2 HTML段落:

HTML 段落是通过 <p> 标签进行定义的。

实例:

<p>This is a paragraph</p>
<p>This is another paragraph</p>

1.3 HTMl标签: 内联标签

HTML 链接是通过 <a> 标签进行定义的超链接标签。

实例:

        注释：a标签没有写href属性,只显示普通文本.

                有属性没有值:有href 但无地址有特殊效果,文字有颜色下划线,点击会刷新页面.

                有属性有值:在 href 属性中指定链接的地址,直接跳转到href属性指定页网址.

                target属性:    1.target="_black"在新的标签页打开

                                        2.target="_self" 默认在本标签页跳转打开

1.4 HTML图像:内联标签

HTML 图像是通过标签进行定义的。

实例:

        注释：图像的名称和尺寸是以属性的形式提供的。

scr属性='图片的路径'

                alt属性='图片加载失败的提示信息'

                title属性='鼠标悬浮提示信息'

2.基本的body标签

<h1></h1>,<h2></h2>,<h3></h3>    # 标题标签 h1-h6,h1最大
<b></b>    # 字体加粗
<i></i>    # 斜体
<u></u>    # 下划线     
<a></a>    # 删除
<br>       # 换行
<hr>       # 单独一条水平线

3.特殊符号

最常用的:
&nbsp；       # 空格
&gt；      # 大于号
&lt；    # 小于号
...

4.标签分类

块级标签(行外标签|块级元素): 独占一行,可以包含内联标签和块级标签.

div标签: 用来定义一个块级元素,并无实际的意义.主要通过CSS样式为其富裕不同的表现.
# 块级标签：div， p, h1-h6, hr, form

内联标签(行内标签|内联元素): 不独占一行,只能包括其他的内联标签.

span标签: 用来定义内联元素,并无实际的意义. 主要通过CSS样式为其富裕不同的表现.
# 内联标签: b, i, u, s, a, img, select, input, span, textarea

p标签,p标签内部不能包含块级标签和p标签

5.列表标签

5.1 无序列表

type属性：

disc（实心圆点，默认值）
circle（空心圆圈）
square（实心方块）
none（无样式）

5.2 有序列表

type属性： start是从数字几开始

1 数字列表，默认值
A 大写字母
a 小写字母
Ⅰ大写罗马
ⅰ小写罗马

5.3 标题列表（就像大纲一样，有一个层级效果）

示例:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

# 无序列表
<ul>
    <li>张三</li>
    <li>李四</li>
    <li>王五</li>
</ul>

# 列表标签中 type属性控制显示样式; satrt属性控制开始位置
# 有序列表
<ol type="I" start="2">
    <li>张三</li>
    <li>李四</li>
    <li>王五</li>
</ol>

标题列表
<dl>
    <dt>标题1</dt>
    <dd>内容1</dd>
    <dt>标题2</dt>
    <dd>内容1</dd>
    <dd>内容2</dd>
    <dt>标题3</dt>
</dl>

</body>
</html>

6. table标签

table 是html中的表格，由tr、td、th元素组成。

tr 元素定义表格行，th元素定义表头，td元素定义表格单元

常用属性:

    border: 表格边框

    cellpadding: 内边距    (内边框和内容的距离)

    cellspacing: 外边距    (内外边框的距离)

    width: 像素百分比. (最好通过css来设置长宽)

    rowspan: 单元格竖跨多少行

    colspan: 单元格横跨多少列 (即合并单元格)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
# border: 边框属性
#cellspacing: 单元格间距(表格间距)，指单元格之间的间隙
#cellpadding：单元格边距(表格填充补白)， 单元格内文字和边框的间距
<table border="1" cellspacing="10" cellpadding="20">
    <thead>
    <tr>
        <th>姓名</th>
        <th>年龄</th>
        <th>爱好</th>
    </tr>
    </thead>
    <tr>
        <td colspan="2">张三</td>
<!--        <td>19</td>-->
        <td rowspan="3">rap</td>
    </tr>
    <tr>
        <td>李四</td>
        <td>20</td>
<!--        <td>篮球</td>-->
    </tr>
    <tr>
        <td>王五</td>
        <td>22</td>
<!--        <td>都喜欢</td>-->
    </tr>
</table>

</body>
</html>

在html文件<head>标签中添加样式:

<style>
    table{/*为页面中所有的table标签添加样式*/
    width: 900px;/*设置table宽度*/
    margin: auto;/*让表格居中显示*/
    border: black 1px  solid;/*添加边框*/
    border-spacing: 0px;去掉table/*标签及其子标签边框之间的白色空隙*/
    border-collapse: collapse;/*去掉重合线*/            
    }

    th{/*为页面中所有的th标签添加样式*/
    border: black 1px  solid;/*添加边框*/
    }

    td{/*为页面中所有的td标签添加样式*/
    border: black 1px  solid;/*添加边框*/
    }

</style>

7.input标签

type属性:

总结:

input输入框: 要想提交给后台,那么就必须写name属性.

input选择框: 必须写name属性和value属性.

input选择框,name值相同的算是一组选择框

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div>
<!--    用户名(普通文本输入框):<input type="text" name="username" readonly>-->
    <!-- username: 用户输入的内容 --- get('username') = 用户输入的内容 -->
    <!-- readonly: text和password设置只读 -->
    用户名(普通文本输入框):<input type="text" name="username" disabled>
    <!-- disabled: 标签不可用,input所有都适用 -->
    <input type="hidden">
</div>
<div>
    密码(密文输入框):<input type="password" name="pword">
</div>

<div>
    性别(单选):
    <input type="radio" name="sex" value="1">男
    <input type="radio" name="sex" value="2">女
</div>

<div>
    爱好(多选框):
    <input type="checkbox" name="hobby" value="1">吸烟        <!-- hobby: [1,2,3,4] 选择几个就存储几个 -->
    <input type="checkbox" name="hobby" value="2" checked>喝酒      <!-- checked 默认选择 -->
    <input type="checkbox" name="hobby" value="3" checked="checked">烫头
    <input type="checkbox" name="hobby" value="4">保健
</div>

<div>
    出生日期:
    <input type="date">
</div>

<div>
    <input type="submit"> <input type="submit" value="确认">
</div>

<div>
    上传图片:<input type="file">
</div>

</body>
</html>

8.锚点

在body标签的下方设置锚点

方式1:

    <a name="top">这是顶部</a>        

方式2:

    <div id="top">div顶部</div>

跳转锚点,在文本内容的最下方 /body 的上面写: ( href="#值" )

<a href="#top">回到顶部</a>

9. select下拉框:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>练习</title>
</head>
<body>

<p>city:</p>
<!--添加multiple属性:表示以菜单的方式显示数据,多选,按Ctrl键进行选择-->
<select name="city" id="" multiple>     <!--name 表示选择域的名称-->
    <option value="1">北京</option>
    <option value="2" selected>上海</option>  <!--selected 默认选中-->
    <option value="3">深圳</option>
    <option value="4">西安</option>
</select>
<p>
    <label for="username">用户名:</label>
    <!--用户名:-->
    <input type="text" id="username">
    <label>
        密码:<input type="password">
    </label>
</p>

<textarea name="" id="" cols="30" rows="10"></textarea>
<!-- name属性:文字域的名称; clos属性:文字域的列数; rows属性:文字域的行数 -->
<!-- warp属性: 用于设定显示和送出时的换行方式. 值为off时不自动换行; 值为hard时自动硬回车换行; 值为soft时自动软回车换行-->

</body>
</html>

属性说明：

multiple：布尔属性，设置后为多选下拉框，否则默认单选
disabled：禁用
selected：默认选中该项
value：定义提交时的选项值

10.label标签(标识一下标签的作用)

定义：<label> 标签为 input 元素定义标注（标记）。如果不用这个label给input标签一个标记，input会变黄，不影响使用，只是提示你，别忘了给用户一些提示，也就是这个label标签。
　说明：

label 元素不会向用户呈现任何特殊效果。但是点击label标签里面的文本，那么和他关联的input标签就获得了光标，让你输入内容
<label> 标签的 for 属性值应当与相关元素的 id 属性值相同

<label for="username">用户名:</label>
<!-- 用户名: -->
<input type="text" id="username">


<label>
    密码: <input type="password">
</label>

11.textarea多行文本输入框

<textarea name="memo" id="memo" cols="30" rows="10">
  默认内容
</textarea>

属性说明：

name：名称
rows：行数 #相当于文本框高度设置
cols：列数 #相当于文本框长度设置
disabled：禁用
maxlength：显示字符数，例如：maxlength='10' 最多输入十个字符

12. form表单标签

功能：

　　表单用于向服务器传输数据，从而实现用户与Web服务器的交互

　　表单能够包含input系列标签，比如文本字段、复选框、单选框、提交按钮等等。

　　表单还可以包含textarea、select、fieldset和 label标签。

表单属性

表单元素

基本概念：
　　HTML表单是HTML元素中较为复杂的部分，表单往往和脚本、动态页面、数据处理等功能相结合，因此它是制作动态网站很重要的内容。
　　表单一般用来收集用户的输入信息

表单工作原理：
　　访问者在浏览有表单的网页时，可填写必需的信息，然后按某个按钮提交。这些信息通过Internet传送到服务器上。
　　服务器上专门的程序对这些数据进行处理，如果有错误会返回错误信息，并要求纠正错误。当数据完整无误后，服务器反馈一个输入完成的信息。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<form action="http://127.0.0.1:8002">
    <div>
        用户名:<input type="text" name="username">
    </div>
    <div>
        密码:<input type="password" name="pwd">
    </div>
    <div>
    性别:<input type="radio" name="sex" value="1">男
        <input type="radio" name="sex" value="2">女
    </div>
    <input type="submit">
    <input type="button" value="确定">    <!--自由添加需要的按钮 -->
    <input type="reset">        <!--reset: 重置按钮-->
</form>

</body>
</html>

注意:

    想通过form表单标签来提交用户输入的数据,必须在form表单里面写你的input标签,并且必须有个提交按钮。

按钮有两种：

        1: input标签 type='submit';

        2: botton按钮

勿言128

关注

3
点赞
踩
2

收藏

觉得还不错? 一键收藏
打赏
3
评论
初识HTML

HTML 是用来描述网页的一种语言。HTML 指的是超文本标记语言 (Hyper Text Markup Language)HTML 不是一种编程语言，而是一种标记语言 (markup language)标记语言是一套标记标签 (markup tag)HTML 使用标记标签来描述网页注意HTML是一种标记语言（markup language），它不是一种编程语言。HTML使用标签来描述网页。不像python编程语言一样，有逻辑什么的，这个标记语言是没有逻辑的。
复制链接

扫一扫