HTML标签与认识浏览器

最新推荐文章于 2022-07-24 07:45:00 发布

黑球啊

最新推荐文章于 2022-07-24 07:45:00 发布

阅读量327

点赞数

分类专栏：前端学习

本文链接：https://blog.csdn.net/weixin_52563771/article/details/115822722

版权

前端学习专栏收录该内容

16 篇文章 0 订阅

订阅专栏

一，认识浏览器

浏览器： 用来检索，展示以及传递Web信息资源的应用程序是网页显示、运行是平台。
常用的浏览器有IE、火狐（Firefox）、谷歌（chrome）、Safari和Opera等。在这里插入图片描述
浏览器内核：负责读取网页内容，整理讯息，计算网页的显示方式并显示页面。

浏览器	内核
IE	Trident
firefox	Gecko
Safari	Webkit
chrome/Opera	Blink

而日常经常使用的百度属于搜索引擎系统，并不属于浏览器

二，网页

1，网站：指在因特网上根据一定的规则，使用HTML等制作的用于展示特定内容相关的网页集合。即网页是构成网站的基本元素。
2，网页：指通过浏览器来阅读，通常由图片、链接、文字、音频、视频等元素组成，常为HTML格式的文件。
3，Wed 的标准构成:

标准	内容以及说明
结构	HTML 网页元素的结构和内容
表现	CSS 网页元素的外观和位置（版式，颜色与大小）
行为	Javascript 网页模型的定义和交互

三，HTML

1，HTML简介

 HTML指超文本标记语言（Hyper Text Markup Language),用来描述网页的一种语言。HTML 为一种标记语言（markup language）。
 
 超文本含义：

可以加入图片、声音、动画、多媒体等内容（超越了文本限制）。
可以从一个文件跳转到另一个文件，与世界各地主机的文本链接（超文本链接）。

2，HTML标签

2.1 基本语法

HTML标签是由尖括号包围的关键词
HTML通常是成对出现的（双标签），第一个标签为开始标签，第二个为结束标签。
有些特殊标签必须是单标签，（如<br/> 强制换行为单标签)

2.2 HTML标签关系

