HTML快速入门

最新推荐文章于 2024-07-08 04:11:11 发布
最新推荐文章于 2024-07-08 04:11:11 发布
阅读量153 收藏
点赞数
分类专栏： JavaWeb 文章标签： html 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/cacique111/article/details/126571727
版权

HTML快速入门

一、基础标签

标签描述
<h1> - <h6>定义标题，h1最大，h6最小
<font>定义文本的字体、字体尺寸、字体颜色
<b>定义粗体文本
<i>定义斜体文本
<u>定义文本下划线
<center>定义文本居中
<p>定义段落
<br>定义折行
<hr>定义水平线
<!--html5 标识-->
<!DOCTYPE html>
<html lang="en">
<head>
    <!--字符集-->
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

  <h1>我是标题</h1>
  <h2>我是标题</h2>
  <h3>我是标题</h3>
  <h4>我是标题</h4>
  <h5>我是标题</h5>
  <h6>我是标题</h6>

  <hr>
  <!--
    html 表示颜色：
      1. 英文单词：red,pink,blue...
      2. rgb(值1,值2,值3)：值的取值范围: 0 ~ 255
      3. #值1值2值3：值的范围：00 ~ FF
  -->
  <font face="楷体" size="5" color="pink">你好</font>

  <hr>

  <p>风急天高猿啸哀，渚清沙白鸟飞回。</p>
  <p>无边落木萧萧下，不尽长江滚滚来。</p>
  <p>万里悲秋常作客，百年多病独登台。</p>
  <p>艰难苦恨繁霜鬓，潦倒新停浊酒杯。</p>

  <hr>

  今天是周日<br>
  <b>今天是周日</b><br>
  <i>今天是周日</i><br>
  <u>今天是周日</u><br>

  <hr>

  <center>今天是周日</center>
</body>
</html>

效果：

在这里插入图片描述

二、图片、音频、视频标签

标签描述
<img>定义图片
<audio>定义音频
<video>定义视频
  • img：定义图片
    • src：规定显示图像的URL（统一资源定位符）
    • height：定义图像的高度
    • width：定义图像的宽度
  • audio：定义音频。支持的音频格式：MP3、WAV、OGG
    • src：规定音频的URL
    • controls：显示播放控件
  • video：定义视频。支持的视频格式：MP4，WebM，OGG
    • src：规定视频的URL
    • controls：显示播放控件
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
  <!--
    资源路径：
      1. 绝对路径：完整路径
      2. 相对路径：相对位置关系
    尺寸单位：
      1. px：像素
      2. 百分比：
  -->
  <img src="" width="200px" height="200px">

  <audio src="" controls></audio>

  <video src="" controls></video>

</body>
</html>

三、超链接标签

标签描述
<a>定超链接，用于链接到另一个资源
  • href：指定访问资源的URL
  • target：指定打开资源的方式
    • _self：默认值，在当前页面打开
    • _blank：在空白页面打开
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
  <a href="https://www.csdn.net/" target="_blank">CSDN</a>
</body>
</html>

效果：

在这里插入图片描述
在这里插入图片描述

四、列表标签

标签描述
<ol>定义有序列表
<ul>定义无序列表
<li>定义列表项
  • type：设置项目符号
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

  <ol>
    <li>勒布朗·詹姆斯</li>
    <li>安东尼·戴维斯</li>
    <li>拉塞尔·威斯布鲁克</li>
  </ol>

  <ul>
    <li>勒布朗·詹姆斯</li>
    <li>安东尼·戴维斯</li>
    <li>拉塞尔·威斯布鲁克</li>
  </ul>
</body>
</html>

效果：

在这里插入图片描述

五、表格标签

