首页 前端知识 前端(一)—— HTML

前端(一)—— HTML

2024-02-27 11:02:20 前端知识 前端哥 96 978 我要收藏

1. Web服务本质

浏览器发请求 → HTTP协议 → 服务端接收请求 → 服务端返回响应 → 服务端把HTML文件内容发给浏览器 → 浏览器渲染页面

2. 关于HTML

2.1 HTML是什么

  • 超文本标记语言(Hypertext Markup Language,HTML)是一种用于创建网页的标记语言
  • 本质上是浏览器可识别的规则,我们按照规则写网页,浏览器根据规则渲染我们的网页。对于不同的浏览器,对同一个标签可能会有不同的解释(兼容性问题)
  • 网页文件的扩展名:.html或.htm

2.2 HTML不是什么

  • HTML是一种标记语言(markup language),它不是一种编程语言
  • HTML使用标签来描述网页。不像Python编程语言一样,这个标记语言是没有逻辑的

3. HTML介绍

3.1 HTML文档结构

<!DOCTYPE html>
<html lang="zh-CN">

<head> 
  <meta charset="UTF-8">
  <title> </title>
</head>

<body> 
</body>

</html>

 标注:
① <!DOCTYPE html>:声明为HTML5文档;
② lang='zh-CN':表示整个文档的内容以中文为主,如果以英文为主则写成lang='en';
③ <html></html>:表示文档的开始标记和结束的标记。是HTML页面的根元素,在它们之间是文档的头部(head)和主体(body);
④ <head></head>:定义了HTML文档的开头部分,它们之间的内容不会在浏览器的文档窗口显示,包含了文档的元数据(meta),配置信息等;
⑤ <title></title>:定义了网页标题,在浏览器标题栏显示(标签页);
⑥ <body></body>:这里面的文本是可见的网页主体内容

注意:
① 标签要封闭,全封闭/自封闭;
② HTML文件不识别多个空格或换行,均识别成一个空格,此时需借助特殊字符

注意:对于中文网页需要使用 <meta charset="UTF-8"> 声明编码,否则会出现乱码。有些浏览器会设置 GBK 为默认编码,则你需要设置为 <meta charset="GBK">

3.2 HTML的注释

找到一行内容 ,按住键盘“ctrl 加 / ” 就能注释,注释的内容不会在网页上显示出来

3.3 HTML标签格式

3.3.1 标签说明

  • HTML标签是由尖括号包围的关键字,如<html>、<div>等
  • HTML标签通常是成对出现的,比如:<div>和</div>,第一个标签是开始,第二个标签是结束。结束标签会有斜线
  • 也有一部分标签是单独呈现的,比如:<br/>、<hr/>、<img src="1.jpg" />等
  • 标签里面可以有若干属性,也可以不带属性

3.3.2 标签语法

  • <标签名 属性1=“属性值1”  属性2=“属性值2”……>内容部分</标签名> 
  • <标签名 属性1=“属性值1”  属性2=“属性值2”…… />

有些属性是没有特殊的效果的,而有些属性是有效果的,如下:

  • <p><a s='name'><h3>这是名字</h3></a></p>,其中s='name'是没什么效果的,不可点击
  • <p><a href="https://Baidu.com"><h3>这是链接</h3></a></p>,你会看到一些效果,可以点击,有下划线,有颜色

3.3.3 重要属性

① id:定义标签的唯一ID,HTML文档树中唯一,将来页面上的标签有很多,例如:来几个a标签,然后怎么区分这些标签呢,可以通过<a id='a1'>这是id为a1的标签</a>,id不能重复,将来我们想找这个标签的时候,可以通过这个id的值来找到这个标签 
② class:为HTML元素定义一个或多个类名(classname)(CSS样式类名) 
③ style:规定元素的行内样式(CSS样式) 简单来个示例:<h3 style="color:red;">它会变红</h3>你会发现变成红色了,如下图:

4. HTML常用标签

4.1 head内常用标签

标签意义
<title></title>定义网页标题
<style></style>定义内部样式表
<script></script>定义JS代码或引入外部JS文件
<link/>引入外部样式表文件
<meta/>定义网页原信息

4.2 Meta标签

  • <meta>元素可提供有关页面的元信息(meta-information),针对搜索引擎和更新频度的描述和关键词
  • <meta>标签位于文档的头部,不包含任何内容
  • <meta>提供的信息是用户不可见的

meta标签的组成:meta标签共有两个属性,它们分别是 http-equiv 属性和 name 属性,不同的属性又有不同的参数值,这些不同的参数值就实现了不同的网页功能