包含关系(父子关系）

<head>
	<title></title>
<head>

并列关系

<head></head>
<body></body>

2.3 HTML基本结构标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
</body>
</html>

骨架标签：

标签名	定义及说明
`<html></html>`	HTML标签（页面中最大的标签，也称跟根标签）
`<head></head>`	文档的头部（其中必须设置title标签）
`<title></title>`	文档的标题（网页标题）
`<body></body>`	文档的主体（包含文档的所有内容）

说明：
1，<!DOCTYPE >为文档声明：作用为告诉浏览器用哪种HTML版本显示（写于文档最前面，不是HTML标签，只是文档类型声明表签）

<!DOCTYPE  html>

表示以HTML5版本来显示页面
2，lang用于定义当前文档显示语言。

lang="en"

表示当前文档显示为英文
en定义语言为英语
zn-CN定义语言为中文
但是语言种类不固定，不是特别强制。
3，charset多个字符的集合。在<head>标签内通过<meta>标签charset属性来规定HTML文档应该使用哪种字符编码。

<meta charset="UTF-8">

属性UTF-8被称为万国码，囊括所有国家所需字符。
以上在VS-code中用英文“!”即可得到

2.4 HTML基本标签

1，标题标签

<h1>~<h6>

共有六种在大小依次减小的标题标签

<h1>我是一级标题</h1>
<h2>我是二级标题</h2>
<h3>我是三级标题</h3>
<h4>我是四级标题</h4>
<h5>我是五级标题</h5>
<h6>我是六级标题</h6>

输出为：
在这里插入图片描述

2.段落标签

<p>我是段落标签</p>

在HTML标签中<p>用于定义段落，将文档分割为若干段落。

特点如下：

文本会根据网页页面大小自动换行。
段落与段落之间保有空隙。

3.文本格式化标签

有时文字需要设置粗体，斜体或下划线等效果，来突出重要性。

语义	标签
加粗	`<strong></strong>`
倾斜	`<em></em>`
删除线	`<del></del>`
下划线	`<ins></ins>`

4，盒子标签

两者皆为盒子标签，用于网页布局。
div为division的缩写，表示分割、分区
span表示跨度、跨距。

两者区别：

<div>为块级元素，包含元素会自动换行，故一行只能放一个<div>，为大盒子。<span>为行内元素，前后内容不会换行，故一行可以放多个<span>，为小盒子。且<span>可以作为<div>的子元素。
<div>可以通过CSS来设置width、height与margin值等，而<span>标签的宽度与高度受其本身内容控制随其内容的改变而改变，无法通过CSS来设置样式。
<span>标签只能容纳文本或是其他行内元素，不能容纳块级元素。

5，图像标签

在HTML标签中，<img>标签用于定义HTML页面中的图像。

<img str="图像URL">

src是<img>标签的必须属性，用于指定图像文件的路径和文件名
图像标签的其他属性：

属性	属性值以及说明
str	图片路径/必须属性
alt	文本/为图片不能显示时的文字
title	文本/提示文本，当鼠标放于图像上显示的文字
width	设置图像的宽度
height	设置图像的高度
border	设置图像的边框粗细

6，承接5-相对/绝对路径

相对路径：以引用文件所在位置为参考基础(图片在HTML页面的位置）

相对路径分类	符号及说明
同一级路径	无符号 / 图像文件位于HTML文件同一级例：`<img str="one.png "/>`
下一级路径	‘/’ / 图像文件位于HTML文件下一级例：`<img str="images/one.png"/>`
上一级路径	‘…/’ / 图像文件位于HTML文件上一级例：`<img str="../one.png"/>`

绝对路径：是指目录下的绝对位置，相对于电脑文件所在的位置
例：
完整的网络地址：https://editor.csdn.net/md?articleId=115822722
文件在电脑上的位置：C:\Users\Administrator\Desktop\数电
以上都称为绝对路径

7，链接标签

在HTML标签中，<a>标签用于定义超链接——从一个页面链接到另一个页面。其中a为anchor的缩写，意为“锚”。
语法格式:

<a herf="跳转目标" target="目标窗口弹出方式">文本或图像</a>

属性:

属性	作用
href（必须属性）	用于指定链接目标的URL地址，具有超链接的功能
target	用于指定链接页面的打开方式，其中_self为默认值（表示在当前窗口打开链接页面）,_ blank(表示在新窗口打开所链接页面）

链接分类:

外部链接：在网络上的链接。
内部链接：网站内部页面之间的相互链接。
空链接：无确认目标链接时所用空链接<a herf="#"></a>。
锚点链接：快速定位到页面某个位置的链接

8，表格标签

在HTML中，表格主要用于显示、展示数据，使用<table></table>标签来定义

基本语法:

<table border="1">
	<tr>
  		<td>100</td>
  		<td>200</td>
  		<td>300</td>
	</tr>
</table>

<table></table>用于定义表格标签。
<tr></tr>用于定义表格中的行（必须嵌套在<table></table>标签之中。
<td></td>用于定义表格中的单元格（必须嵌套于<tr></tr>标签之中。td 指表格数据（table data），即数据单元格的内容。数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等。

表头标签:

<table border="1">
	<tr>
		<th>Heading</th>
		<th>Another Heading</th>
	</tr>
	<tr>
		<td>row 1, cell 1</td>
		<td>row 1, cell 2</td>
	</tr>
table>

<th></th>(table head的缩写）表示表格的表头部分，一般位于表格的第一列或第一行，表头单元格中的文字内容加粗居中显示(突出其重要性）。

表格属性:
作为了解，一般在CSS样式中来设置表格的属性。

属性名	属性值与描述
align	left、right、center / 规定表格相对周围元素的对齐方式。
border	1或"" / 规定表格单元格是否拥有边框，默认为"",表示没有边框
cellpadding	像素值 / 规定单元边沿与其内容之间的空白，默认为1像素
cellspacing	像素值 / 规定单元格之间的空白默认为2像素
width	像素值或百分比 / 规定表格的宽度

表格结构标签:

为更好表示表格的语义，将表格分割为表格头和表格主体两大部分。
<thead>标签表示表格的头部区域；<tfoot>标签用于对表格的表注（页脚）进行分组；<tbody>标签表示表格的主体区域，来更好的划分表格结构。

<table border="1">
  <thead>
    <tr>
      <th>Month</th>
      <th>Savings</th>
    </tr>
  </thead>

  <tfoot>
    <tr>
      <td>Sum</td>
      <td>$180</td>
    </tr>
  </tfoot>

  <tbody>
    <tr>
      <td>January</td>
      <td>$100</td>
    </tr>
    <tr>
      <td>February</td>
      <td>$80</td>
    </tr>
  </tbody>
</table>

说明：如果使用 thead、tfoot 以及 tbody 元素，就必须使用全部的元素。它们的出现次序是：thead、tfoot、tbody，这样浏览器就可以在收到所有数据前呈现页脚了。且必须在 table 元素内部使用这些标签。

9，列表标签

表格用于显示数据，而列表整齐、整洁、有序的特点就有利于布局。

无序列表:

<ul>标签表示HTML中的无序列表，使用粗体圆点进行标记（实际开发，使用css来设置）。
<li>标签用来定义列表项。

基本语法：

<ul>
	<li>Coffee</li>
	<li>Milk</li>
	<li>tea</li>
</ul>

说明：

无序列表的各个列表项没有顺序级别之分，为并列关系。
<ul></ul>中只能嵌套<li></li>标签，不能在其中输入其他标签或者文字。
列表项内部可以使用段落、换行符、图片、链接以及其他列表等等

有序列表:
<ol>标签用于定义有序列表，列表项目使用数字进行标记。
<li>标签用来定义列表项。

基本语法：

<ol>
	<li>Coffee</li>
	<li>Milk</li>
	<li>tea</li>
</ol>

说明：

<ol></ol>中只能嵌套<li></li>标签，不能在其中输入其他标签或者文字。
列表项内部可以使用段落、换行符、图片、链接以及其他列表等等。

自定义列表:
自定义常用于对术语或名词进行解释和描述，定义列表的列表前没有任何项目符号。
<dl>标签用于定义自定义列表（描述列表）
每个自定义列表项以 <dt>开始
每个自定义列表项的定义以 <dd> 开始

基本语法：

<dl>
	<dt>名词</dt>
 	<dd>名词解释1</dd>
	<dd>名词解释2</dd>
</dl>在这里插入代码片

说明：

<dl></dl>标签之中只能包含<dt><dd>标签。
定义列表的列表项内部可以使用段落、换行符、图片、链接以及其他列表等等。

10，表单标签

10.1 表单的组成

在HTML中，一个完整的表单通常由表单域、表单控件（表单元素）和 提示信息组成。

10.2 表单域

表单域是一个包含表单元素的区域，会将其范围内的表单元素信息提交给服务器。
在HTML中，<form>标签用于定义表单域，用于用户信息的收集和传递。

基本语法：

<form action="URL地址" method="提交方式" name="表单域名称">

常用属性：

属性	属性值以及作用
action	URL地址 / 用于指定接收并处理表单数据的服务器程序的URL地址
method	get/post / 规定在提交表单时所用的 HTTP 方法。如果表单提交是被动的（比如搜索引擎查询），并且没有敏感信息就使用get；如果表单正在更新数据，或者包含敏感信息（例如密码），就使用post。
name	名称 / 用于指定表单的名称，以区分同一个页面中多个表单域

10.3 表单控件

input输入表单元素:

<input>元素是最重要的表单元素，且为单标签。
type为其属性之一，根据不同的属性值，来指定不同的控件类型。

type 常用属性值:

属性值	描述
text	定义常规文本输入（默认宽度为20个字符）
radio	定义单选按钮输入（选择多个选择之一）
submit	定义提交按钮（提交表单）
button	定义可点击按钮（多数情况下，用于通过JS的启动脚本
pssword	定义密码字段，该字段中的字符bei掩码
checkbox	定义复选框

<input>其他属性:

属性	属性值及描述
name	由用户自定义 / 定义`<input>`元素的名称（用于区分不同的`<input>`元素）
value	由用户自定义 / 规定`<input>`元素的值
checked	checked / 规定`<input>`元素首次加载时应当被选中

select下拉表单元素:
在HTML中，用<select>标签控件定义下拉标签(运用于表单中需要选择的地方）。

基本语法：

<select name="cars">
	<option value="volvo">Volvo</option>
	<option value="saab">Saab</option>
	<option value="fiat">Fiat</option>
	<option value="audi">Audi</option>
</select>

说明：

<select>中至少包含一对<option>。
当在<option>中定义selecte = "selected"时表示该选项为默认选项。

textarea文本域元素:

在HTML元素中，<textarea>标签于定义多行文本输入控件（常用于留言板，与评论）

基本语法：

<textarea name="message" rows="10" cols="30">
	The cat was playing in the garden.
</textarea>

四，HTML总结与认识（个人观点）

HTML运用各种类型的标签来实现网页的布局，将网页的结构构建好，之后交给CSS与JS来进行装饰和交互的效果，来实现分别运行的效果，一般HTML的样式在实际开发中交给CSS来进行。

HTML其他标签
<br> 强制换行标签
<hr> 换行标签
<pre> 预留格式标签标签

黑球啊

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
HTML标签与认识浏览器

一，认识浏览器浏览器是用来检索，展示以及传递Web信息资源的应用程序。二，网页网站：指在因特网上根据一定的规则，使用HTML等制作的用于展示特定内容相关的网页集合。即网页是构成网站的基本元素。网页：指通过浏览器来阅读，通常由图片、链接、文字、音频、视频等元素组成，常为HTML格式的文件。三，HTML标签...
复制链接

扫一扫