标签描述
<table>定义表格
<tr>定义行
<td>定义单元格
<th>定义表头单元格
  • table：定义表格
    • border：规定表格边框的宽度
    • width：规定表格的宽度
    • cellspacing：规定单元格之间的空白
  • tr：定义行
    • align：定义表格行的内容对齐方式
  • td：定义单元格
    • rowspan：规定单元格可横跨的行数
    • colspan：规定单元格可横跨的列数
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

  <table border="1" cellspacing="0" width="500px">
    <tr align="center">
      <th>序号</th>
      <th>logo</th>
      <th>品牌名称</th>
      <th>企业名称</th>
    </tr>

    <tr align="center">
      <td>001</td>
      <td><img src="05-logo/lining.png" width="50px" height="50px"></td>
      <td>李宁</td>
      <td>李宁公司</td>
    </tr>

    <tr align="center">
      <td>002</td>
      <td><img src="05-logo/anta.png" width="50px" height="50px"></td>
      <td>安踏</td>
      <td>安踏公司</td>
    </tr>

    <tr align="center">
      <td>003</td>
      <td><img src="05-logo/361.png" width="50px" height="50px"></td>
      <td>361°</td>
      <td>361°公司</td>
    </tr>
  </table>

  <hr>

  <table border="1" cellspacing="0" width="500px">
    <tr align="center">
      <th colspan="2">logo</th>
      <th>品牌名称</th>
      <th>企业名称</th>
    </tr>

    <tr align="center">
      <td colspan="2"><img src="05-logo/lining.png" width="50px" height="50px"></td>
      <td>李宁</td>
      <td>李宁公司</td>
    </tr>

    <tr align="center">
      <td  colspan="2" rowspan="2"><img src="05-logo/anta.png" width="50px" height="50px"></td>
      <td>安踏</td>
      <td>安踏公司</td>
    </tr>

    <tr align="center">
      <td>xxx</td>
      <td>xxx公司</td>
    </tr>
  </table>
</body>
</html>

效果：

在这里插入图片描述

六、布局标签

标签描述
<div>定义HTML文档中的一个区域部分，经常与CSS一起使用，用来布局网页
<span>用于组合行内元素
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

  <div>我是div</div>
  <div>我也是div</div>
  <span>我是span</span>
  <span>我也span</span>
</body>
</html>

效果：

在这里插入图片描述

七、表单标签

  • 表单：在网页中主要负责数据采集功能，使用<form>标签定义表单
  • 表单项（元素）：不同类型的input元素、下拉列表、文本域等
标签描述
<form>定义表单
<input>定义表单项，通过type属性控制输入形式
<label>为表单项定义标注
<select>定义下拉列表
<option>定义下拉列表的列表项
<textarea>定义文本域
  • form：定义表单
    • action：规定当提交表单时向何处发送表单数据，URL
    • method：规定用于发送表单数据的方式
      • get：浏览器会将数据直接附在表单的action URL之后。大小有限制
      • post：浏览器会将数据放到http请求消息体中。大小无限制
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

  <!--
    form:
     action:指定表单数据提交的URL
      * 表单项数据要想要被提交，则必须指定其name属性
     method:指定表单提交的方式
      1. get：默认值
        * 请求参数会拼接在URL后面
        * url的长度有限制 4KB
      2. post：
        * 请求参数会在http请求协议的请求体中
        * 请求参数无限制
   -->
  <form action="#" method="post">
    <input type="text" name="username">
    <input type="submit">
  </form>

</body>
</html>

get：

http://localhost:63342/html_learning/html/07-%E8%A1%A8%E5%8D%95%E6%A0%87%E7%AD%BE.html?username=%E5%93%88%E5%93%88#

post:

http://localhost:63342/html_learning/html/07-%E8%A1%A8%E5%8D%95%E6%A0%87%E7%AD%BE.html?_ijt=3mr7mm399phi1hfo0cj56rh0qt&_ij_reload=RELOAD_ON_SAVE#
  • <input>：表单项，通过type属性控制输入形式
type取值描述
text默认值。定义单行的输入字段
password定义密码字段
radio定义单选按钮
checkbox定义复选框
file定义文件上传按钮
hidden定义隐藏的输入字段
submit定义提交按钮，提交按钮会把表单数据发送到服务器
reset定义重置按钮，重置按钮会清除表单中的所有数据
button定义可点击按钮
  • <select>：定义下拉列表，<option>定义列表项
  • <textarea>：文本域
