初识HTML及其基础标签

Ray-Li

已于 2023-04-27 01:29:11 修改

阅读量221

点赞数

文章标签： html 前端 html5

于 2023-04-27 01:22:02 首次发布

本文链接：https://blog.csdn.net/weixin_74417484/article/details/130395669

版权

初识HTML及其基础标签
（以下代码都是在pycharm完成）

HTML介绍

1.HTML：hyper text marked language，超文本标记语言，是一种标识性的语言。它包括一系列标记标签，通过这些标记标签可以将网络上的文档格式统一，使分散的Internet资源连接为一个逻辑整体。

2.标签：HTML标签也可以称为元素，不同的标签有不同的功能解释，用来表示不同的功能。每个标签都是由一对尖括号包裹的单词组成。一般的标签是成对出现的，一般称第一个标签是开始标签，第二个是结束标签。开始和结束标签也称为开放标签和闭合标签。

3.W3C：HTML由 W3C制定的，W3C(World Wide Web Consortium)是一个非盈利性组织。

属性：用来给标签增加标志；通常为键值对形式出现，eg：color=“red” ；属性只能出现在开始标签和自闭合标签内；属性名字全部小写，属性值必须用单引或者双引包裹；如属性名和属性值完全一样，直接写属性名即可。

html5的大体框架看代码注释；

<!DOCTYPE html>
<!--文本类型声明-->

<!--注释 ctrl /-->

<html lang="en">
<!--html元素表示一个HTML文档的根元素，所有其他的元素必须是此元素的后代-->

<!--lang="en" 属性 key = value 值 用双引号-->
<head>
<!--    head元素表示头部信息，规定文档相关的配置信息，包括文档标题，引用的文档样式和脚本等-->
    <meta charset="UTF-8">
<!--meta表示那些不能由其他HTML相关元素表示的任何元数据信息-->

    <title>标题</title>
<!--    title元素定义文档标题，显示在浏览器的标题栏或标签页-->

</head>
<body>
<!--可视化区域-->
</body>
</html>
<!--标签名只能用小写-->

块级元素和内联元素

（一）块级元素
特点：

独占一行，与其他元素写在同级会换行
高度，行高以及外边距和内边距都可控制
它可以容纳内联元素和其他块元素

常见标签及其使用：

标题标签——h1-h6；用于文章标题
段落标签——p；用于段落内容
无序列表——ul>li；自定义无序列表
有序列表——ol>li；自定义有序列表
盒子标签——div；分割出不同的区域块
表格标签——table（后面详细介绍）
表单标签——form（后面详细介绍）

代码展示：

<body>
<h1>这是一级标题标签</h1>
<h2>这是二级标题标签</h2>
<h3>这是三级标题标签</h3>
<h4>这是四级标题标签</h4>
<h5>这是五级标题标签</h5>
<h6>这是六级标题标签</h6>
<p>这是p标签</p>
<ur>
    <li>html</li>
    <li>css</li>
    <li>js</li>
</ur>
<ol>
    <li>钱</li>
    <li>成绩</li>
    <li>梦想</li>
</ol>
</body>

运行结果：
（二）内联标签
特点：

和其他元素在一行上
高，行高以及外边距和内边距不可改变
宽度就是其文字或图片宽度，不可改变
内联元素只能容纳文本或者其他内联元素

常见标签及其使用：

文字标签——span；span标签是纯文本，配合CSS则可以展示不同
效果
超链接标签——a；
图片标签——img；
备注框——textarea；
上标标签——sup；
下标标签——sub；

代码演示（属性介绍包含在代码和注释中）：

<span>这是内联标签</span>

<!--属性target="_blank",可以跳转时打开新页面-->
<a href="https://www.baidu.com/" target="_blank">百度一下</a>
<!--a 超链接标签 href 放链接 链接跳转 url-->

<p>锚点功能，利用a标签实现</p>
<!--加#表示不跳转页面-->
<a href="#bottom" name="top">去到底部</a>

<br>
<!--br 标签为换行-->

<!--ctrl d 快速复制-->

<img src="../imgs/malong1.jpg" alt="图片加载失败"><br>
<img src="https://tse4-mm.cn.bing.net/th/id/OIP-C.YkbsT0UaezeS1pi5wyddhAHaE7?w=257&h=180&c=7&r=0&o=5&dpr=1.3&pid=1.7" alt="">
<!--图片路径
相对路径
        层级：上一级 ../
            同层级 ./
            下一级 /
绝对路径 从磁盘cv
网络路径 从网页cv
-->

<br>this <sub>is</sub>web<sup>hello</sup>

<br>
<!--内联元素设置宽高无效-->
<a href="#top" name="bottom">回到顶部</a>

运行结果：

图片源于百度

（三）表格标签
表格主体内容：主要分为表头、单元格、表脚（少用）；
表格标签——table
表头——th
表的名字——caption
行——tr
列——td
通常写成行包含列——tr>td*8(按tab补全，即生成一行八列)；

