526互联

初步了解HTML

发布时间 2023-10-08 20:57:50作者: 七落安歌

初步了解HTML

一、html介绍

html定义

HTML的全称为：HyperText Mark-up Language，指的是超文本标记语言。标记就是标签，<标签名称> </标签名称>,比如 、

等，大多数标签都是成对出现的

所谓超文本，有两层含义：

  1. 因为网页中还可以有图片、视频、音频等内容（超文本限制）
  2. 它还可以从一个网页跳到另外一个网页，与世界各地主机的网页链接（超链接文本）

html的作用

html是用来开发网页的，它是开发网页的语言。

html基本结构

结构代码

<!DOCTYPE html>
<html>
    <head>
        <meta charset = 'utf-8'>
        <tile>网页标题</tile>
    </head>
    
    <body>
        网页显示内容
    </body>
    
</html>

  1. 第一行中 是文档声明，用来指定页面使用的html的版本，这里声明的是一个html5的文档。

  2. ......标签是开发人员告诉浏览器，整个网页是从这里开始，到这里结束，也就是html文档开始与结束的标签
  3. <head>..</head>标签用于定义文档的头部，是负责对网页进行设置标题、编码格式以及引入css和js文件的

    4....标签是编写网页上显示的内容。

浏览网页文件

网页文件后缀是.html或者.htm，一个html文件就是一个网页，html文件用编辑器打开显示文本，可以用文本编辑的方式编辑它，如果使用浏览器打开，浏览器会按照标签描述内容将文件渲染成网页。

二、常用的html标签

双标签

<h1> </h1> 标题标签
<p> </p> 段落标签
<div> </div> 网页布局标签
<ol> <li> </li>  </ol> 有序列表标签
<ul> <li> </li>  </ul> 无序列表标签

<!-- 这是注释标签 -->
    <!-- 双标签：标题标签 -->
    <h1>一级标题标签</h1>
    <h2>二级标题标签</h2>
    <h3>三级标题标签</h3>
    <h4>四级标题标签</h4>
    <h5>五级标题标签</h5>
    <h6>六级标题标签</h6>

    <!-- 双标签： 段落标签-->
    <p>这是一个段落</p>
    <p>这是另外一个段落</p>

    <!-- 双标签：div布局标签，负责整个网页的结构-->
    <div>
        <h1>什么是天敌关系？动物被自己天敌属性压制有多恐怖？</h1>
        <p>
              地球上的生物有37亿年的发展演化史，地球上的能量主要来源就是接收太阳辐射能，太阳作为一颗炽热的恒星，每秒钟有6亿吨氢核发生聚变，生成5.95亿吨氦，中间损失的500万吨质量都按照爱因斯坦的质能方程，最终转化为能量。这些能量以光和热的形式向外传递，地球接收到的太阳辐射能绝对是九牛一毛，但这已经足够支撑地球上数百万个物种的发展繁衍。虽然经过大大小小二十余次的物种灭绝事件，但是到今天地球上仍存在数百万个物种。所有的生物和地球环境之间形成紧密的关系，任何生物都不是孤独的，它会在食物链食物网中占据重要的地位。
        </p>
        <p> 另外段落 </p>
    </div>

有序列表与无序列表

<body>
    <!-- 有序列表 -->
    <ol> 
        <li>“亚运数字火炬人”有名字了</li>
        <li> 走失女童父亲：还有被抱走可能性</li>
        <li>巴以冲突升级 双方死亡人数超500</li>
        <li>实拍哈马斯自制滑翔机渗透进以色列</li>

    </ol>

    <!-- 无序列表 -->
    <ul>
        <li>“亚运数字火炬人”有名字了</li>
        <li> 走失女童父亲：还有被抱走可能性</li>
        <li>巴以冲突升级 双方死亡人数超500</li>
        <li>实拍哈马斯自制滑翔机渗透进以色列</li>
    </ul>
</body>
</html>

image-20231008095137878

单标签

<img src = "图片路径",alt = '当图片无法显示时，所提示的文字信息'>
<br>换行
<hr>水平线