<!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标签的作用是：当用户在点击”用户名“这三个字的时候，会自动跳转到相应的输入框
      label标签中的for的值要与input中的id值一致
      -->
    <label for="username">用户名：</label>
    <input type="text" name="username" id="username"><br>
    <label for="password">密码：</label>
    <input type="password" name="password" id="password"><br>

    性别：
    <!--
      * 当多个radio具有相同的name，才能达到单选的效果
      * 如果不设置value，不管选哪个，提交的数据都会是on
      -->
    <input type="radio" name="gender" value="male" id="male">
    <label for="male">男</label>
    <input type="radio" name="gender" value="female" id="female">
    <label for="female">女</label>
    <br>

    爱好：
    <input type="checkbox" name="hobby" value="sing">唱
    <input type="checkbox" name="hobby" value="dance">跳
    <input type="checkbox" name="hobby" value="rap">rap
    <input type="checkbox" name="hobby" value="basketball">篮球
    <br>

    头像：
    <input type="file" value="选择文件">
    <br>

    城市：
    <select name="city">
      <option value="Nanjing">南京</option>
      <option value="Wuxi">无锡</option>
      <option value="Suzhou">苏州</option>
    </select>
    <br>

    个人描述：
    <textarea name="desc" cols="10" rows="2">

    </textarea>
    <br>


    <input type="submit" value="注册">
    <input type="reset" value="重置">
    <input type="button" value="按钮">


  </form>

</body>
</html>

效果：

在这里插入图片描述

提交之后在控制台看一下请求信息

在这里插入图片描述

