HTML快速入门

最新推荐文章于 2022-12-03 10:41:04 发布
最新推荐文章于 2022-12-03 10:41:04 发布
阅读量137 收藏
点赞数
分类专栏： 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>

效果：

在这里插入图片描述

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

在这里插入图片描述

我不想头秃阿
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
html快速入门
10-26
快速学习html，快速入门，适合生手学习
css html快速入门
04-16
css html快速入门的教材，非常适用于初学者。
HTML 快速入门
Naion的博客
09-12 523
简单的写了一些html中的标签。
html快速入门！
candice5566的博客
02-24 266
强烈推荐 《head first html and css》这本书！！强烈推荐！！非常之清晰，非常之简单！ 就是他！！！  
带你快速掌握HTML
m0_58878709的博客
05-03 702
HTML基础 前言 这篇帖子主要是学习HTML和CSS实用的基本语法和使用方法 了解HTML和CSS 结构 HTML用于描述页面的结构 表现 CSS用于控制页面中元素的样式 行为 JavaScript用于响应用户操作 学习工具 浏览器： 火狐、IE、Chrome 编译器： HBuilder、VSscode、NotePad++(任选一个) 调试工具： FireBug...
快速学习HTML（半小时）
qq_39627579的博客
04-30 668
时间紧迫直接上代码 <!-- 一个HTML文件 1.首先第一行由一个doctype文本描述标签 2.接下来由一个<html></html>标签 我们要做到是编辑<html></html>里的内容，具体包括 1.head部分：主要设置网页的描述、编码、引入的文件 2.body部分：作为在浏览器上的显示部分，主要处理：文字、图片、链...
html基础文档快速入门
02-04
html基础文档快速入门
HTML快速入门多实例
10-26
非常全面的HTML自学教程，有很多实例。
html+css快速入门教程.pdf
06-25
nodeing课堂的资料 html+css个人觉得还不错，总结了经典的知识，满满的干货
html初学者入门教程
05-22
HTML5作为下一代网站开发技术，无论你是一个 Web 开发人员或者想探索新的平台的游戏开发者，都值得去研究。此教程为新手提供学习指导，有兴趣的可以了解一下。
html快速入门与精通
12-18
html中的各种常用标签及其属性，和一般的使用方法特效，简单实用，快速入门
html入门教程 html标记符号快速掌握
09-28
如果你对html一无所知，还苦恼与html如何入门，本文可以让你快速掌握html，如果你已经是html的高手，那么也希望您给我以更好的建议
HTML+5零距离接触：学习快速入门
05-07
HTML+5零距离接触：学习快速入门! 整理清晰，完整，好！
HTML快速入门.doc
05-13
制作网页必备，html入门好资料，对您一定会很有帮助
html快速入门教程
TengChuanB的博客
11-13 1576
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基础知识点
会思想的苇草i的博客
12-03 671
前端开发涉及使用HTML、CSS和JavaScript等技术创建网页。HTML（超文本标记语言）是构建网页结构的基础，通过标签描述页面内容。作为前端开发的基础，掌握HTML能够搭建页面框架、嵌入多媒体内容和实现超链接等功能。在前端开发中，HTML扮演着至关重要的角色，是构建网页的基础和起点。
30分钟让你精通html
菲菲家的吴先森
04-02 1684
本文目标 30分钟内让你明白HTML是什么，并对它有一些基本的了解。一旦入门后，你可以从网上找到更多更详细的资料来继续学习。 什么是HTML HTML是英文Hyper Text Mark-up Language(超文本标记语言)的缩写，它规定了自己的语法规则，用来表示比“文本”更丰富的意义，比如图片，表格，链接等。浏览器（IE,FireFox等）软件知道HTML语言的语法，可以用来查
HTML5快速设计网页
热门推荐
小人物
06-23 3万+
HTML5快速设计网页 目录 一、认识web开发和软件安装 二、使用HTML/HTML5搭建页面骨架 一、认识web开发和软件安装 1、认识网页：商城网页比较经典，比如京东，淘宝、小米商城还有锤子官网等有图片、文字还有一些多媒体组合而成的。我们还需要善于观察然后模仿成自己的 2、网站：由多个网页组织在一起而成的，网页和网页之间是有联系的。就像蜘蛛网一样织成一张大网 3、用户眼中...
html两小时快速入门
最新发布
09-09
对于HTML的快速入门，我可以为您提供一些基本的指导和资料。首先，HTML是用于创建网页的标记语言。下面是一个简单的HTML代码示例，它创建了一个最基本的网页： ```html <!DOCTYPE html> <html> 我的第一个网页 ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值