Web安全学习 Week1

这周主要学HTML 写个静态百度页面看懂DOM

写好文件想运行 option+b

<h1>这不是一个标题<h1>

<p>这不是一个段落<p>

1.网页

1.网页指在因特网上根据一定的规则，用HTML等制作的用于展示特定内容相关的网页集合

1.2 HTMl指的是超文本标记语言(Hyper Text Markup Language),它是用来描述网页的一种语言

<jpg==“logo.logoing.jpg”>

1.3网页组成

网页是由图片、链接、文字、声音、视频等元素组成，其实就是一个html文件后缀

2.常用浏览器

常用的浏览器IE、火狐（Firefox)、Chrome、Safari和Opera等

浏览器内核：浏览渲染

IE Trident IE、猎豹安全、360浏览器、百度浏览器

firefox Gecko 火狐浏览器内核

safari Webkit 苹果浏览器内核

Chrome Blink Chrome浏览器内核

3.Web标准

Web标准是由W3C组织和其他标准化组织制定的一系列标准的集合

3.1浏览器不同，它们显示页面或者排版就有些差异

遵循标准可以

3.2Web的标准主要包括结构、表现和行为三方面

1结构现阶段主要是HTML（骨骼）

2表现主要指的是CSS（皮囊）

3行为现阶段主要是Javascript（行为）

1.1基本语法概括

1.HTML标签是由尖括号包括的标签

1.2双标签可以分为两类：包含关系和并列关系

2.1第一个HTML网页

<html>

<head>

<title>这不是一个页面</title>

</head>

<body>

断剑重铸之日，骑士归来之时。

</body>

</html>

3.1<!DOCTYPE html>文档类型声明标签，告诉浏览器这个页面采取html5版本来显示页面

3.2 lang语言种类

用来定义当前文档显示的语言

1.en定义语言为英文

2.zh-CN定义语言为中文（fr法语

3.3字符集

字符集（character set）是多个字符的集合。以便计算机能够识别和储存各种文字。

在<head>标签内，可以通过<meta>标签的charset属性来规定HTML文档应该使用哪种字符编码

UTF-8也被称为万国码

4.HTML常用标签

4.2<h1>标题标签</h1>

<h2>标题一共六级选</h2>

<h3>文字加粗一行显</h3>

<h4>由大到小依次减</h4>

<h5>从重到轻随之变</h5>

<h6>语法规范刷新见</h6>

4.3段落和换行标签（重要）

在网页中<p>标签用于定义段落

<p>这是一个段落标签</p> //paragraph

特点：文本在一个段落中会根据浏览器的大小自动变换大小

换行标签：<br /> //break

段落和段落间隙较大

换行虽然有间隙但总体还是一个自然段

4.4文本格式化标签

在网页中，有时需要为文字设置粗体、斜体或下划线等效果，这时就需要用到HTML中的文本格式化标签，使文字以特殊的方式显示。

标签语义：突出重要性，比普通文字更重要

<strong></strong>//加粗标签

或<b></b>//加粗标签

<em></em>或<i></i>//倾斜标签

<del></del>或<s></s>//删除线标签

<ins></ins>或<u></u>//下划线标签

4.5<div>和<span>标签//division。span范围

<div>和<span>是没有语义的，它们就是一个盒子，用来装内容的。

span小盒子只占一块 div占一行

4.6图像标签和路径（重点）

1.图像标签

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

src是<img>必须属性

alt替代文本

title提示文本

width

height

border

注意点：

1.图像标签可以拥有多个属性，必须写在标签名的后面

2.属性之间不分前后，标签名和属性、属性名之前要用空格隔开

3.属性采取键值对的格式即属性=“属性值”

4.8图像标签和路径

2.路径

（1）目录文件夹和根目录：实际工作中，我们的文件不能乱放

目录文件夹：就是普通文件夹，里面只不过存些素材

（2）vscode中打开文件夹

路径可分为

1.相对路径：以引用文件所在位置为参考基础，而建立出的目录路径

图片相对于HTML页面的位置

2.绝对路径

下一级路径图片文件位于文件夹下一级 <img src=“images/baidu/gif”/>

上一级 <img src=“images../baidu/gif”/>

5.Study

1.<a></a>跳转标签标签 <a href="https://baidu.com">百度一下</a>

2.css文件与html同级用link标签 <link rel=“stylesheet” href=“strengen.css”>可把标题色

3.块元素<div></div>独占一行

4.css中 color：颜色；

font-size:像素大小；

background-color:颜色；

margin:0;/*外边距*/

padding:0;/*内边距*/

} 通配符全选清除默认样式

div{

background-color:颜色；

height:像素大小；

width：像素大小；

}

5.<ul></ul> 列表元素

可用ul>li*3回车之间开三个列表元素

ul{}在css中修改ul的状态

在css中ul{}修改ul状态

ul{

padding:像素大小；

list-style:none;/*清除默认点*2/

}

ul li{

}

6. .box span{}修改box中span元素样式

/* relative 相对定位是相对于元素本身进行移动 */

/* absolute 绝对定位是相对于有定位的父盒子进行移动 */

/* fixed 固定定位相对于浏览器视口进行定位 */

/* 相对移动相对对上向下移动20个像素相对左向右移动100px*/

/* top与bottom同时存在 top不起作用 left与right同理*/

我的博客虽然不好但你努力看到了现在不留个赞嘛0.0