学习周记2

最新推荐文章于 2024-08-05 17:22:58 发布

。淡沫

最新推荐文章于 2024-08-05 17:22:58 发布

阅读量95

点赞数 4

文章标签： html

本文链接：https://blog.csdn.net/qq_48999927/article/details/114779444

版权

HTML列表

这周我们学习了HTML列表。

无序列表

这是一个项目的列表，此列项目使用粗体圆点（典型的小黑圆圈）进行标记。
无序列表使用 <ul> 标签

小练习：

<ul>
<li>男生</li>
<li>女生</li>
</ul>

浏览器显示如下：

男生
女生

有序列表

有序列表始于 <ol> 标签。每个列表项始于 <li> 标签。

编号列表

<ol>
<li>春</li>
<li>夏</li>
<li>秋</li>
<li>冬</li>
</ol>

浏览器显示如下：

HTML自定义列表

自定义列表不仅仅是一列项目，而是项目及其注释的组合。每个自定义列表项以 <dt> 开始。每个自定义列表项的定义以 <dd> 开始。

<dl>
<dt>春</dt>
<dd>-春暖花开</dd>
<dt>秋</dt>
<dd>- 秋高气爽</dd>
</dl>

浏览器显示如下：

春

-春暖花开

秋

- 秋高气爽

HTML样式创建-CSS

内联样式- 在HTML元素中使用"style" 属性。

内部样式表 -在HTML文档头部 <head> 区域使用<style> 元素来包含CSS。

外部引用 - 使用外部 CSS 文件。

定义一个元素的背景颜色：

<body style="background-color:yellow;">
<h2 style="background-color:red;">这是一个标题</h2>
<p style="background-color:green;">这是一个段落。</p>
</body>

运行结果：
在这里插入图片描述
可以使用font-family（字体），color（颜色），和font-size（字体大小）属性来定义字体的样式:

<h1 style="font-family:verdana;">一个标题</h1>
<p style="font-family:arial;color:red;font-size:20px;">一个段落。</p>

运行结果：
在这里插入图片描述
外部样式表可以通过更改一个文件来改变整个站点的外观。

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

HTML区块

<div> 元素是块级元素，它可用于组合其他 HTML 元素的容器。

<div> 元素的另一个常见的用途是文档布局。
<span> 元素是内联元素，可用作文本的容器

HTML布局

div 元素是用于分组 HTML 元素的块级元素。

</head>
<body>
 
<div id="container" style="width:500px">
 
<div id="header" style="background-color:#FFA500;">
<h1 style="margin-bottom:0;">主要的网页标题</h1></div>
 
<div id="menu" style="background-color:#FFD700;height:200px;width:100px;float:left;">
<b>菜单</b><br>
HTML<br>
CSS<br>
JavaScript</div>
 
<div id="content" style="background-color:#EEEEEE;height:200px;width:400px;float:left;">
内容在这里</div>
 
<div id="footer" style="background-color:#FFA500;clear:both;text-align:center;">
版权 © runoob.com</div>
 
</div>
 
</body>

运行界面如下图：
在这里插入图片描述

。淡沫

关注

4
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
学习周记2

HTML列表这周我们学习了HTML列表。无序列表这是一个项目的列表，此列项目使用粗体圆点（典型的小黑圆圈）进行标记。无序列表使用 <ul> 标签小练习：<ul><li>男生</li><li>女生</li></ul>浏览器显示如下：男生女生有序列表有序列表始于 <ol> 标签。每个列表项始于 <li> 标签。编号列表<ol><li>春&
复制链接

扫一扫