4.2.1 http-equiv属性

相当于http的文件头作用,它可以向浏览器传回一些有用的信息,以帮助正确地显示网页内容,与之对应的属性值为content,content中的内容其实就是各个参数的变量值

<!-- 2秒后跳转到对应的网址,注意引号 -->
# 如果把URL和后面的内容去掉,就是2秒钟刷新一次
<meta http-equiv="refresh" content="2;URL=https://www.baidu.com"> 

<!-- 指定文档的编码类型 --> 
<meta http-equiv="content-Type" charset=UTF8">

<!-- 告诉IE以最高级模式渲染文档 -->
# 告诉IE浏览器,按照最高标准来渲染此页面
<meta http-equiv="x-ua-compatible" content="IE=edge"> 

4.2.2 name属性

主要用于描述网页,与之对应的属性值为content,content中的内容主要是便于搜索引擎机器人查找信息和分类信息用的

# 关键字,别人可以通过这些关键字搜索到我的这个文章的
# 搜索引擎能够通过content内容来帮别人搜索到此文档
<meta name="keywords" content="meta总结, html meta, meta属性, meta跳转"> 

# 是对这个文档的描述
<meta name="description" content="这里是文档的一些描述内容">  

PS:「浏览器内核」也就是浏览器所采用的「渲染引擎」,渲染引擎决定了浏览器如何显示网页的内容以及页面的格式信息。渲染引擎是兼容性问题出现的根本原因

常见的浏览器及内核如下:

浏览器内核
IEtrident
Chromeblink
火狐gecko
Safarwebkit

4.3 bod内常用标签

4.3.1 基本标签(块级标签和内联标签)

# 不加标签的纯文字也是可以在body中写的
<b>加粗</b>
<i>斜体</i>
<u>下划线</u>
<s>删除线</s>

# 独占一个段落
<p>段落标签</p> 

# 一级标题至六级标题
<h1>标题1</h1>
<h2>标题2</h2>
<h3>标题3</h3>
<h4>标题4</h4>
<h5>标题5</h5>
<h6>标题6</h6>

# 换行
<br>

# 就是单独个一个水平线
<hr> 

特殊字符(还有好多其他的,可以直接百度搜HTML特殊符号对照表)

内容对应代码
空格&nbsp;
>&gt;
<&lt;
&&amp;
¥&yen;
版权标识(写公司网站的时候会用到)&copy;
注册商标(一个圆圈里面有个R)&reg;

特别注意:HTML中默认是不显示空格的,也就是说通过空格键加了空格也没有多个空格的效果,加多少个都是显示一个空格效果,需要这些特殊字符才能显示出空格效果

4.3.2 div标签和span标签(常用)

  • div标签:用来定义一个块级元素,并无实际的意义。主要通过CSS样式为其赋予不同的表现
  • span标签:用来定义内联(行内)元素,并无实际的意义。主要通过CSS样式为其赋予不同的表现

块级元素与行内元素的区别:

  • 块级元素(块级标签/行外标签),是以另起一行开始渲染的元素
  • 行内元素(内联标签)则不需另起一行。如果单独在网页中插入这两个元素,不会对页面产生任何的影响。这两个元素是专门为定义CSS样式而生的

刚学的标签:

  • 块级标签:p、h1 - h6、hr、div
  • 内联标签:b、i、u、s

注意:
① 关于标签嵌套:通常块级元素可以包含内联元素或某些块级元素,但内联元素不能包含块级元素,它只能包含其它内联元素。div是可以包含div的
② p标签比较特殊,不能包含块级标签,p标签也不能包含p标签。可以试一下p标签套p标签,f12你会发现三个p标签

4.3.3 img标签(内联标签)

<img src="图片的路径" alt="图片未加载成功时的提示" 
title="鼠标悬浮时提示信息" width="宽" height="高">

注意:
① src的路径分为两种:网上的一个图片路径和本地的一个相对图片路径
② alt后的提示内容,在图片未显示前会提示,图片显示出来后则不提示
③ title后的提示内容,当鼠标悬浮在图片上,会显示提示
④ 宽高两个属性只用一个会自动等比缩放

4.3.4 a标签(内联标签)

超链接标签:是指从一个网页指向一个目标的连接关系,这个目标可以是另一个网页,也可以是相同网页上的不同位置,还可以是一个图片,一个电子邮件地址,一个文件,甚至是一个应用程序

<a href="http://www.baidu.com" target="_blank" >点我就可以跳转到百度啦</a>

 target:

  • _blank:表示在新标签页中打开目标网页
  • _self:表示在当前标签页中打开目标网页(默认效果)

