web前端开发之HTML的一些基本标签（初学级）

最新推荐文章于 2022-07-18 21:21:27 发布
最新推荐文章于 2022-07-18 21:21:27 发布
阅读量1.1k 收藏 6
点赞数 2
分类专栏： web前端 文章标签： web前端 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44705725/article/details/93485785
版权

1.标题 h1~h6

<h1>一级标题 heading  1</h1>
<h2>二级标题 heading  2</h2>
<h3>三级标题 heading  3</h3>
<h4>四级标题 heading  4</h4>
<h5>五级标题 heading  5</h5>
<h6>六级标题 heading  6</h6>
这里是正文文字

一级标题 heading 1

二级标题 heading 2

三级标题 heading 3

四级标题 heading 4
五级标题 heading 5
六级标题 heading 6
这里是正文文字

2.段落p

<p> 段落内容 <p>
<p> 这里是段落，每个段落自动换行。 </p>
<p> 段落内部文字忽略连续                        空格，
也不会显示空行，且不会换行。</p>

段落内容

这里是段落，每个段落自动换行。

段落内部文字忽略连续 空格， 也不会显示空行，且不会换行。

3.段内换行br
<br/> 单独出现，直接结束

<p> 这是一个段落。 <br/>注意规范的书写/保留 </p>

这是一个段落。
注意规范的书写/保留

4.空格字符 &nbsp

<p> 段落内部文字忽略连续 &nbsp;&nbsp; &nbsp;空格，  </p>

段落内部文字忽略连续     空格，

5.行内组合 span

<p> 最新 <span>中国人口调查</span> 指出 </p>

最新 中国人口调查 指出

6.水平线 hr

 <p> 正文段落 </p>
 <hr />
 <p> 正文段落 </p>

正文段落

正文段落

7.<!--注释内容-->

一个例子

<!DOCTYPE html>
<html lang="en">
<head>
      <meta charset="UTF-8">
      <title> 首页 </title>
      </head>
      <body>
      <h1> web 前端 开发 </h1>
      <h2> HTML </h2>
      <p> 超文本标记语言，用于构建网页结构 </p>
      <hr/>
      <h2>CSS</h2>
      <p>层叠样式表，用于构建网页样式 </p>
      <hr />
      <h2> JS </h2>
      <p>javascript,脚本语言，用于构建网页样式</p>

      </body>
      </html>

在这里插入图片描述

8.超链接 a

<a href="网址">文字或者图片 </a>

链接到本站点其他网页

<a href="news.html">新闻 </a>

新闻
链接到其他站点

<a href="http://www.baidu.com">百度 </a>

百度
虚拟超链接

<a href="#">版块2 </a>

版块2

一个例子

<!DOCTYPE html>
<html lang="en">
<head>
      <meta charset="UTF-8">
      <title> web前端开发 </title>
      </head>
      <body>
      <a href="http://www.w3c.org"> w3c组织</a><br/>
      <a href="http://www.w3school.com.cn"> w3school学习网站</a><br/>
      <a href="vs.html"> 前端与后端</a>
      <h1> WEB前端开发</h1>
      <h5> web front-end development </h5>
      <hr/>
      <h2> 基本概念 </h2>
      <p> 一大堆文字。。。。。</p>
      <p>HTML</p>
      <p>CSS</p>
      <p>JS</p>
      <hr/>
      <h6>copyright</h6>

      </body>
      </html>

在这里插入图片描述

9.插入图片img

<img src="w3school.gif"  alt="w3c"    />
w3c

src属性：路径+文件名

（1）绝对路径   以根目录为基准  <img src ="C:/site/logo.gif " />
 (2)相对路径  以该文档所在位置为基准  <img src="logo.gif" />

一个例子

<!DOCTYPE html>
<html lang="en">
<head>
      <meta charset="UTF-8">
      <title> my site </title>
      </head>
      <body>
      <h1> 常用站点 </h1>
      <img src="imsges/ifeng.png" alt="" ><a href="http://www.ifeng.com"> 凤凰</a>
      <img src="imsges/sina.png" alt=""><a href="http://www.sina.com"> 新浪</a>

      </body>
      </html>

在这里插入图片描述

10.区域标签 div

<div align="center">
<h1> web前端开发 </h1>
<p> HTML </p>
<p> CSS </p>
<p> JavaScript </p>
</div>

web前端开发

HTML

CSS

JavaScript

一个例子

