HTML标签与认识浏览器

  • 一，认识浏览器
  • 二，网页
  • 三，HTML
  • 1，HTML简介
  • 2，HTML标签
  • 2.1 基本语法
  • 2.2 HTML标签关系
  • 2.3 HTML基本结构标签
  • 2.4 HTML基本标签
  • 1，标题标签
  • 2.段落标签
  • 3.文本格式化标签
  • 4，盒子标签
  • 5，图像标签
  • 6，承接5-相对/绝对路径
  • 7，链接标签
  • 8， 表格标签
  • 9，列表标签
  • 10，表单标签
  • 四，HTML总结与认识（个人观点）


一，认识浏览器

浏览器： 用来检索，展示以及传递Web信息资源的应用程序是网页显示、运行是平台。

常用的浏览器有IE、火狐（Firefox）、谷歌（chrome）、Safari和Opera等。

jquery判断当前浏览器语言 html判断浏览器_jquery判断当前浏览器语言


浏览器内核：负责读取网页内容，整理讯息，计算网页的显示方式并显示页面。

浏览器

内核

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标签关系
  1. 包含关系(父子关系）
<head>
	<title></title>
<head>
  1. 并列关系
<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>

输出为：

jquery判断当前浏览器语言 html判断浏览器_基本语法_02

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

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

特点如下：

  • 文本会根据网页页面大小自动换行。
  • 段落与段落之间保有空隙。
3.文本格式化标签

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

语义

标签

加粗

<strong></strong>

倾斜

<em></em>

删除线

<del></del>

下划线

<ins></ins>

4，盒子标签

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

两者区别：

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

绝对路径：是指目录下的绝对位置，相对于电脑文件所在的位置
例：
完整的网络地址：
文件在电脑上的位置：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>

说明：

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

自定义列表:
自定义常用于对术语或名词进行解释和描述，定义列表的列表前没有任何项目符号。
<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> 预留格式标签标签