软件测试第一阶段：web前端技术基础-2-html中的一些基本标签

已于 2022-03-22 16:14:15 修改
阅读量1.1k 收藏 1
点赞数
分类专栏： html 文章标签： html5
于 2022-03-21 16:44:15 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_67254534/article/details/123637641
版权

HTML 超文本标识语言(hyper text markup language ) 是由一堆代码组成，通过标识和标签，来渲染 文字、图片、音频、视频、动画、表格等。

蒂姆·博纳斯·李 W3C （w3c.org）。html代码，由前端大佬，写出来的网页 能符合web标准。万维网联盟 全球四大中心，麻省理工学院，欧洲数字信息中心、东京庆应大学，北京航空航天大学。

主要作用：就是让各大浏览器都能够显示同一样的页面。

1、网页由哪些内容组成

  • 文字、图片、视频、音频、动画、表格。

2、网页背后的本质是什么

  • 前端程序员写的代码

3、前端代码咋变成网页的呢

  • 通过浏览器的转化(渲染)成用户看到的页面
  • 浏览器:是网页显示、运行的平台。前端的开发必备利器。
  • 渲染引擎(内核):浏览器中针对代码进行解析。

内核不同，会导致加载同样代码，显示有所区别，不同内容对代码的解析速度、性能、效果也是不同的

浏览器渲染引擎(内核)代表性产品
IE/edgeTrident猎豹、360、百度、搜狗
FireFoxGecko火狐
safariwebkit苹果自带的
chromeBlink其实webkit分支 谷歌、欧朋
QQ浏览器X5微信 搜一搜
  • HTML只是描述网页的一种语言，不是编程语言
  • H5 IE8以下版本不支持H5。1

判断标签支持某浏览器的某个版本 Can I use... Support tables for HTML5, CSS3, etc

手写第一个简单网页

<!DOCTYPE html>  <!--说明一下代码全部是html-->
<html>           <!---->
    <head>
        <title>软测三期</title>
    </head>
    <body>
        <center>hello web</center>
        i am rllt<br/>  
        i from china
    </body>
</html>

      为html添加注释<!--XXXXX-->

  • 双标记也叫作常规标记，例如<html></html> 有头有尾。标记中可以添加属性和属性值。
  • 单标记也叫空标记
  • 没头没尾，但是也可以加属性和属性值。
  • 常用的标记

1、<h>标签

  • 作用：是标题。h1~h6。一个网页最好只有一个大标题，
  • 属性:align
  • 属性值:left(左) center(中间) right(右边)

2、<p>标签

  • 作用：是指定一个段落，并自动换行
  • 属性：align
  • 属性值：left(左) center(中间) right(右边)

3、<br> 标签

  • 作用是换行

4、<em>、<i> 标记

  • 作用是让字体进行倾斜

5、<del>、<s>标记

  • 作用给文字加上横线。

6、<u> 标记

  • 作用为文字加上下划线

7、<b>、<strong>标记

  • 作用是着重突出显示某文字。加粗

8、sub和sup 标记

  • 作用 sub 是下标 sup 是上标

9、font标记  ：规定文本的字体、字体尺寸、字体颜色

  • 属性:
  • color：字体颜色
  • size：规定font中文本中字体尺寸大小

10、<a>标记

  • 作用：主要跳转网页链接或者链接到本地文件
  • 属性:href="XXX"|"http://XXXXXX"
  • 相对路径 : 相对于html所在的路径而言，去调用本地文件
  • 绝对路径:从根分区一直到文件所在位置，所有经过的路径全部写上

11、hr标记

  • 作用:生成一条横线
  • 属性：size 设置大小单位 px(像素)
    •  width: 横线在网页显示的长度
    • color：横线的颜色设置
    • align:横线放置的位置（left center right）
    • body标记常用属性
    • bgcolor: 设置网页背景颜色
    • background：设置网页背景图片
  • http-equiv：模拟http协议文件头信息，主要目的是服务器向客户端响应时，用什么格式显示。
  • content：指定详细内容信息。
  • charset：指定字符集，常用的是utf-8.

  • tr标签：是table中的子标签，用来定义行

  • td标签：是tr中的子标签，用来定义列

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