注意:
① 没有写href属性,只显示普通文本

② 写了href属性但没有值,有特殊效果(文字有颜色、有下划线),点击会刷新当前页面

拓展:

① 什么是URL

  • URL是统一资源定位器(Uniform Resource Locator)的缩写,也被称为网页地址,是因特网上标准的资源的地址

② URL举例

  • http://www.sohu.com/stu/intro.html
  • http://222.172.123.33/stu/intro.html

③ URL地址由4部分组成,各部分之间用“/”符号隔开

  • 第1部分:为协议,http://、ftp://等 
  • 第2部分:为站点地址,可以是域名或IP地址
  • 第3部分:为页面在站点中的目录,stu
  • 第4部分:为页面名称,例如 index.html

href属性指定目标网页地址,该地址可以有几种类型:
① 绝对URL - 指向另一个站点(比如 href="http://www.baidu.com)
② 相对URL - 指当前站点中确切的路径(href="index.htm"),学django的时候会用的比较多
③ 锚URL - 指向页面中的锚(href="#top"),博客的目录经常用到,还可以跳转到 name属性为p1的a标签上,<a name='top'>xxx</a>

例1:如下代码体现了URL跳转的作用

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<a href="#p1" >点我就可以跳转到id为p1的p标签啦</a>

<div style="height:1000px"></div>
<p id="p1">哈哈,我就是id为p1的p标签</p>
<div style="height:1000px"></div>
</body>
</html>

我们一运行,会出现以下界面,当我们再次点击这个超链接时

就会直接跳转到目标的URL,如下图

例2:如下代码体现了锚点跳转的作用

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .c1{height: 1000px;width: 200px;background-color: black;}
    </style>
</head>
<body>
<!-- 设置锚点 -->
<a name="top">这是顶部</a>
<div class="c1"></div>
<!-- 跳转锚点,写的是a标签name属性对应的值,写法 href='#值' -->
<a href="#top">回到顶部</a>
</body>
</html>

注:在设置锚点时,可写name=''值'',或者写成id=''值''都可以

4.3.5 列表标签

4.3.5.1 无序列表
<ul type="disc">
  <li>第一项</li>
  <li>第二项</li>
</ul>

type属性:

(1)disc(实心圆点,默认值)

(2)circle(空心圆圈)

(3)square(实心方块)

(4)none(无样式)

4.3.5.2 有序列表
<ol type="1" start="1">
  <li>第一项</li>
  <li>第二项</li>
</ol>

type属性:

(1)1 数字列表,start是从数字几开始(默认值)

(2)A 大写字母

(3)a 小写字母

(4)Ⅰ 大写罗马

(5)ⅰ 小写罗马

  

4.3.5.3 标题列表

就像大纲一样,有一个层级效果,代码及效果如下

<dl>
  <dt>标题1</dt>
  <dd>内容1</dd>
  <dt>标题2</dt>
  <dd>内容1</dd>
  <dd>内容2</dd>
</dl>

4.3.6 表格标签

表格是一个二维数据空间,一个表格由若干行组成,一个行又有若干单元格组成,单元格里可以包含文字、列表、图案、表单、数字符号、预置文本和其它的表格等内容。表格最重要的目的是显示表格类数据。表格类数据是指最适合组织为表格格式(即按行和列组织)的数据

表格的基本结构:

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<table border='1'>
  <thead>
  <tr>
    <th>序号</th>
    <th>姓名</th>
    <th>特点</th>
  </tr>
  </thead>
  <tbody>
  <tr>
    <td>1</td>
    <td>雨落</td>
    <td>贼帅</td>
  </tr>
  <tr>
    <td>2</td>
    <td>庆言</td>
    <td>美女</td>
  </tr>
  </tbody>
</table>
</body>
</html>

其中:

  • <thead>:表示的是标题部分 </thead>
  • <tbody>:表示的是内容部分 </tbody>
  • <tr>:表示的是一行 </tr>
  • <th>:表示的是一个单元格,文字是加粗效果 <th>
  • <td>:表示的是一个单元格,文字是常规字体 <td>

注释-常用属性:

  • border:表格边框
  • cellpadding:内边距(内边框和内容的距离)
  • cellspacing:外边距(内外边框的距离)
  • width:像素 百分比(最好通过css来设置长宽)
  • rowspan:单元格竖跨多少行(即合并单元格)
  • colspan:单元格横跨多少列(即合并单元格)

上面这几个属性基本上用不到,其实标签又可以分为两类:
1、展示给用户看的
2、获取用户输入内容的标签
刚才前面的这些标签都是展示内容用的,下面要学的标签是捕获用户输入的标签。基本上HTML中常用的就这些标签

4.3.7 input标签

<input> 元素会根据不同的 type 属性,变化为多种形态

type属性值表现形式对应代码
text单行输入文本<input type="text" />
password密码输入框(不显示明文)<input type="password"  />
date日期输入框<input type="date" />
checkbox复选框<input type="checkbox" checked="checked" name='x' />
radio单选框<input type="radio" name='x' />
submit提交按钮<input type="submit" value="提交" />
reset重置按钮<input type="reset" value="重置"  />
button普通按钮<input type="button" value="普通按钮"  />
hidden隐藏输入框<input type="hidden"  />
file文本选择框<input type="file"  />

属性说明:
① name:表单提交时的“键”,注意和id的区别
② value:表单提交时对应项的值

  • type="button", "reset", "submit"时,为按钮上显示的文本内容
  • type="text","password","hidden"时,为输入框的初始值
  • type="checkbox", "radio", "file",为输入相关联的值

③ checked:radio和checkbox默认被选中的项
④ readonly:text和password设置只读
⑤ disabled:将当前标签作废,对于所有input均适用

1、输入框与单多选

2、日期输入框

3、提交与重置按钮

  • submit:发送浏览器上输入标签中的内容,配合form表单使用,页面会刷新
  • reset:页面不会刷新,将所有输入的内容清空

4、文本选择框

5、设置为只读

4.3.8 form标签

功能:

① 表单用于向服务器传输数据,从而实现用户与Web服务器的交互
② 表单能够包含input系列标签,比如文本字段、复选框、单选框、提交按钮等等
③ 表单还可以包含textarea、select、fieldset和 label标签

表单元素

基本概念:HTML表单是HTML元素中较为复杂的部分,表单往往和脚本、动态页面、数据处理等功能相结合,因此它是制作动态网站很重要的内容。表单一般用来收集用户的输入信息

表单工作原理:访问者在浏览有表单的网页时,可填写必需的信息,然后按某个按钮提交。这些信息通过Internet传送到服务器上,服务器上专门的程序对这些数据进行处理,如果有错误会返回错误信息,并要求纠正错误。当数据完整无误后,服务器反馈一个输入完成的信息

表单属性

属性描述
accept-charset规定在被提交表单中使用的字符集(默认:页面字符集)
action规定向何处提交表单的地址(URL)(提交页面)
autocomplete规定浏览器应该自动完成表单(默认:开启)
enctype规定被提交数据的编码(默认:url-encoded)
method规定在提交表单时所用的 HTTP 方法(默认:GET)
name规定识别表单的名称(对于 DOM 使用:document.forms.name)
novalidate规定浏览器不验证表单
target规定 action 属性中地址的目标(默认:_self)

注意:
① submit只有写在form表单里面才能进行提交,否则只是一个普通的按钮
② method的默认提交方法是get,效果是可以在网址上看到提交的内容

除了form表单内的submit可以进行提交,button按钮也可以实现

4.3.9 select标签

属性说明:

  • multiple:布尔属性,设置后为多选下拉框(按住Ctrl可多选),否则默认单选
  • disabled:禁用
  • selected:默认选中该项
  • value:定义提交时的选项值

4.3.10 label标签

定义:<label> 标签为 input 元素定义标注(标记)。如果不用这个label给input标签一个标记,input会变黄,不影响使用,只是提示你,别忘了给用户一些提示,也就是这个label标签

注意:
1、label 元素不会向用户呈现任何特殊效果。但是点击label标签里面的文本,那么和他关联的input标签就获得了光标,让你输入内容
2、<label> 标签的 for 属性值应当与相关元素的 id 属性值相同

除此之外,以下这两种写法实际效果是一样的

4.3.11 textarea标签

主要作用就是多行文本输入框,像input标签只能在一行输入,但是利用textarea标签就可以进行多行输入了,通过改变行数和列数来控制文本框的大小

属性说明:

  • name:名称
  • rows:行数(相当于文本框高度设置)
  • cols:列数(相当于文本框长度设置)
  • disabled:禁用
  • maxlength:显示字符数,例如:maxlength='10'  最多输入十个字符
转载请注明出处或者链接地址:https://www.qianduange.cn//article/2799.html
标签
评论
发布的文章

前端大屏适配几种方案

2024-01-29 13:01:44

JQ效果—展开和收起

2024-03-13 00:03:45

JQuery事件的基本使用

2024-03-13 00:03:39

「jQuery系列」jQuery 事件

2024-03-13 00:03:36

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!