初识HTML

目录

一.HTML介绍

 1.HTML文档结构:

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

二.HTML 文档 = 网页

三.HTML 标签

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

2.基本的body标签

3.特殊符号 

4.标签分类

5.列表标签 

6. table标签

7.input标签 

8.锚点

9. select下拉框:

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>
  1. <!DOCTYPE html>声明为HTML5文档。
  2. <html>、</html>是文档的开始标记和结束的标记。是HTML页面的根元素,在它们之间是文档的头部(head)和主体(body)。
  3. <head>、</head>定义了HTML文档的开头部分。它们之间的内容不会在浏览器的文档窗口显示。包含了文档的元(meta)数据,配置信息等,是给浏览器看的,你看到的是在body标签里面写的。
  4. <title>、</title>定义了网页标题,在浏览器标题栏显示。(修改一下title中的内容,然后看一下浏览器,你就会发现title是什么了)
  5. <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标签。
 说明:

  1. label 元素不会向用户呈现任何特殊效果。但是点击label标签里面的文本,那么和他关联的input标签就获得了光标,让你输入内容
  2. <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按钮

  • 3
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 3
    评论
评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

勿言128

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值