</head>

<body>

    <table  border="10px green solid" height="300" weight="200" rules="all" align="center" cellpacing="0" cellpading>

        <tr bgcolor="blue" align="center" >  <td></td> <td</td> <td></td> <td> </td></tr>

        <tr bgcolor="yellow" align="center"> <td> </td> <td></td> <td></td> ><td> </td>  </tr>

        <tr bgcolor="orange" align="centr"> <td></td> <td></td> <td></td>  <td></td> </tr>

       

</table>

</body>

</html>

12、pre、div、p标签

是一个块标记，同时可将pre标记中的所有内容完全展现。包含换行，空格等。

span标签与p 、div的区别是，span只占用自己所占用的页面空间，不会占用整行

html实体字符

> &gt;
< &lt;
* &times;
/ &divide;
​

中文占两个字符 英文是一个字符?

<meta http-equiv="content"; content="text/html"; charset="utf-8">

border:图片加边框

代码需要有层次感。如果比较重要的地方需要添加注释

13、ul 无序列表

作用：生成一个列表，并且每行前没有序号

ul和ol标签里面只能包含li标签，li标签中可以放置其他标签。

格式

<ul >
    <li></li>
</ul>

属性：

type：指定列表每行前面序号的形式 有disc（小黑点） circle(空心圆) square（实心方块） none（表示没有序号，使用最多）

14、ol 有序列表

作用：生成一个带有序号的列表

属性：type 指定列表序号的形式，共有5种 1、 A、 a、 I、 i

<ol >
    <li></li>
</ol>

15、img 标签

作用：是在网页中插入图片

属性：

src：指定图片所在的路径

路径输入方式：相对路径如果同级目录我们可以直接调用 1.gif

如果是在图片在上层目录 ../1.gif 上上层用../../1.gif

width:设置图片宽度

height：设置图片高度。一般情况指定宽度或者高度其中一个就行，图片是等比例缩放。

16、table标签

作用：制作表格

属性：

  • border：表示边框，其中有三个值，线条的颜色、线条的粗细、线条的类型
    • 格式为：border="1px red solid" （1像素 红色 实线）
  • width：指定表格的宽度
  • height：指定表格的高度
  • rules=all：合并边框线
    • 有的浏览器不兼容可以试着用：
    • cellpacing：合并边框线
    • cellpadding：合并边框线
  • align：设置表格在网页的对齐方式（left、right、center ）

tr属性

  • bgcolor：设置行的背景颜色，常用的有 blue，yellow，red
  • height：设置行高
  • align：设置表格中内容的对齐方式（left、right、center ）

td属性

  • bgcolor：设置背景色，常用的有pink、yellowgreen、greenyellow、silver

  • width：设置表格的宽度

  • colspan：（横向合并单元格）      从左向右 合并单元格       格式= colspan=“单元格个数”

  • rowspan：（纵向合并单元格）      从上向下 合并单元格       格式=   rowspan="单元格个数"

案例：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

</head>

<body>

    <table  border="10px green solid" height="300" weight="200" rules="all" align="center" cellpacing="0" cellpading>

        <tr align="center" bgcolor="greenyellow">   <td colspan="4">王者荣耀 </td>    </tr>

        <tr bgcolor="blue" align="center"  >

             <td>姓名</td> <td>属性</td> <td>被动</td> <td> 终极技能</td>

            </tr>

        <tr bgcolor="yellow" align="center">

             <td>廉颇</td> <td>怕法师</td> <td>勇士之魂</td> ><td>天崩地裂</td>

             </tr>

        <tr bgcolor="orange" align="centr">

            <td>孙尚香</td> <td>怕打野</td> <td>活力迸发</td>  <td>救济弩炮</td>

        </tr>

       

</table>

</body>

</html>

结果如下：