<!DOCTYPE html>
<html lang="en">
<head>
      <meta charset="UTF-8">
      <title> 李白诗词 </title>
      </head>
      <body>
      <div id="container" align="center">
      	<p> 将进酒 |送友人|静夜思 </p>
      	<hr />
      	<img scr="123.png" alt=" ">
      	<h1> 将进酒</h1>
      	<p> 君不见，黄河之水天上来，奔流到海不复回。</p>
        <p> 君不见，高堂明镜悲白发，朝如青丝暮成雪。</p>
        <p>人生得意须尽欢，莫使金樽空对月。</p>
        <p>天生我材必有用，千金散尽还复来。</p>
        <p>烹羊宰牛且为乐，会须一饮三百杯。</p>
        <p>岑夫子，丹丘生，将进酒，杯莫停。</p>
        <p>与君歌一曲，请君为我倾耳听。    </p>
        <p>钟鼓馔玉不足贵，但愿长醉不复醒。</p>
        <p>古来圣贤皆寂寞，惟有饮者留其名。</p>
        <p>陈王昔时宴平乐，斗酒十千恣欢谑。</p>
        <p>主人何为言少钱，径须沽取对君酌。</p>
        <p>五花马，千金裘，呼儿将出换美酒，与尔同销万古愁。</p>

      </body>
      </html>

图片不出现，我也很无奈

11.无序列表 ul li

<h1> web前端开发</h1>
<ul>
<li> HTML </li>
<li> CSS </li>
<li> JS </li>
</ul>

web前端开发

  • HTML
  • CSS
  • JS

12.有序列表 ol li

<h1> web前端开发</h1>
<ol>
<li> HTML </li>
<li> CSS </li>
<li> JS </li>
</ol>

web前端开发

  1. HTML
  2. CSS
  3. JS

13.表格 table tr td

<table>
<tr>
  <td> data  </td>
  <td> data  </td>
  <td> data  </td>
</tr>
<tr>
<td> data  </td>
<td> data  </td>
<td> data  </td>
</tr>
</table>
data data data
data data data
表头单元格 th 
<table  border="1" >
<tr>  <th> 班级 </th>  <th> 学生数 </th>  <th> 平均成绩 </th>         </tr>
<tr>  <td> 一班 </td>  <td>30 </td>  <td>89 </td>         </tr>
<tr>  <td> 一班 </td>  <td>32 </td>  <td>80 </td>         </tr>
班级 学生数 平均成绩
一班 30 89
一班 32 80

14.表单
（1） 表单：是一个区域，采集用户信息
（2） 表单元素：文本框，按钮，单选，复选，下拉列表，文本域

a.文本框，密码框 input

<form>  
  账户 : <input type ="text" name=userName" />
  </br>
  密码 : <input type ="password" name=userPsd" />
</form>
账户 : 密码 :

b.提交按钮 input-submit

<form>  
  姓名 : 
  <input type ="text" value=" "  name="myName" />
 <input  type ="submit"  value="提交 " name=submitBt" />
</form>

在这里插入图片描述
c.重置按钮 input-reset

一个例子

<!DOCTYPE html>
<html lang="en">
<head>
      <meta charset="UTF-8">
      <title> 按钮 </title>
      </head>
      <body>
      <form>  
  爱好 : 
  <input type ="text" >
 <input  type ="submit"  value="确定 " />
 <input  type ="reset"  value="重置 " />
</form> 

      </body>
      </html>

在这里插入图片描述

d.单选框，复选框input-radio checkbox

一个例子

<!DOCTYPE html>
<html lang="en">
<head>
      <meta charset="UTF-8">
      <title> 按钮 </title>
      </head>
      <body>
      <form>  
       性别：                                                                                          
  男   <input type ="radio"  value="boy"  name="gender" checked="checked" />
 女     <input  type ="radio"  value="girl"  name="gender" />
 <br />
 爱好：
 <input  type ="checkbox"  value="1"  name="music" checked="checked"/> 音乐
  <input  type ="checkbox"  value="2"  name="sport" /> 体育
   <input  type ="checkbox"  value="3"  name="reading"/> 阅读

      </body>
      </html>

在这里插入图片描述

e.下拉列表框 select option

<!DOCTYPE html>
<html lang="en">
<head>
      <meta charset="UTF-8">
      <title> 按钮 </title>
      </head>
      <body>
      <form>  
       爱好：                                                 
       <select>
       	<option> 看书</option>
       	<option selected="selected"> 旅游</option>
       	<option> 运动</option>
       	<option> 购物</option>
       </select>
</form>
      </body>
      </html>

在这里插入图片描述
f.文本域TextArea

