从建站到拿站 -- HTML和CSS基础

最新推荐文章于 2022-02-08 21:32:47 发布

web安全工具库

最新推荐文章于 2022-02-08 21:32:47 发布

阅读量206

点赞数 1

分类专栏：从建站到拿站文章标签： HTML CSS 渗透测试 web安全

本文链接：https://blog.csdn.net/weixin_41489908/article/details/106448511

版权

从建站到拿站专栏收录该内容

8 篇文章 1 订阅

订阅专栏

总有人会陪你在慌乱无序的生活里同步前行。。。

---- 网易云热评

一、简介

HTML 指的是超文本标记语言，使用标记标签来描述网页，标签是由尖括号包括关键词组成，并且是成对出现。例如<html></html>

二、一个完整的html网页

<!DOCTYPE html>  <!-- 有助于浏览器中正确显示网页 -->

<html>  <!-- html页面开始标签 -->

<head>

<meta charset="UTF-8">  <!-- UTF-8编码  -->

<title>周杰伦</title> <!-- 标签页显示的内容 -->

</head>

<body>

<img src="1.jpg"> <!-- 插入一张图片 -->

<h1>《说好不哭》</h1>

<h3>词：方文山   曲：周杰伦</h3>

<h3>演唱：周杰伦/五月天阿信<h3><!-- h1-h5不同大小字体 -->

<hr> <!-- 水平线 -->

没有了联络  后来的生活  我都是听别人说<br><!-- 换行标签 -->

说你怎么了  说你怎么过  放不下的人是我<br>

人多的时候  就待在角落  就怕别人问起我<br>

</body>

</html> <!-- html页面结束标签 -->

效果如下：

三、标签介绍

1、div和span标签

div是一个块级元素，它包含的元素会自动换行。

span是行内元素，在它的前后不会换行

<div style="color:#0000FF">你们怎么了  你低着头</div>  护着我连抱怨都没有

<span style="color:#0000FF">电话开始躲  从不对我说</span>  不习惯一个人生活

2、a标签，超链接

href：指定要跳转的地址

target：指定方式打开新地址，默认当前页面打开，_blank在新页面打开

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

3、<img>标签，插入图片

./：本级目录

../：父级目录

也可以直接添加网络上的一张图片

<img src="./1.jpg"> <!-- 插入一张图片 -->

<img src="../1.jpg"> <!-- 插入一张图片 -->

<img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1590819401582&di=55b578406cd4b1649ab0ec90d49e5b98&imgtype=0&src=http%3A%2F%2Ffile02.16sucai.com%2Fd%2Ffile%2F2014%2F0829%2Fb871e1addf5f8e96f3b390ece2b2da0d.jpg"><!-- 插入一张图片 -->

四、CSS样式，用于渲染HTML元素标签的样式

1、内联样式

span，将所有span标签内的文字都统一样式

<style type="text/css">

span{

background-color:#000000; <!-- 黑底 -->

color:#00FF00;<!-- 绿字 -->

}

</style>

<span>离开我以后  要我好好过  怕打扰想自由的我</span>

<span>都这个时候  你还在意着  别人是怎么怎么看我的</span>

<span>拼命解释着  不是我的错  是你要走</span>

id选择器，为一个样式起个别名，通过id引用

<style type="text/css">

#TS{

background-color:#000000; <!-- 黑底 -->

color:#FF00FF;            <!-- 粉字 -->

}

</style>

<span>离开我以后  要我好好过  怕打扰想自由的我</span>

<span id="TS">都这个时候  你还在意着  别人是怎么怎么看我的</span>

<span>拼命解释着  不是我的错  是你要走</span>

类选择器，为一个样式起个别名，通过class引用

<style type="text/css">

#TS{

background-color:#000000;<!-- 黑底 -->

color:#FF00FF;<!-- 绿字 -->

}

.ST{

background-color:#000000;<!-- 黑底 -->

color:#00FFFF;  <!-- 蓝字 -->

}

</style>

<span id="TS">离开我以后  要我好好过  怕打扰想自由的我</span>

<span id="TS">都这个时候  你还在意着  别人是怎么怎么看我的</span>

<span>拼命解释着  <span class="ST">不是我的错</span>  是你要走</span>

2、外引样式

新建一个aiyou.css文件，内容为

#TS{

background-color:#000000;

color:#FF00FF;

}

.ST{

background-color:#000000;

color:#00FFFF;

}

在html源码中引用

<link rel="stylesheet" type="text/css" href="aiyou.css">

<span id="TS">离开我以后  要我好好过  怕打扰想自由的我</span>

<span id="TS">都这个时候  你还在意着  别人是怎么怎么看我的</span>

<span>拼命解释着  <span class="ST">不是我的错</span>  是你要走</span>

禁止非法，后果自负

欢迎关注公众号：web安全工具库

web安全工具库

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
2
评论
从建站到拿站 -- HTML和CSS基础

总有人会陪你在慌乱无序的生活里同步前行。。。---- 网易云热评一、简介HTML 指的是超文本标记语言，使用标记标签来描述网页，标签是由尖括号包括关键词组成，并且是成对出现。例如<html></html>二、一个完整的html网页<!DOCTYPE html><html><head><meta ...
复制链接

扫一扫