活着868
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
「HTML和CSS入门指南」tr 标签详解
a451319296的博客
06-06 3324
tr 标签是一个重要的标签，用于在表格中创建行。每一行都由一个或多个单元格组成，其中单元格可以通过使用 或 标签来创建。在使用 tr 标签时，请注意选择正确的属性和方法、确保每个行中的单元格数量相等，并避免兼容性问题。
换行符在textarea、div、pre中的区别
weixin_30858241的博客
01-30 251
关于换行符，网上有许多说法，IE早期的浏览器是\r\n,有的浏览器是\r,但很难找到确切的版本号。经过本人正则匹配测试，chrome、firefox、safari、IE11都是\n, 因此保险起见,若对换行符进行正则匹配，应当同时匹配\n, \r以及\r\n. 值得一提的是\n、\r和\r\n都有换一行的效果，有些同学写换行时常写作\n\r,这就相当于换了两行，因此必须注意！ 换行符用于te...
Web前端基础---HTML基本标签（内附笔记框架，适合初学者）
m0_69059702的博客
05-08 274
HTML 指的是超文本标记语言 (Hyper Text Markup Language) ，它是用来描述网页的一种语言。它可以加入图片、声音、动画、多媒体等内容，也可以从一个文件跳转到另一个文件，与世界各地主机的文件连接。 HTML 常用标签 1.标题标签 <h1> - <h6>（重要） 特点： 加了标题的文字会变的加粗，字号也会依次变大，一个标题独占一行。 2.段落标签<p> </p>（重要） 特点：用于定义段落，它可以将整个网页...
web表格基本标签
xuxu_77的博客
07-13 515
现在HTML 表格应该用于表格数据，而不是来实现网页布局
学习JavaWeb的第三天（关于标签，表格的一些内容）
weixin_64311506的博客
07-13 774
学习Javaweb第三天，关于javaweb中标签表格类的知识笔记
frontend-bootcamp：从HTMLCSSJS到TypeScriptReactRedux的前端研讨会
02-03
第一天介绍了Web基础：HTML，CSS和JavaScript。 这是针对新手和有经验的开发人员的。 在第二天，我们将深入探讨TypeScript，状态管理和测试等高级主题。 尽管任何人都可以使用这些示例，但是如果您具有一些编程和...
第六届软件杯赛题-B1-基于互联网大数据的事件智能抓取和画像-你的画像.zip
02-09
包含前端、后端、移动开发、操作系统、人工智能、物联网、信息化管理、数据库、硬件开发、大数据、课程资源、音视频、网站开发等各种技术项目的源码。 包括STM32、ESP8266、PHP、QT、Linux、iOS、C++、Java、python...
中国第一专业手机门户触屏版自适应html5手机网站模板.zip
04-07
【项目资源】：包含前端、后端、移动开发、操作系统、人工智能、物联网、信息化管理、数据库、硬件开发、大数据、课程资源、音视频、网站开发等各种技术项目的源码。包括STM32、ESP8266、PHP、QT、Linux、iOS、C++、...
(FZY363)中国第一专业手机门户触屏版自适应html5手机网站模板.zip
最新发布
04-09
【项目资源】：包含前端、后端、移动开发、操作系统、人工智能、物联网、信息化管理、数据库、硬件开发、大数据、课程资源、音视频、网站开发等各种技术项目的源码。包括STM32、ESP8266、PHP、QT、Linux、iOS、C++、...
STM32时钟配置
xiaoxiaoxiaoali的博客
09-07 3893
STM32时钟配置
毕业季，作为程序员（it软件开发工程师），如何培养强大的解决问题的能力
南北极之间
08-12 1792
例如，如果一个孩子试图弄清楚如何打开一个玩具盒，他或她可能会尝试各种方法（例如，拉，推，举），直到找到正确的方法。良好的解决问题的能力包括能够创造性地和分析性地思考，将问题分解成更小的部分，并使用系统的方法找到解决方案。递归涉及将问题分解为较小的子问题，解决每个子问题，然后将子问题的解决方案组合在一起以解决更大的问题。另一个常见的例子是使用算法，例如快速排序算法，它将问题分解成更小的部分，解决每个部分，然后将解决方案组合到各个部分以解决更大的问题。如果你想成功，你需要有很强的解决问题的能力。........
div p、div>p、div+p、div~p、div.a 、p,span的用法和区别
热门推荐
九亿宅男的梦的博客
01-22 1万+
div p、div&gt;p、div+p、div~p、div.a 的用法和区别 div p ：将所有&lt;div&gt;标签里面的&lt;p&gt;标签选中（子标签和孙子辈标签） &lt;style&gt;    div span{color:red;} &lt;/style&gt; &lt;div&gt;   &lt;p&gt;       &lt;span&gt; Hello
H5 table tr标签和td标签的区别
mazegong的博客
07-17 1万+
标签定义 HTML 表格中的行。 一个 元素包含一个或多个 或 元素。 标签定义 HTML 表格中的标准单元格。 HTML 表格有两种单元格类型： 表头单元格 - 包含头部信息（由 元素创建） 标准单元格 - 包含数据（由 元素创建） 元素中的文本通常呈现为粗体并且居中。 元素中的文本通常是普通的左对齐文本。
web前端设计与开发——HTML基础（六）标签（四）div、ul、ol、table、tr、td、th（有标签中文意思）
zjj8008120308的博客
07-02 6687
1.div 全称 division 意为“区分” 2.ul 全称 unordered list 意为“无序列表” 3.ol 全称 ordered list 意为“有序列表” 4.table中 tr：英文全称是＂tablerow＂的缩写”的缩写。 td：英文全称是＂tabledatacell＂，中文意思是“表中的数据单元”。 th：英文全称是＂tableheadercell＂的缩写，在中文中是“表头单元格”的意思。 div主要是划分区域，方便CSS处理 无序列表 有序列表 表格t.
【Web前端】HTML—4.表格标签
weixin_41806595的博客
06-07 687
一、表格的主要作用 表格主要用于显示、展示数据，可以让数据显示的非常规整，有条理，可读性非常好。特别是后台展示数据时候，能够熟练运用表格就显得很重要。 即：表格不是用来布局页面的，而是用来展示数据的。 二、表格的基本语法 <table> <tr> <td>单元格内的文字</td> ``` </tr> ``` </table> 1、<table></table>是用于定
CSS实现p标签，span，div，a，pre文字垂直居中
萧熙666的博客
10-22 5399
CSS实现p标签，span，div，a，pre文字垂直居中，建议小白观看 在HTML和css中，文字垂直居中一直是个困惑，因为在css中只有text-align属性设置水平对齐方式，text-align: center;这种方式水平对齐。以下是css设置文本垂直居中的对齐方式。 源码可以参考，下图 源码可以参考，先通过text-align:center;来设置水平居中，再通过行高line-height: 100px; 100px是父元素的高度，通过 ...
Web前端——html基本标签（二）
weixin_61561066的博客
04-15 538
目录 一、音频标签 二、视频标签 三、表格 1、<table>的属性 2、tr标签的属性 3、td标签的属性 4、表格的标题标签 5、语义标签 四、表单 1、什么事表单？ 2、表单的组成 3、表单控件的种类 （1）input控件 （2）textarea控件 （3）select控件 五、html的标签 1、语义标签 2、新增的表单控件属性 总结 一、音频标签 <audio src="音频的路径...
html之 pre标签下的div标签测试2208082212
kfepiza的博客
08-08 269
html之 pre标签下的div标签测试2208082212。
第43章 RTC—实时时钟—零死角玩转STM32-F429系列
aicai1841的博客
08-25 633
第43章 RTC—实时时钟 全套200集视频教程和1000页PDF教程请到秉火论坛下载：www.firebbs.cn 野火视频教程优酷观看网址：http://i.youku.com/firege 43.1 RTC简介 RTC—real time clock，实时时钟，主要包含日历、闹钟和自动唤醒这三部分的功能，其中的日历功能我们使用的最多。日历...
nginx: configuration file E:nginx-1.18.0nginx-1.18.0/conf/nginx.conf test failed
02-02
它可以作为一个独立的Web服务器，也可以作为其他Web服务器的前端代理服务器。nginx的配置文件是nginx.conf，它用于配置nginx服务器的行为。 根据你提供的信息，"configuration file E:nginx-1.18.0nginx-1.18.0/...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值