<!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>
    <!-- 单标签：只有开始没有结束 -->
    <!-- br标签：换行标签 (可以使用多个br标签达到想要的换行效果)-->
    <!-- 在一个 段落中实现换行功能，不需要多个<p></p> -->
    <p>
        杭州第19届亚运会开幕式上，由超过1亿名亚运数字火炬手汇聚而成的“亚运数字火炬人”踏浪而来，以世界首创且科技感满满的方式点燃“钱江潮涌”主火炬塔，成为亚洲奥林匹克历史上的经典时刻。
        <br><br>
        为回应社会各界热切愿望，打造又一标志性亚运品牌，杭州亚组委启动了“亚运数字火炬人”征名活动，迅速征集到上万个名字。经过两轮专家评审，反复研讨酝酿，最终“弄潮儿”脱颖而出，成为“亚运数字火炬人”的名字。
        <br><br>
        “弄潮儿”与会徽“潮涌”、吉祥物“江南忆”、核心图形“润泽”、色彩系统“淡妆浓抹”、火炬“薪火”、奖牌“湖山”等重要视觉标志一脉相承，共同承载浙江杭州深厚的历史文化底蕴和澎湃的科技创新基因，开启亚运历史新纪元。
    </p>
    <!-- hr标签：水平线 -->
    <div>
        <h1>小度科技换帅：百度CIO李莹接棒景鲲，大模型是智能音箱的新机遇吗？</h1>
        <hr> 
        <p>
            10月7日，据36氪报道，百度宣布新一轮干部轮岗。即日起，百度集团副总裁、百度集团首席信息官（CIO）李莹博士担任小度科技CEO，向集团董事长兼CEO李彦宏直接汇报，小度原CEO景鲲因个人原因即将辞任。在内部公告中，百度也对景鲲的辛劳付出与贡献予以了感谢。
            <br><br>
            2023年，大模型的风吹到了各行各业，小度自然也想抓住这个风口。脱胎于百度智能生活事业群组的小度科技，如今不再仅仅是智能音箱等智能硬件产品的集合，更是百度布局AI生态场景的重要载体，是AI技术落地成果的体现。2020年，小度宣布独立融资。2023年1月，据华兴资本消息，小度完成B+轮融资，投后估值达355亿元人民币。
        </p>
    </div>
    <!-- img标签：图片标签 => <img 属性 = 属性值> -->
    <!-- 下面是相对路径 -->
    <img src="images/5fdf8db1cb134954c4ef1cf6444e9258d0094aab.jpg">
    <!-- 下面这个是网络链接-->
    <img src="https://iknow-pic.cdn.bcebos.com/5d6034a85edf8db100df88f61b23dd54574e74ab?x-bce-process=image%2Fresize%2Cm_lfit%2Cw_450%2Ch_600%2Climit_1%2Fquality%2Cq_85">
 
</body>
</html>

image-20231008155730821

表格标签

<tabel>标签：表示一个表格
	<tr>标签：表示表格中的一行
    <td>标签：表示表格中的列
    <th>标签：表示表格中的表头

<tabel> 声明表格
    <tr> 里面是一行的内容
        <th>姓名</th> th代表其中的表头
        <th>年龄</th>
    </tr>
    
    <tr>
        <td>张三</td> td代表表格中的列
        <td> 18 </td>
    </tr>
</tabel>

<!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>
    高三（1）班级学生信息表
    <!-- 可以在标签中添加属性，比如 tabel-->
    <!-- <标签 属性 = 属性值> -->
    <table border="1" width = "600" >
        <tr> 
            <th>学号</th>
            <th>姓名</th>
            <th>年龄</th>
 
        </tr>
        <tr>
            <td>3120006884</td>
            <td>七落</td>
            <td>18</td>
        </tr>
        <tr>
            <td>3120006883</td>
            <td>莫航</td>
            <td>18</td>
        </tr>
    </table>
    
</body>
</html>

image-20231008165127140

表单标签

表单介绍

表单用于收集不同类型数据的用户输入（用户输入的数据），然后可以把用户数据提交到web服务器中

比如登陆时密码与账号输入。

<form>标签：表示表单标签，定义整体的表单区域
<label>标签：表示表单元素的文字标注标签，定义文字标注
<input>标签：表示表单元素的用户输入标签，定义不同类型的用户输入数据方式
	type属性:
        type = "text" 定义单行文本输入框
        type = "password" 定义密码输入框
        type = "radio" 定义单选框
        type = "checkbox" 定义复选框
        type = "file" 定义上传文件
        type = "submit" 定义提交按钮
        type = "reset" 定义重置按钮
        type = "button" 定义一个普通按钮
<textarea>标签：表示表单元素的多行文本输入框标签，定义多行文本输入框
<select>标签：表示表单元素的下拉列表标签，定义下拉列表
	<option>与<select>标签配合，定义下拉列表中的选项

<!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>
    <form >
        <label>账号:</label><input type="text">
        <br><br>
        <label>密码:</label><input type="password">
        <br><br>
        <label>性别：</label>
        <input type="radio" name = "gender"> 男
        <input type="radio" name="gender"> 女
        <br><br>
        <label>爱好：</label>
        <input type="checkbox" name="hobby">篮球
        <input type="checkbox" name="hobby">足球
        <input type="checkbox" name="hobby">羽毛球
        <br><br>
        <label>日期：</label>
        <select>
            <option >2000</option>
            <option >2001</option>
            <option >2002</option>
        </select>
        <br><br>
        <textarea cols="30" rows="5"></textarea>
        <br><br>
        <input type="submit" value="提交" >
        <input type="reset" value="重置">


    </form> 
</body>
</html>

image-20231008191022035

表单提交

表单属性设置：

<form> 标签 表示表单标签，定义整体的表单区域
action属性：设置表单数据的提交地址
method属性：设置表单提交的方式，一般有‘GET’ 方式和‘post’方式，不区分大小写

<form action = "http//baidu.com" method = "post">
    
</form>