HTML学习

今天学习了！！

已于 2022-10-18 17:40:31 修改

阅读量1.1k

点赞数

分类专栏：学习日记文章标签： html 学习 javascript 网络安全

于 2022-10-18 00:35:20 首次发布

本文链接：https://blog.csdn.net/weixin_52840305/article/details/127352763

版权

学习日记专栏收录该内容

2 篇文章 0 订阅

订阅专栏

网安基础之html

一、web标准

           W3C组织（万维网联盟组织）：用来制定web标准的机构
           不是某一个标准，是W3C制定的一系列标准

1、web标准的三方面

结构标准（HTML）：用于对网页元素进行整理和分类
表现标准（CSS）：用于设置网页元素的样式，颜色、文字图像大小等外观样式
行为标准（JS）：用于定义网页的交互和行为

2、web前端分层
HTML：超文本标记语言；从语义的角度描述页面的结构，相当于人的身体组织结构
CSS：层叠样式表；美化页面，相当于穿衣打扮
JS（JavaScript）：从交互的角度描述页面的行为；相当于人的动作

二、浏览器

         1、渲染引擎（浏览器内核）：用来解析HTML、CSS
         2、JS引擎（JS解释器）：用来解析网页中的JavaScript代码，会逐步解释每一句源码，将js源码都转换为机器语言后在运行

三、VS Code快捷键

1.工作区快捷键

在这里插入图片描述

2.移动光标

在这里插入图片描述

3.编辑操作

在这里插入图片描述

4.编程语言相关

在这里插入图片描述

5.搜索相关

在这里插入图片描述

自定义快捷键：按住快捷键ctrl+shift+P，弹出命令板，在命令面板中输入“快捷键”，就可以进入快捷键的设置了。

四、HTML

1.概念

HTML：不是一种编程语言，是一种描述型的标记语言；HTML格式的文件是一个纯文本文件，用一些标签来描述语义，这些标签在浏览器页面上是无法直观看到的，所以称为“超文本标记语言”。
1>标记标签

       <a> :表示超链接
       <img> :表示图片
       <h1> :表示一级标签

2>编程语言是有编译过程的，而标记语言没有. HTML标签是由浏览器解析执行的

2.HTML的专有名词

网页：由各种标记组成的一个页面
主页（首页）：一个网站的起始页面或者导航页面。index
标记：尖括号p称为开始标记，尖括号/p称为结束标记，也叫标签

        <p>   </p>

元素：尖括号p 内容尖括号/p 称为元素

         <p>内容</p>

属性：给每一个标签所做的辅助信息
DHTML:dynamic，动态的。javascript+css+html合起来的页面就是一个DHTML
HTTP：超文本传输协议。用来规定客户端浏览器和服务端交互式数据的一个格式。
SMTP：邮件传输协议
FTP：文件传输协议

3.书写一个HTML页面

VS code执行代码需要放在一个文件夹中才可以运行
先创建文件，在文件里，输入html：5，就可以自动生成以下内容了

 <!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>Document</title>
</head>
<body>
    
</body>
</html>

头标签内部的常见标签：

      <title>:指定整个网页的标题，在浏览器最上方显示
      <base>:为页面上的所有链接规定默认地址
      <meta>:提供有关页面的基本信息
      <body>:用于定义HTML文档所需要显示的内容，也称主题标签。我们写的代码必须放在此标签内
      <link>:定义文档与外部资源的关系

1.meta 标签：

meta表示“元”。“元配置，就是表示基本的配置项目。

常见的几种meta 标签如下：
（1）字符集 charset:

<meta http-equiv="Content-Type"content="text/html;charset=UTF-8">

字符集用meta标签中的charset 定义，charset就是character set(即”字符集")，即网页的编码方式

上面这行代码非常关键，是必须要写的代码，否则可能导致乱码。如果保存的时候，meta写的和声明的不匹配，那么浏览器就是乱码。
utf-8是目前最常用的字符集编码方式

（2）视口 viewport:

‹meta name="viewport" content-"width=device-width, initial-scale=1.0">

width=device-width：表示视口宽度等于屏慕宽度

（3）定义"关键词”:

＜meta name="keywor ds" content="网易，邮箱，游戏，新闻，体育，娱乐”/>

这些关键词，就是告诉搜索引1擎，这个网页是干嘛的，能够提高搜索命中率。

（4)定义"页面描述”：

