• HTML入门

    HTML

     什么是HTML？

    • HTML超文本标记语言

      • 超文本：超越了文本限制，比普通文本功能更强大。除了文字信息，还可以定义图片、音频、视频等内容
      • 标记语言：由标签构成的语言

    • HTML(HyperText Markup Language)是一门语言，所有的网页都是HTML编写出来的。HTML运行在浏览器上，HTML标签由浏览器来解析。

    第一个HTML程序

    <html>
	<head>
		<title>MyHTML</title>
	</head>
	<body>
		<font color = 'blue'>Hello MyHTML!</font>
	</body>
</html>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8

    HTML基本语法

    • HTML文件以.html或以.htm结束。
    • HTML语法不区分大小写
    • HTML标签属性值单双引号均可

    HTML基础标签

    • <h1>-<h6>：定义标题大小从h1到h6
      在这里插入图片描述

    • <font>：定义文本的字体、尺寸、颜色
      html颜色表示：

      • 使用英文单词如red、blue
      • 使用三原色配比rgb(0-255,0-255,0-255)
      • 使用16进制表示0-255
         如：#ff0000表示红色取满绿色不取蓝色不取

    • <i>：定义斜体文字

    • <u>：定义文本下划线

    • <center>：定义文本居中

    • <p>：定义段落

    • <br>：定义折行，相当于换行

    • <hr>：定义水平线

    运行效果：
    在这里插入图片描述
    代码：

    <!--html5的标识-->
<!DOCTYPE html>
<html lang="en">
<head>
    <!--定义当前页面的字符集-->
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<hr> <!--定义水平线-->

<center>
    <u>
        <font face="楷体" size="5" color="red">智子</font>
    </u>

<hr>

<p>
    这是新的一段
</p>

<p>
    这是另一段
</p>

<i>
    这是一段斜体文字
</i>

<br><!--折行-->
换行了

</center>

</body>
</html>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38

    图片音频标签

    • <img src = "路径" length = "尺寸" width = "尺寸">：图片标签

      • src:规定显示图像的url
      • height：定义图片的高度
      • width：定义图片的宽度

    • <audio src = "路径" controls = "controls">：图片标签

      • 音频格式仅支持：MP3 ,WAV ,OGG
      • src：规定音频的url
      • controls：显示音频的播放控件

    • <video src = "路径" length = "尺寸" width = "尺寸" controls = "controls">：图片标签

      • 视频仅支持MP4 ,WebM ,OGG
      • src：视频的url
      • controls：显示视频的播放控件
      • height：定义播放窗口的高度
      • width：定义播放窗口的宽度

      显示效果：在这里插入图片描述
      代码：

      <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<hr>
<h3>
    <center>
        <font face="宋体" color = blue>壁纸<br>展示</font>
    </center>
</h3>
<hr>
<img src="1%20(260).jpg" height="1080" width="1920">

</body>
</html>

      • 1
      • 2
      • 3
      • 4
      • 5
      • 6
      • 7
      • 8
      • 9
      • 10
      • 11
      • 12
      • 13
      • 14
      • 15
      • 16
      • 17
      • 18

    超链接标签

     <a href = "链接" target = "打开方式"
     跳转方式_blank表示于新页面中打开。_self表示于当前页面打开。
    运行效果：
    在这里插入图片描述
    代码：

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<center>
    <h3>
        <a href = "https://blog.csdn.net/qq_55799677/article/details/122171257" target = “_self”> 不要点我</a>
    </h3>
</center>

</body>
</html>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15

    列表标签

     <li>定义列表项

    • 有序列表 <ol>

      • 代码：
      <ol>
    <li>二次元</li>
    <li>唯美</li>
    <li>风景</li>
</ol>

      • 1
      • 2
      • 3
      • 4
      • 5
      • 运行效果：
        在这里插入图片描述

    • 无序列表<ul>

      • 代码：
      <ul>
    <li>二次元</li>
    <li>唯美</li>
    <li>风景</li>
</ul>

      • 1
      • 2
      • 3
      • 4
      • 5
      • 运行效果：
        在这里插入图片描述

    type设置项目符号
    例如：

    <ol type = "a">
    <li>二次元</li>
    <li>唯美</li>
    <li>风景</li>