单元格合并——
行：rowspan
列：colspan
（注意合并后要将多余的单元格去掉）

代码演示：

<!--表格案例-->
<!--style表示样式，下篇文章将，这里是设置宽高和边框，以及把边框缝隙去掉-->
<table style="width: 500px;height: 30px" border="1" cellspacing="0">
    <caption>表格上的文字</caption>
    <tr>
        <th>城市</th>
        <th>日期</th>
        <th>天气</th>
        <th>温度</th>
        <th>湿度</th>
    </tr>
    <!--    这里的样式表示表格内文字居中-->
    <tr style="text-align: center">
        <td>广东</td>
        <td>周六</td>
        <td>23<sup>o</sup>~25<sup>o</sup></td>
        <td><img src="../weather/qing.png" alt=""></td>
        <td>56%</td>
<!--        合并四个，把下面的三个都去掉-->
        <td rowspan="4">888</td>
    </tr>
    <tr style="text-align: center">
        <td>湖南</td>
        <td>周六</td>
        <td>28<sup>o</sup>~30<sup>o</sup></td>
        <td><img src="../weather/qing.png" alt=""></td>
        <td>40%</td>
    </tr>
    <tr style="text-align: center">
        <td>北京</td>
        <td>周六</td>
        <td>13<sup>o</sup>~18<sup>o</sup></td>
        <td><img src="../weather/qing.png" alt=""></td>
        <td>30%</td>
    </tr>
    <tr style="text-align: center">
        <td>上海</td>
        <td>周六</td>
        <td>25<sup>o</sup>~28<sup>o</sup></td>
        <td><img src="../weather/qing.png" alt=""></td>
        <td>56%</td>
    </tr>
    <tr>
        <!--        合并六个，把下面的5个都去掉-->
        <td colspan="6">999</td>
<!--        <td>999</td>-->
<!--        <td>999</td>-->
<!--        <td>999</td>-->
<!--        <td>999</td>-->
<!--        <td>999</td>-->
    </tr>
</table>

效果：
在这里插入图片描述
（四）表单标签
表单是搜集用户数据信息的各种表单元素的集合区域；用于收取用户数据并向后台发送，前后交互的方式之一；

表单常应用于登录注册，搜索，文件上传等；

表单标签——form；

表单属性：

action——提交时候的地址；默认使用当前页面
method——提交时候的方法；有get 和 post 两种方法，默认使用 get；
get——在url显示提交的所有内容；要想提交数据给后台，一定要有name属性；
一般是从服务端获取数据；value则为自定义的值；提交数据相对较少；get一般是从后端获取数据；
post——数据相对多，安全性更高，且不显示；post一般是从前端提交数据给后端；
entype——设置编码格式有三种：
默认：application/x-www-form-urlencoded
上传文件：multipart/form-data
不建议使用：text/plain

表单里的input标签，其常用属性type，对应的值的功能：
文本框——text
密码框——password（用户输入时不显示内容）
单选框——radio（圆框，要设置name属性，并且值一样，这样选项才为同一组，方能实现单选效果）
复选框——checkbox（方框）
文件选择——file
提交——submit（提交数据的按钮）
重置——reset
隐藏文本——hidden

拓：
name属性：表单与后台交互时最重要的一个属性，要求input标签都带上
表单提交项的键，与id不同，name属性是和服务器通信时使用的名字，而id属性是浏览器端使用的名字，该属性主要方便客户编程而在css和js中使用

value属性：表单提交项的值。input的值，单选多选下拉框必须设置value属性，这样后台才能获得你选中的到底是哪个或哪几个选项

其他辅助属性：
提示输入性息——placeholder
只读——readonly
禁用——disabled

下拉框：
select标签；包含选项option，用outgroup来包住他们表示一组；
设置默认选项为selected；记得加上name属性；

代码样例：

<form action="">
    <h2>请注册</h2>
    <p>已有帐号？
        <a href="">登录</a>
    </p>
    <label for="uid">用户名</label>
    <input type="text" name="user" id="uid" placeholder="请输入用户名"> <br>
    <label for="phonenumber">手机号</label>
    <select name="" id="">
        <option value="">+86</option>
        <option value="">134****</option>
        <option value="">134****</option>
    </select>
    <input type="text" name="phone" id="phonenumber" placeholder="请输入手机号"> <br>
    <label for="upd">密&emsp;码</label>
    <input type="password" id="upd" placeholder="请设置登陆密码"> <br>
    <label for="yzm">验证码</label>
    <input type="text" id="yzm" placeholder="请输入验证码">
    <button>获取验证码</button>
    <br>
    <input type="checkbox"> 阅读并接受协议 <br>
    <input type="submit" value="注册">
    <br>
    <!--readonly 只读-->
    <input type="text" readonly value="你只能看我">
<!--    disabled 禁用-->
    <input type="text" disabled value="别动我">
<!--    placeholder 提示信息-->
    <input type="text" placeholder="请输入您的用户名">
</form>