只要设置Description页面描述，那么百度搜索结果，就能够显示这些语句，这个技术叫做SEO (search engine optimization，搜索引擎优化）

‹meta name="Description" content="今天真是个美好的一天。"/>

(5) 自动跳转

‹meta http-equiv ="refresh" content="3；https://www.baidu.com"/>

这个标签表示：三秒后，自动跳转到百度页面。

2.body 标签：

body标签的属性有：

bgcolor:设置整个网页的背景颜色
background：设置整个网页的背景图片
text：设置网页中的文本颜色
leftmargin：网页的左边距。IE浏览器默认是8个像素
topmargin：网页的上边距
rightmargin：网页的右边距
bottommargin：网页的下边距

3.a标签：（超链接）

①、外部链接：链接到外部文件

<a href="login.html ">点击进入另一个界面</a>

a标签是一个文本级标签
也可以通过a标签直接访问一个网址。

<a href="https://www.baidu.com " target=" _blank">点击进入</a>

②、邮件链接：

 <a href="mailto:xxx@qq.com">点击进入我的邮箱</a>

超链接的属性：

href:目标URL
title:悬停文本
name:主要用于设置一个锚点的名称
target:告诉浏览器用什么方式来打开目标页面。
target的属性:
_self:在同一页面中显示（默认）
_blank:在新的窗口打开
_parent:再父窗口打开
_top:在顶级窗口打开

title属性举例：

  <a href="01.jpg" title="好漂亮！"></a>     title就是鼠标悬停文本

a是一个文本级标签
a的语义要小于p，所以把a当作文本来处理，那么p里面相当于放的是纯文本

   <p>
   <a href="https://www.baidu.com" >
       百度一下
   </a>
   </p>

4.img标签：图片标签

1.src属性：指图片的路径；在写路径时有两种写法：相对路径和绝对路径

1.相对路径

<!-- 当前目录中的图片 -->
<img src="1.jpg">
<img src=".\1.jpg">

<!-- 上一级目录中的图片 -->
<img src="..\2.jpg">
！！！相对路径中，../要么不写，要是写一定写在开头。

2.绝对路径：图片的直接路径
举例：

<img src =" https://tse1-mm.cn.bing.net/th/id/OIP-C.sbs6WvFk2Ys91XK_cDD2YwHaHa?pid=ImgDet&rs=1 ">

2.alt属性

alt：当图片不可用或无法显示时，代替图片显示的内容。
一般情况下是为了让用户了解这个图片大概是什么内容。

3.title属性

title：提示性文本。鼠标悬停时出现的文本

5.列表标签：

1.无序列表：

无序列表ul，无序列表中的每一项必须是li

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

运行结果：
在这里插入图片描述
注意：

li不能单独存在，必须包裹在ul里面
ul的作用不是给文字前面加小圆点的，而是增加表示无序列表语义的内容

2.有序列表：

有序列表ol，里面的每一项也是li

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

运行结果：
在这里插入图片描述
属性：

type=“属性”。属性值可以是1（默认威阿拉伯数字）、a、A、i、I。结合start法表示从几开始。

<ol type="1">
   <li>哈哈</li>
   <li>哈哈</li>
   <li>哈哈</li>
</ol>
<ol type="A" start="2">
   <li>哈哈</li>
   <li>哈哈</li>
   <li>哈哈</li>
</ol>
<ol type="i" start="7">
   <li>哈哈</li>
   <li>哈哈</li>
   <li>哈哈</li>
</ol>

运行结果：
在这里插入图片描述

3.定义列表：

dl：definition list ，没有属性。dl的子元素只能是dt和dd

dt：definition title 列表的标题，这个标签是必须存在的
dd：definition description 列表的列表项，不是必须的，没有可以不加
注：dd和dt只能在dl里面，dl里面只能是dd和dt
dd是描述dt的，一个dt可以有很多个dd

<dl>
   <dt>前端</dt>
   <dd>html</dd>
   <dd>css</dd>
   <dd>javascript</dd>
   <dt>网络安全</dt>
   <dd>TCP/IP </dd>
   <dd>XSS漏洞</dd>
   <dd>sql注入</dd>
</dl>

运行结果：
在这里插入图片描述

6.表格标签：

表格标签用table表示，一个表格是由每行tr组成的，每行是有每个单元格td组成的。所以一个表格是有行组成的（行是由列组成的），而不是行和列组成的

     <table border="2">
       <tr>
           <td>张三</td>
           <td>三年一班</td>
           <td>男</td>
           <td>班长</td>
       </tr>
       <tr>
           <td>李四</td>
           <td>三年一班</td>
           <td>女</td>
           <td>团支书</td>
       </tr>
     </table>

运行结果：
在这里插入图片描述
table的属性：

border：边框。像素为单位。
style=“border -co11apse:co11apse;”：单元格的线和表格的边框线合并（表格的两边框合并为一条）
width：宽度。像素为单位.
height：高度。像素为单位。
bordercolor ：表格的边框颜色。
align ：表格的水平对齐方式。属性值可以填：left right center。注意：这里不是设置表格里内容的对齐方式，如果想设置内容的对齐方式，要对单元格标签td进行设置）
cellpadding ：单元格内容到边的距离，像素为单位。默认情况下，文字是紧挨着左边那条线的，即默认情况下的值为0。注意不是单元格内容到四条边的距离哈，而是到一条边的距离，默认是与左边那条线的距离。如果设置厲性dir=“rtl”，那就指的是内容到右边那条线的距高。
cellspacing ：单元格和单元格之间的距离（外边距），像素为单位。默认情况下的值为0
bgcolor="#99cc66"：表格的背景颜色
background=“路径src/…”：背景图片。背景图片的优先级大于背景颜色。
bordercolorlight ：表格的上、左边框，以及单元格的右、下边框的颜色
bordercolordark：表格的右、下边框，以及单元格的上、左的边框的颜色这两个属性的目的是为了设蛋30 的效果。
dir：公有属性，单元格内容的排列方式(direction)。可以取值：ltr：从左到右（ left to right，默认）
rtl：从右到左(right to left)既然说 dir 是共有属性，如果把这个属性放在任意标签中，那表明这个标签的位置可能会从右开始排列。

7.表单标签：

表单标签用form表示，用于与服务器的交互。表单就是收集用户信息的，就是让用户填写和选择的。

属性：

name:表单的名称，用于JS来操作或控制表单时使用
id：表单的唯一标识，方便对表单进行操作
action：指定表单数据的处理方式，也就是表单将要提交到哪里，一般是PHP 如：action=“login.php”
method：表单数据的提交方式，用什么HTTP方法提交，一般取值：get（默认）和post

注意：表单和表格嵌套时，是在form标记中套table标记

GET提交和POST提交的区别：
get方式：将表单数据，以"name=value"形式追加到action指定的处理程序的后面，两者间用"？"隔开，每一个表
单的“name=value’“间用”&"号隔开。特点：只适合提交少量信息，并旦不太安全(不要提交敏感数据)、提交的数据
类型只限于ASCII字符.
post方式：将表单数据直接发送(隐藏)到action指定的处理程序。POST发送的数据不可见（在body标签中）
Action指定的处理程序可以获取到表单数据。特点：可以提交海量信息，相对来说安全一些，提交的数据格式是
多样的(Word. Excel. rar、img)。

1.input输入标签（文本框）：用于接收用户输入

<input type="text"  />

属性：

type=“属性值”：文本类型属性值可以是：
text（默认）
password：密码类型
hidden：隐藏框，在表单中包含不希望用户看见的信息
button：普通按钮，结合js代码使用
image：图片按钮，和提交按钮功能是一样的，只是图片按钮可以显示图片
file：文本选择框。注意：如果要限制上传文件的类型，需要配合JS来实现验证。对上传文件的安全检查：一是扩展名的检查，二是文件数据内容的检查
submit：提交按钮，传送当前表单的数据给服务器或其他程序处理。这个按钮不需要写value自动就会有’提交"文字。这个按钮真的有提交功能。点击按钮后，这个表单就会被提交到form标签的action属性中指定的那个页面中去。
reset：重置按钮，清空当前表单的内容，并设置为最初的默认值

        <form>
           姓名：<input value="哈哈"><br>
           昵称：<input value="++" readonly=" "><br>
           名字：<input type="text" value="name" disabled=" "><br>
           密码：<input type="password" value="pwd" size="50"><br>
           性别：<input type="radio" name="gender" id="radio1" value="male" checked="">男
                 <input type="radio" name="gender" id="radio2" value="famale" >女<br>
           爱好：<input type="checkbox" name="love" value="eat">渗透
                 <input type="checkbox" name="love" value="sleep">开发
                 <input type="checkbox" name="love" value="bat">代码审计

        </form>

运行结果：
在这里插入图片描述

disabled：文本框只读，不能编辑，光标点不进去，属性值可以不写

多个单选框的input标签中，name的属性值可以相同，但***id的属性值必须是唯一的***

2.text area标签：

属性：

rows=“4”：指定文本区域的行数
cols=“20”：指定文本区域的列数
readonly：只读

        <form>
           <textarea name="txtinfo" rows="4" cols="20">1、今天会是美好的一天吗</textarea>
        </form>

运行结果：
在这里插入图片描述
像是一个可以自行控制大小的文本框，通常在微博、贴吧都会用到

3.label标签：

label标签用来解决在单选框选择时，只能点击单选框那个小圆圈才能去选择这个不方便的问题，而label标签就是可以让单选框和文字绑定起来，实现点击文字或者图片也能选中

        <form>
           <input type="radio" name="sex" id="nan"  /><label for="nan">男</label>
           <input type="radio" name="sex" id="nv"  /><label for="nv">女</label>
        </form>

运行结果：
在这里插入图片描述

在使用label标签时，让***label标签的for 属性值***和***input标签中id属性值***相同，那这个label标签和input就可以绑定在一块了！

8.水平线标签：

在这里插入图片描述

运行结果：
在这里插入图片描述

9.换行标签：

如果要把某段文本强制换行显示，就需要使用换行标签

this <br /> is a para <br /> graph with line breaks

运行结果：
在这里插入图片描述

10.字体标签：

特殊字符（转义字符）→即为HTML实体编码

这个实体编码是为了防止html代码和js代码之间产生的语义冲突导致的xss漏洞

&nbsp;:空格
&lt;:小于号
&gt;:大于号
&amp;:符号&
&quot;:双引号
&apos;:单引号
&copy;:版权©
&trade;:商标™
&yen;:人民币￥
&times;：乘号
&divide;:除号

4.HTML标签的等级

文本级标签：p、span、a、b、i、u、em。文本级标签只能放文字、图片、表单元素。（a标签里不能放a和input）
容器级标签：div、h系列、li、dt、dd。容器级标签里可以放置任何东西

总结

      学习好快乐！！！！！！！

今天学习了！！

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
1
评论
HTML学习

HTML知识点记录
复制链接

扫一扫

专栏目录

HTML学习

网安基础之html

文章目录

一、web标准

二、浏览器

三、VS Code快捷键

1.工作区快捷键

2.移动光标

3.编辑操作

4.编程语言相关

5.搜索相关

四、HTML

1.概念

2.HTML的专有名词

3.书写一个HTML页面

1.meta 标签：

2.body 标签：

3.a标签：（超链接）

①、外部链接：链接到外部文件

②、邮件链接：

4.img标签：图片标签

1.src属性：指图片的路径；在写路径时有两种写法：相对路径和绝对路径

2.alt属性

3.title属性

5.列表标签：

1.无序列表：

2.有序列表：

3.定义列表：

6.表格标签：

7.表单标签：

1.input输入标签（文本框）：用于接收用户输入

2.text area标签：

3.label标签：

8.水平线标签：

9.换行标签：

10.字体标签：

4.HTML标签的等级

总结