我不想头秃阿
关注
专栏目录
HTML 快速入门
Naion的博客
09-12 560
简单的写了一些html中的标签。
HTML快速入门及简单的创建网页实战演示
m0_73770225的博客
11-26 4207
HTML文件结构HTML元素第一个HTML代码添加标题添加并修改图片添加超链接修改网页标题内容居中
html快速入门！
candice5566的博客
02-24 284
强烈推荐 《head first html and css》这本书！！强烈推荐！！非常之清晰，非常之简单！ 就是他！！！  
带你快速掌握HTML
m0_58878709的博客
05-03 921
HTML基础 前言 这篇帖子主要是学习HTML和CSS实用的基本语法和使用方法 了解HTML和CSS 结构 HTML用于描述页面的结构 表现 CSS用于控制页面中元素的样式 行为 JavaScript用于响应用户操作 学习工具 浏览器： 火狐、IE、Chrome 编译器： HBuilder、VSscode、NotePad++(任选一个) 调试工具： FireBug...
快速学习HTML（半小时）
qq_39627579的博客
04-30 716
时间紧迫直接上代码 <!-- 一个HTML文件 1.首先第一行由一个doctype文本描述标签 2.接下来由一个<html></html>标签 我们要做到是编辑<html></html>里的内容，具体包括 1.head部分：主要设置网页的描述、编码、引入的文件 2.body部分：作为在浏览器上的显示部分，主要处理：文字、图片、链...
html快速入门
10-26
快速学习html，快速入门，适合生手学习
html初学者入门教程
05-22
在探讨HTML初学者入门教程之前，我们首先需要理解HTML是什么。HTML，全称为超文本标记语言（Hypertext Markup Language），是一种用来创建网页的标准标记语言。HTML文件是包含文本内容和标记（tags）的特殊文本文件...
css html快速入门
04-16
css html快速入门的教材，非常适用于初学者。
php快速入门
01-08
### PHP快速入门知识点详解 #### 一、PHP简介与安装配置 - **PHP定义**：PHP（Hypertext Preprocessor）是一种广泛使用的开源通用脚本语言，尤其适用于Web开发并可嵌入HTML中。语法吸收了C语言、Java以及Perl的特点...
html快速入门教程
TengChuanB的博客
11-13 1647
html教程一、简介1.html2.HTML 标签3.Web 浏览器4. 声明5.中文编码6.HTML51.什么是 HTML5?2.HTML5 是如何起步的？3.HTML5 4.最小的HTML5文档5.HTML5 的改进6.HTML5 多媒体7.HTML5 应用8.HTML5 图形9.HTML5 使用 CSS310.语义元素11.HTML5 表单12.已移除元素二、标签与属性1.元素/标签2.属性三、标签示例1.title（标题）2.hr（水平线）3.注释4.p（段落）5.link（链接）1.target
HTML快速生成的快捷方法
最新发布
qq_61709335的博客
07-08 581
在写前端页面的时候，经常会用到一些快速生成HTML代码的快捷方法，但是时间长了，有些可能会忘记，今天在这里做一个笔记。（毕竟好记性不如烂笔头嘛）提示：在下面代码/命令写完后，按回车键快速生成，且命令之间不能有空格。命令之间不能有空格，命令之间不能有空格，命令之间不能有空格。生成效果 ：注：生成效果以最后一个为例（下同）。生成效果：$自符必须包含在{}中。
前端必备之HTML基础知识点
会思想的苇草i的博客
12-03 914
前端开发涉及使用HTML、CSS和JavaScript等技术创建网页。HTML（超文本标记语言）是构建网页结构的基础，通过标签描述页面内容。作为前端开发的基础，掌握HTML能够搭建页面框架、嵌入多媒体内容和实现超链接等功能。在前端开发中，HTML扮演着至关重要的角色，是构建网页的基础和起点。
30分钟让你精通html
菲菲家的吴先森
04-02 1733
本文目标 30分钟内让你明白HTML是什么，并对它有一些基本的了解。一旦入门后，你可以从网上找到更多更详细的资料来继续学习。 什么是HTML HTML是英文Hyper Text Mark-up Language(超文本标记语言)的缩写，它规定了自己的语法规则，用来表示比“文本”更丰富的意义，比如图片，表格，链接等。浏览器（IE,FireFox等）软件知道HTML语言的语法，可以用来查
HTML5快速设计网页
热门推荐
小人物
06-23 3万+
HTML5快速设计网页 目录 一、认识web开发和软件安装 二、使用HTML/HTML5搭建页面骨架 一、认识web开发和软件安装 1、认识网页：商城网页比较经典，比如京东，淘宝、小米商城还有锤子官网等有图片、文字还有一些多媒体组合而成的。我们还需要善于观察然后模仿成自己的 2、网站：由多个网页组织在一起而成的，网页和网页之间是有联系的。就像蜘蛛网一样织成一张大网 3、用户眼中...
sublime快速生成html标签(emmet语法)
sxiaobi
04-03 2万+
(http://sxiaobiblog.com/2018/04/03/%E5%BF%AB%E9%80%9F%E7%94%9F%E6%88%90html%E6%A0%87%E7%AD%BE/#SOHUCS) html 1.创建标准页面 2.创建html标记 3.创建html标签含Id、多个类名的标记 4.创建html示例 sublime快速生成html标签、Vscode快速...
html快速编写
weixin_34357267的博客
06-23 159
1. 嵌套操作---------- 子操作： &gt; div&gt;ul&gt;li &lt;div&gt; &lt;ul&gt; &lt;li&gt;&lt;/li&gt; &lt;/ul&gt; &lt;/div&gt; 并列：+ div+ul&gt;li &lt;
快速编写HTML代码常用的方法
qq_42448606的博客
10-14 4547
在前端开发的过程中，一个最繁琐的工作就是写 HTML、CSS 代码。数量繁多的标签、属性、尖括号、标签闭合等，让前端们甚是苦恼。于是，我向大家推荐 Emmet，它提供了一套非常简单的语法规则，书写起来非常爽快，然后只需要敲一个快捷键就立刻生成对应的 HTML 或 CSS 代码，极大提高了代码书写效率。 Emmet 的前身是大名鼎鼎的 Zen coding，它是一个编辑器插件，需要基于指定的编辑器使用，官方网站提供多编辑器支持，目前它支持的编辑器如下： Sublime Text Eclipse/Aptana
看完效率提升十倍！！！快速编写HTML代码
kiku
11-17 4343
快速编写HTML代码 1. 初始化 HTML文档需要包含一些固定的标签，比如< html>、< head>、< body>等，现在你只需要1秒钟就可以输入这些标签。比如输入“!”或“html:5”，然后按Tab键： <!DOCTYPE html> <html lang="zh"> <head> <meta char...
HTML快速入门：超文本标记语言解析
"HTML详解（基础快速入门版）" HTML，全称HyperText Markup Language，即超文本标记语言，是用于创建网页的标准标记语言。HTML由一系列的元素组成，这些元素通常由开始标签和结束标签（如`<标签>`和`标签>`）定义。...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值