纵有疾风起
人生不言弃

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

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

—-  网易云热评

一、简介

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

二、一个完整的html网页

<!DOCTYPE html><!– 有助于浏览器中正确显示网页 –><!– html页面开始标签 –><!– UTF-8编码  –>周杰伦<!– 标签页显示的内容 –><!– 插入一张图片 –>

《说好不哭》

词:方文山  曲:周杰伦

演唱:周杰伦/五月天阿信

<!– h1-h5不同大小字体 –>


<!– 水平线 –>没有了联络  后来的生活  我都是听别人说
<!– 换行标签 –>说你怎么了  说你怎么过  放不下的人是我
人多的时候  就待在角落  就怕别人问起我
<!– html页面结束标签 –>

效果如下:

从建站到拿站 — HTML和CSS基础插图

三、其他标签介绍

1、div和span标签

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

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

你们怎么了  你低着头护着我连抱怨都没有电话开始躲  从不对我说不习惯一个人生活

从建站到拿站 — HTML和CSS基础插图(1)

2、a标签,超链接

href:指定要跳转的地址

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

百度一下

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标签内的文字都统一样式

span{background-color:#000000;<!– 黑底 –>color:#00FF00;<!– 绿字 –>}离开我以后  要我好好过  怕打扰想自由的我都这个时候  你还在意着  别人是怎么怎么看我的拼命解释着  不是我的错  是你要走

从建站到拿站 — HTML和CSS基础插图(2)

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

#TS{background-color:#000000;<!– 黑底 –>color:#FF00FF;<!– 粉字 –>}离开我以后  要我好好过  怕打扰想自由的我都这个时候  你还在意着  别人是怎么怎么看我的拼命解释着  不是我的错  是你要走

从建站到拿站 — HTML和CSS基础插图(3)

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

#TS{background-color:#000000;<!– 黑底 –>color:#FF00FF;<!– 绿字 –>}.ST{background-color:#000000;<!– 黑底 –>color:#00FFFF;<!– 蓝字 –>}离开我以后  要我好好过  怕打扰想自由的我都这个时候  你还在意着  别人是怎么怎么看我的拼命解释着不是我的错是你要走

从建站到拿站 — HTML和CSS基础插图(4)

2、外引样式

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

#TS{background-color:#000000;color:#FF00FF;}.ST{background-color:#000000;color:#00FFFF;}

在html源码中引用

离开我以后  要我好好过  怕打扰想自由的我都这个时候  你还在意着  别人是怎么怎么看我的拼命解释着不是我的错是你要走

从建站到拿站 — HTML和CSS基础插图(5)
从建站到拿站 — HTML和CSS基础插图(6)

文章转载于:https://www.jianshu.com/p/7946d9150f3c

原著是一个有趣的人,若有侵权,请通知删除

未经允许不得转载:起风网 » 从建站到拿站 — HTML和CSS基础

分享到: 生成海报
avatar

评论 抢沙发

评论前必须登录!

立即登录   注册

切换注册

登录

忘记密码 ?

切换登录

注册

我们将发送一封验证邮件至你的邮箱, 请正确填写以完成账号注册和激活