大学生的期末作业之HTML & CSS 学习总结

本人cqjtu学生一枚,下面是学习web的一点感想,主要参考了黑马程序员的B站视频,欢迎大家也可以学,【前端开发入门教程,web前端零基础html5 +css3+前端项目视频教程】 https://www.bilibili.com/video/BV1Kg411T7t9/?share_source=copy_web&vd_source=acb2a6761a027c4b21e4de9c9d833dd9

HTML(HyperText Markup Language)是一种用于创建网页的标记语言。它使用标签(tag)来描述网页的结构和内容。

下面是HTML的基本用法:

标签:HTML文档由标签组成,标签用尖括号表示,例如<tagname>。常见的标签有<html>、<head>、<body>等。基本骨架如下:

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>网页标题</title>
</head>
<body>
  <!-- 在这里添加内容 -->
</body>
</html>

元素:标签包裹着文档的不同部分,形成元素(element)。元素由开始标签和结束标签组成,例如<tagname>content</tagname>。例如底下

<p>这是一个段落。</p>

常见的标签:常见的HTML标签有<h1>到<h6>用于标题,<p>用于段落,<a>用于链接,<img>用于插入图片,<ul>和<li>用于创建无序列表等。其中还可以有超链接,例如底下自己写的。

属性:标签可以带有属性(attribute),属性提供元素的额外信息。属性以键值对的形式出现,例如<tagname attribute="value">。例如底下跳转到百度

<a href="https://www.baidu.com">这是一个链接</a>

文本内容:标签可以包含文本内容,文本内容将显示在网页上。不举例子了

嵌套:标签可以相互嵌套,形成层级结构。例如,<div>可以包含其他标签。

自己写一个综合的小例子:

</head> <body> <h1>今日热搜词</h1> <hr> <h2>1.桃田贤斗</h2> <p>桃田贤斗,1994年9月1日出生于日本<a href="https://baike.baidu.com/item/%E9%A6%99%E5%B7%9D%E5%8E%BF/6617822?fromModule=lemma_inlink" target="_blank">香川县</a>,日本羽毛球运动员。 2014年,获得汤姆斯杯世界男子羽毛球团体赛冠军,也因此获得首个世界冠军 [1]  。2018年,获得南京羽毛球世锦赛男单冠军,为日本夺得世锦赛41年历史上首枚男单金牌。2018年9月27日,首次登上羽毛球世界排名第一的位置,这也是日本羽毛球史上首位男单世界第一 [3]  。 2019年3月,获得第109届全英羽毛球公开赛男单冠军,成为百年全英历史上第一位赢得全英男单冠军的日本选手 [41]  。2019年5月26日,苏迪曼杯决赛,桃田贤斗1:2负于石宇奇,日本队0:3负于中国队获得亚军。 [5]  2019年7月,获得日本羽毛球公开赛男单冠军 [7]  。2019年8月25日,卫冕世界羽毛球锦标赛男单冠军。成为继杨阳,<a href="https://baike.baidu.com/item/%E6%9E%97%E4%B8%B9/2674?fromModule=lemma_inlink" target="_blank">林丹</a>,谌龙后第四位蝉联世锦赛男单冠军的选手。2019年12月9日,获得2019年世界羽联年度最佳男运动员,是历史上第一次获得该荣誉的日本选手 [10]  。</p> <h2>2.马云</h2> <p>马云,男,汉族,中共党员 [1]  ,1964年9月10日生于浙江省杭州市,祖籍浙江省嵊州市谷来镇, 阿里巴巴集团主要创始人。现任日本软银董事、大自然保护协会中国理事会主席兼全球董事会成员、华谊兄弟董事、生命科学突破奖基金会董事、联合国数字合作高级别小组联合主席,<a href="https://baike.baidu.com/item/%E9%A6%99%E6%B8%AF%E5%A4%A7%E5%AD%A6/233635?fromModule=lemma_inlink" target="_blank">香港大学</a>荣誉教授。 [2-3]   [185]  1988年毕业于杭州师范学院外语系,同年担任杭州电子工业学院英文及国际贸易教师,1995年创办中国第一家互联网商业信息发布网站“中国黄页”,1998年出任中国国际电子商务中心国富通信息技术发展有限公司总经理,1999年创办阿里巴巴,并担任阿里集团CEO、董事局主席。</p> </body>

在CSS中,就讲三个选择器,选择器用于选择要应用样式的HTML元素。以下是三个常用的CSS选择器的基本用法:

元素选择器(Element Selector):元素选择器通过HTML元素的名称选择要应用样式的元素。

例如,要选择所有的段落元素,可以使用p选择器:
p {
  color: blue;
}

上述代码将把所有的段落文本颜色设置为蓝色。

类选择器(Class Selector):类选择器选择具有相同类名的元素。

例如,要选择具有my-class类名的元素,可以使用.作为前缀:
.my-class {
  font-weight: bold;
}

上述代码将把所有具有my-class类名的元素文本设置为粗体。

ID选择器(ID Selector):ID选择器通过元素的唯一ID选择特定的元素。

例如,要选择具有my-id ID的元素,可以使用#作为前缀:
#my-id {
  background-color: yellow;
}

上述代码将把具有my-id ID的元素的背景颜色设置为黄色。

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值