</ol>

    • 1
    • 2
    • 3
    • 4
    • 5

    在这里插入图片描述

    表格标签

    • <table 属性>定义表格
      属性：
      1. border规定表格边框的宽度
      2. width规定表格的宽度
      3. cellspacing规定单元格之间的空白
    • <th>定义行
      属性：align定义表格内容对齐方式
    • <td>定义单元格
      属性：
      1. rowspan规定单元格可横跨的行数
      2. colspan规定单元格可横跨的列数

    运行效果：
    在这里插入图片描述
    代码：

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

<table border = "1" cellspacing="0" width = "500">

    <tr>
        <th>学号</th>
        <th>姓名</th>
        <th>年龄</th>
        <th>专业</th>
    </tr>
    <tr align = "center">
        <td>010</td>
        <td>张三</td>
        <td>18</td>
        <td>计算机</td>
    </tr>
    <tr align = "center">
        <td>020</td>
        <td>李四</td>
        <td>19</td>
        <td>土木工程</td>
    </tr>
    <tr align = "center">
        <td>020</td>
        <td>王五</td>
        <td>21</td>
        <td>人力资源</td>
    </tr>

</table>

</body>
</html>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39

    将已有表格的单元格进行合并：
    在这里插入图片描述
    合并代码：

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

<table border = "1" cellspacing="0" width = "500">

    <tr>
        <th colspan="2">学号</th>
<!--        <th>姓名</th>-->
        <th>年龄</th>
        <th>专业</th>
    </tr>
    <tr align = "center">
        <td>010</td>
        <td>张三</td>
        <td>18</td>
        <td>计算机</td>
    </tr>
    <tr align = "center">
        <td rowspan="2">020</td>
        <td>李四</td>
        <td>19</td>
        <td>土木工程</td>
    </tr>
    <tr align = "center">
<!--        <td>020</td>-->
        <td>王五</td>
        <td>21</td>
        <td>人力资源</td>
    </tr>

</table>

</body>
</html>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39

    布局标签

     div
     span

    表单标签

     form表单标签
     属性：

    1. action指定表单数据提交的url
      表单项要想被提交，则必须指定其name属性

    2. method指定表单数据提交的方式
      提交方式：

      • get默认值
        • 请求参数会拼接在url后边
        • url长度限制在4kb
      • post
        • 请求参数会在http请求协议的请求体中
        • 请求参数长度无限制

      运行效果：
      在这里插入图片描述
      代码：

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

<form action = "#" method="get"> <!--#表示把表单的数据提交到当前html页面中-->
    <input type = "text" name="username">
    <input type = "submit">
</form>

</body>
</html>

      • 1
      • 2
      • 3
      • 4
      • 5
      • 6
      • 7
      • 8
      • 9
      • 10
      • 11
      • 12
      • 13
      • 14
      • 15

    表单项标签

    运行效果：
    在这里插入图片描述

    代码：

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<form action="#" method="post">
    <input type = "hidden" name = "id" value="123">

    <label for="username">用户名：</label>
    <input type="text" name="username" id="username"><br>
    <label for="password">密 码：</label>
    <input type="password" name="password" id="password"><br>

    性别：<input type="radio" name="gender" value = "1" id = "male"> <label for = "male">男</label>
    <input type="radio" name="gender" value = "2" id = "female"> <label for = "female">女</label>
    <br>
    爱好：<input type = "checkbox" name="hobby" value="1"> 旅游
    <input type = "checkbox" name="hobby" value="2"> 运动
    <input type = "checkbox" name="hobby" value="3"> 唱歌
    <br>
    头像：<input type = "file"><br>

    城市：
    <select name = "city">
        <option>北京</option>
        <option>广州</option>
        <option>上海</option>
    </select>
    <br>
    个人描述：<textarea cols="20" rows="5" name = "desc"></textarea>
    <br>
    <br>
    <input type="submit" value="免费注册">
    <input type = "reset" value = "重置">
    <input type = "button" value = "button">

</form>

</body>
</html>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
    • 42
  • 相关阅读:
    mindspore训练retinanet时报错无法计算loss，停止训练
    CSRF 001
    BERT（Bidirectional Encoder Representations from Transformers）
    WebCPM：首个开源的交互式网页搜索中文问答模型
    [附源码]SSM计算机毕业设计智慧农业销售平台JAVA
    音视频 SDL简介
    Gradle学习（从0到1精通）
    2064：交换值（信奥赛一本通）
    看完 2022 雷军年度演讲，我总结了我的故事
    高效工作必备：测试人如何提高沟通技能？
  • 原文地址：https://blog.csdn.net/qq_55799677/article/details/122438196