HTML与CSS学习:列表、内容展示与样式书写
"HTML与CSS知识点笔记" HTML (HyperText Markup Language) 和 CSS (Cascading Style Sheets) 是构建网页和网页设计的两个核心技术。HTML用于创建网页结构,而CSS则负责页面的样式和布局。 ### 一、HTML列表标签 HTML提供三种列表类型:无序列表(unordered list)、有序列表(ordered list)和自定义列表(description list)。 1. **无序列表(ul)** - 使用`<ul>`标签来创建无序列表,其子元素必须是`<li>`标签。 - 可以通过`type`属性设置列表项的样式,如`type="disc"`(默认的黑心圆),`type="circle"`(空心圆),或`type="square"`(方块)。 2. **有序列表(ol)** - 使用`<ol>`标签创建有序列表,同样,其子元素是`<li>`标签。 - `type`属性可设置数字或字母顺序,如`type="1"`(默认的数字顺序),`type="A"`或`type="a"`(大写或小写字母),以及`type="I"`或`type="i"`(大写或小写罗马数字)。 3. **自定义列表(dl)** - `<dl>`标签用于创建自定义列表,其中`<dt>`标签定义列表标题,`<dd>`标签定义与标题相关的描述内容。 ### 二、内容展示标签 这些标签用于在网页中展示文本和其他元素。 1. **<span>** - 双标签,用于包裹文本,但不提供任何特殊效果。可用来实现文本的水平布局。 2. **<strong>** 和 **<b>** - `<strong>`和`<b>`标签都用于加粗文本,但`<strong>`具有更高的语义重要性,对搜索引擎友好。 3. **<em>** 和 **<i>** - `<em>`和`<i>`用于斜体文本,`<em>`强调文本,对搜索引擎优化有帮助,而`<i>`通常用于表示样式上的斜体,如术语或引用。 4. **<br>** - 单标签,用于插入一个换行符。 5. **<hr>** - 单标签,创建一条水平分隔线,用于分隔页面内容。 ### 三、图像标签(img) - `<img>`标签用于插入图像,其主要属性包括: - `src`:指定图像的URL,可以是相对路径或绝对路径。 - `alt`:当图像无法显示时,作为替代文本显示。 - `title`:为图像添加额外的描述信息,鼠标悬停时显示。 - `width`和`height`:分别设置图像的真实宽度和高度,有助于优化页面加载和布局。 ### 四、超链接标签(a) - `<a>`标签用于创建超链接,其主要属性包括: - `href`:指定链接的目标地址。 - `target`:定义链接打开的方式,`_self`(默认,当前窗口打开),`_blank`(新窗口打开)等。 ### 五、CSS样式书写 - **行内样式**:将CSS样式直接写在HTML元素的`style`属性中,例如`<div style="color:red;">`,这种方法不推荐,因为样式与结构混合,不利于代码维护和重用。 CSS允许在外部文件(`.css`)中定义样式,通过`<link>`标签引入,或在文档头部`<style>`标签内定义内部样式。这有助于实现结构与样式的分离,提高代码的可读性和复用性。 了解这些基本的HTML和CSS知识点,将有助于构建美观且功能丰富的网页。在实际开发中,还应学习更复杂的布局技术,如盒模型、浮动、定位、响应式设计以及CSS预处理器等内容,以提升网页设计的专业性。
![md](https://img-home.csdnimg.cn/images/20210720083646.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://profile-avatar.csdnimg.cn/8fba411fe0b24e5fa03be96b52d9898a_weixin_52919841.jpg!1)
- 粉丝: 0
- 资源: 1
我的内容管理 展开
我的资源 快来上传第一个资源
我的收益
登录查看自己的收益我的积分 登录查看自己的积分
我的C币 登录后查看C币余额
我的收藏
我的下载
下载帮助
![](https://csdnimg.cn/release/wenkucmsfe/public/img/voice.245cc511.png)
最新资源
- Hadoop生态系统与MapReduce详解
- MDS系列三相整流桥模块技术规格与特性
- MFC编程:指针与句柄获取全面解析
- LM06:多模4G高速数据模块,支持GSM至TD-LTE
- 使用Gradle与Nexus构建私有仓库
- JAVA编程规范指南:命名规则与文件样式
- EMC VNX5500 存储系统日常维护指南
- 大数据驱动的互联网用户体验深度管理策略
- 改进型Booth算法:32位浮点阵列乘法器的高速设计与算法比较
- H3CNE网络认证重点知识整理
- Linux环境下MongoDB的详细安装教程
- 压缩文法的等价变换与多余规则删除
- BRMS入门指南:JBOSS安装与基础操作详解
- Win7环境下Android开发环境配置全攻略
- SHT10 C语言程序与LCD1602显示实例及精度校准
- 反垃圾邮件技术:现状与前景
![](https://img-home.csdnimg.cn/images/20220527035711.png)
![](https://img-home.csdnimg.cn/images/20220527035111.png)
![](https://csdnimg.cn/release/wenkucmsfe/public/img/green-success.6a4acb44.png)