TJU实训(二):HTML CSS基础

这篇博客介绍了HTML的基本元素,如段落、链接、标题、表格、列表、图像等,并强调了HTML的语义化,增强了网页的可读性和搜索引擎友好性。接着,解释了CSS的作用,阐述了选择器的概念及其在样式应用中的重要性。此外,还讨论了CSS的优先级、调试方法以及基础属性,特别是盒模型。最后,提到了浮动、定位、响应式布局和Flexbox布局在网页设计中的应用,为创建适应不同设备的网页提供了指导。

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

在这里插入图片描述

1、什么是HTML

超文本标记语言

2、常用标签

一个常见的HTML结构

<p>:标签,代表段落的意思

<div>:表示一个块,可以独占一行

<a>:标签作为超链接,不需要独行展示。还可以作为锚点,跳转到指定的位置。
    可选项:href指向地址,target,
<h1-h6>:是标题标签,独占一行,字体加粗,1-6相当于标题的字号

<img>:标签是图片。
    可选项:src指向图片路径,alt指向图片名称

<table>:显而易见是表格,推荐使用css给表格加上边线。每个tr里面都是一行的排列。
    可选项:table还有很多属性,可以去查找使用。

<ul><ol>:列表,前者是小圆点,后者是数字顺序

<hr />:相当于分隔符

<span>:相当于一个字符串展示

<form>:是一个表单元素
    可以设置密码(隐藏展示)
    checkbox:多选框
    radio:单选

<label>:标签可以把文字和标签关联起来

<br>:强制换行

<select>
    <option>:标签是下拉选项

<textarea>:构造一个可输入的文本框(可设置行列大小)

<button>:按钮

<canvas>:标签是代表画布

<video>和<audio>:是视频和音频标签


<!DOCTYPE html>
<htmL Lang="en">
 <head>.</head>
 <body>
   <header>w</header>
   <sect ion>_</ sect ion>
   <article>-</article>
   <footer>-</footer>
 </body>
</html>

3、语义化

就是说HTML语言要让大家基本上看的懂那一部分是干什么的。
在这里插入图片描述
优点:可读性强,有利于搜索引擎被检索到,访问性更好。

4、CSS是什么

如果说HTML是网页的骨架的话,CSS就是网页的血肉。
在这里插入图片描述

5、选择器

使我们选择的CSS标签可以作用到对应的标签上面
在这里插入图片描述
在这里插入图片描述

6、优先级

在这里插入图片描述

7、调试

在这里插入图片描述

8、基础属性

盒模型
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
改变display属性,改为同行展示

9、浮动和定位

10、响应式布局

在这里插入图片描述
在这里插入图片描述

11、FLEX

在这里插入图片描述
在这里插入图片描述

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值