<!DOCTYPE html>
<html lang="en">
<head>
      <meta charset="UTF-8">
      <title> 文本域 </title>
      </head>
      <body>
      <form>  
      个人简介： <br>
      <textarea  rows="10"  cols="10"> 在这里输入内容... 
      </textarea>
      <br/>
      <input type="submit" value="确定"/>
      <input type="reset" name="重置"/>
</form>
      </body>
      </html>

在这里插入图片描述

在这里插入图片描述

小兔子乖乖-L
关注
专栏目录
Web前端开发 HTML常用标签大全
www.h y p e r p l a s m a.top
08-09 1264
本文全面介绍了HTML的常用标签，包括标签的结构、分类以及具体用法。超文本标记语言通过标签定义网页内容，文中提到双标签和单标签的使用，并示例了HTML文档的基本骨架。还介绍了注释、标题、段落、换行、文本格式化、图像、超链接、音频、视频等常见标签的定义和示例，强调了表单标签在用户信息收集中的重要性，如输入框、下拉菜单和按钮等。此外，文中提到了语义化标签，强调使用有语义的标签能提高网页可读性与结构清晰度。整体而言，文章为前端开发者提供了HTML标签知识的参考，适合初学者理解HTML基本元素及其应用
Python Web前端开发HTML+CSS视频教程（三）
06-13
总的来说，"Python Web前端开发HTML+CSS视频教程（三）"是一门全面介绍Web前端开发的课程，无论你是初学者还是有一定经验的开发者，都能从中受益。通过系统学习，你将能够独立创建具有现代感和功能性的网页，实现...
5种非常精美的Web前端标签（三）
08-13
在线效果：http://ynif.v099.10000net.cn/demo/biaoqian/3/biaoqian/index.html
display：inline和display：block， display：inline-block区别，清除浮动的方法
Executioner975的博客
11-03 1150
display：inline和display：block， display：inline-block区别，清除浮动的方法 实现简单的div并排 inline: 使元素变成行内元素，拥有行内元素的特性，即可以与其他行内元素共享一行，不会独占一行. 不能更改元素的height，width的值，大小由内容撑开. 可以使用padding，margin的left和right产生边距效果，但是top和bottom就不行. block: 使元素变成块级元素，独占一行，在不设置自己的宽度的情况下，块级元素会默认填满父级元
web前端开发项目实例，HTML表单标签
m0_60144434的博客
07-23 183
一、公务员都不要35岁以上的，何况大公司 这让很多人感到惶恐，现在职场上有一种现象：很多用人单位会在招聘信息上明确标注，年龄需在35岁以下。为什么有经验、有人脉的职场中年人会如此遭“嫌弃”呢？ 首先，思想落后。日新月异的时代需要不断进步的人，而不是守着自己那点老经验的“职场前辈”。 的确，现在很多职场人无论年龄多大，一直追随着时代的脚步，坚持做一个“老顽童”。 但又有多少人，放弃了对新时代的探索，固守自己的老思想，成为一个名副其实的老油条。 再次，家庭牵绊。人到中年，基本都有爱人和孩子，工作成为你生活中的一
前端开发HTML基本标签(一)
小白什么也不会想做全栈
02-25 460
HTML基本标签 1.HEML结构 一个文档声明： 一个html标签对： <html></heml> 一个head标签对： <head></head> 头部 用于定义一些特殊的内容，如页面标题、定时刷新、外部文件等 一个body标签对： <body></body> 身体 大部分代码都是在这个标签对内部编写 ...
Web基础（从零开始）——HTML标签（标题，段落，换行）
qq_57633498的博客
11-02 743
在HTML中标题标签共有六个，从1—6依次减小，分别为一级标题，二级标题......依次类推 <h1>H1</h1> <h2>H2</h2> <h3>H3</h3> <h4>H4</h4> <h5>H5</h5> <h6>H6</h6> 在HTML写文字是不会自动换行的，如果复制一段文字想要实现分段落换行就要使用<p></p&g.
HTML.zip_Java Web 作业_html_html网页 开发_web前端作业_web前端开发
09-21
总的来说，这个“HTML.zip”文件中的作业涵盖了HTML网页开发的基本概念和实践，是学习Web前端开发的一个良好起点。通过完成这样的练习，学生可以熟悉HTML标签的使用，理解如何构建用户界面，并逐步掌握Web开发的核心...
小白自学web前端开发之认识HBuilder和html语言
01-08
在开始Web前端开发的旅程时，首先需要了解并掌握一些基础工具和语言。HBuilder是一款强大的Web开发集成环境，尤其适合初学者，它提供了便捷的新建项目和编写HTML代码的功能。在官网下载并安装HBuilder后，我们可以...
web前端开发html+css+js免费下载（设计作品成品）
12-31
在“web前端开发html+css+js免费下载（设计作品成品）”这个资源中，包含了一系列使用HTML、CSS和JavaScript技术构建的Web应用实例。这些技术是现代Web开发的基石，它们共同作用于创建交互式的网页和应用程序。下面...
前端学习（二） 简单标签
xyの学习空间
06-06 128
简单标签 标签名 含义 p 段落 br 换行 strong 文本加粗 em 文本斜体 del 文本删除标注 ins 文本下划线 <!-- --> 标注 特殊标签 特殊字符 字符代码 空格 &nbsp； 小于号 &lt； 大于号 &gt； & &amp； ¥ &yen； © &.
WEB前端开发——HTML基础
叶子的小本本
03-26 491
这是简单学习了html语言后的笔记。整理在一起，以后就不用到处翻别人的了。 学习的课程是慕课网里的一门课。 课程页面 什么是HTML？ HTML不是一种编程语言，而是一种标记语言，有着一套标记标签。HTML使用标记标签来描述网页。 标签的用途 我们学习网页制作时，常常会听到一个词，语义化。那么什么叫做语义化呢，说的通俗点就是：明白每个标签的用途（在什么情况下使用此标签合理）比如，网页上的文章的标题就可以用标题标签，网页上的各个栏目的栏目名称也可以使用标题标签。文章中内容的段落就得放在段落标签中等等。 讲了这
web前端开发基础#HTML语言基础
qq_42258904的博客
02-25 648
HTML语言基础 HTML是一种描述性标记语言，用来描述页面内容的显示方式。 HTML文件是一种纯文本文件，以“.html”或“.htm”为后缀。 HTML的基本组成元素，语法结构如下： <标签> 内容 <标签> HTML文档结构是由,,这三大元素组成： < html>元素： 文档以标签开始，以标签结束，所有内容都要放在这两个标签之间。 < head&gt...
1.web前端开发入门，html
a2237464569的博客
07-18 185
HTML(HyperTextMarkupLanguage）超文本标记语言HTML是用于创建网页的标准标记语言HTML不是一种编程语言，而是一种标记语言(markuplanguage)超级文本标记语言是万维网（Web）编程的基础。超级文本标记语言之所以称为超文本标记语言，是因为文本中包含了所谓“超级链接”点。...
web前端第一次怎么写标题
weixin_45895314的博客
11-18 589
#web前端第一次怎么写标题 大家好，今天第一天写博客，本人主要学的web前端，可能今天第一次写会有点不好，不过人嘛，总有第一次嘛哈哈哈！以后我学到的也会让大家所有人能看到，想让想学习的能够看到，能够帮助大家，共同努力，一定要做个有上进心的人，因为第一次写，应该会写的不太好，希望各位大神，各位大佬，不要喷我，哈哈哈。加油加油加油 Bootstarp主要三部分 Bootstarp主要三部分分为： 1...
【Web前端】
Ban_a的博客
04-22 511
文章目录前端简介http协议HTML简介HTMLhtml格式注释html中的特殊字符简单标签复杂标签 前端简介 学习web前端开发基础技术需要掌握：HTML、CSS、JavaScript语言。下面我们就来了解下这三门技术都是用来实现什么的： HTML是网页内容的载体。内容就是网页制作者放在页面上想要让用户浏览的信息，可以包含文字、图片、视频等。 CSS样式是表现。就像网页的外衣。比如，标题字体、颜色变化，或为标题加入背景图片、边框等。所有这些用来改变内容外观的东西称之为表现。 JavaScript是用来实现
web前端基础(一)--HTML知识点总结
Pinker_Q
08-16 3135
文章目录Html,CSS,JavaScript的关系HTMLhtml格式注释html中的特殊字符认识简单标签 Html,CSS,JavaScript的关系 学习web前端开发基础技术需要掌握：HTML、CSS、JavaScript语言。下面我们就来了解下这三门技术都是用来实现什么的： HTML是网页内容的载体。内容就是网页制作者放在页面上想要让用户浏览的信息，可以包含文字、图片、视频等。 CSS样式是表现。就像网页的外衣。比如，标题字体、颜色变化，或为标题加入背景图片、边框等。所有这些用来改变内容外
前端html标题
zcxbxy的博客
02-28 348
h1标题只能在当前页面中出现一个，除非它包含在hgroup， <!-- <h1>一级标题</h1> <h2>二级标题</h2> <h3>三级标题</h3> <h4>四级标题</h4> <h5>五级标题</h5> ...
前端基础-html-标题标签
FR的博客
02-10 294
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title&...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值