02web安全前端基础

本文介绍了HTML的基础知识,包括HTML是什么、为何学习、文档格式及基本语法。接着通过QQ空间登录页面的例子讲解了常见HTML标签,并推荐了w3school作为学习资源。然后,文章转向CSS,阐述了CSS的作用、分类和基本属性。最后,简要提及了CSS的进阶概念,如盒子模型、定位和高级属性。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

一、HTML-编写一个网页

1、什么是HTML

  • 超文本标记语言,是一种用于创建网页的标准标记语言
  • HTML文件的后缀一般为.htm和.html
    在这里插入图片描述
    在这里插入图片描述

2、为什么要学习HTML

好上手,有趣,有成就感,有用

3、HTML文档的格式

<!DOCTYPE html>                         <!--文档类型数据-->
<html lang="zh-cn">                     <!--表示HTML文档开始-->
<head>                                  <!--包含文档元数据开始-->
    <meta charset="utf-8">              <!--声明字符编码-->
    <title>文档结构</title>             <!--设置文档标题-->
</head>                                 <!--包含文档元数据结束-->

<body>                                  <!--表示HTML文档的内容-->

<a href="http://www.baidu.com">百度</a>   <!--一个超链接元素(标签)-->

</body>                                 <!--表示HTML文档的内容结束   -->

</html>                                 <!--表示HTML文档结束-->

4、HTML编写环境

Sublime Text挺好用
http://www.sublimetext.com/
https://blog.youkuaiyun.com/u013844735/article/details/78822819

5、HTML基本语法

二、从QQ空间看HTML架构

学习目标:完成qq空间登录页面的控件架构
1、常见标签

  • 标题标签<h1>-<h6>

在这里插入图片描述

  • 段落标签<p>
  • 超链接标签<a>
  • 图片标签<img>
  • 换行标签<br />
    -表格标签<table>
  • 表头<th>
  • <tr>
  • 单元格<td>

表单

单行输入标签<input type="text">
选择标签<select>
文本域标签<textarea></textarea>

列表

有序列表<ol>
无序列表<ul>
列表项<li>

实体(转义字符)

&lt;
等同于
<
&gt;
等同于
>

2、完成qq空间登录页面
在这里插入图片描述

  1. 根据设计图找到对应的控件
  2. 编码

推荐学习网站
w3school

三、CSS

css简介
1、css层叠样式表
2、css定义了如何显示html元素
3、css使用分类

  • 内联式css直接写入html的style标签中
  • 嵌入式使用style标签将代码嵌入html中
  • 外部式将css保存到.css文件中,使用link导入到html中

基本css属性

  • 背景Background
  • 文本Text
  • 字体Font
  • 尺寸Dimension
  • 边距和填充margin&padding
  • 边框border

四、css进阶

1、css盒子模型
在这里插入图片描述

2、高级css属性

  • 定位
  • 过度transition
  • 伪类选择器

上一篇:01web通信原理与搭建web安全测试环境
下一篇:03web安全后端基础-1

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值