HTML的基本知识(五)——无序列表、有序列表、自定义列表

简介: HTML的基本知识(五)——无序列表、有序列表、自定义列表

HTML的基本知识(五)——无序列表、有序列表、自定义列表

茫茫人海,有多少擦肩而过?漫漫一生,有多少真诚守候? 很开心能在CSDN与你相遇、相知、相惜、相守。一个人只有不断地写作,才能才不被人海湮没。 但不论如何,我与你同在。一往情深,一心相伴。

一、文档

doctype  文档类型声明,告诉浏览器按当前标准解析代码

二、图片

<img src="路径" alt="图片不显示时给予提示" title="鼠标悬停时给予提示"   width="宽度" height="高度">

三、超链接

<a href="路径" target="设置打开的窗口_self|_blank"></a>
   <a href="#"> 空链接,返回页面顶部

四、锚点:

(1) 点击a跳转到a
    <a href="#mingzi"点击></a>
    <a href="" name="mingzi">跳转到</a>
  (2) 点击a跳转到块级元素
    <a href="#mingzi">点击</a>
    <p id="mingzi">跳转到</p>

五、块级元素和行内元素的区别

1、块级元素独占一行,行内元素在同一行显示块级元素默认宽度为100%
2、行内元素宽度由内容撑开
3、块级元素主要有:p h1-h6,ul li ol dd dl dt table tr td hr 
4、行内元素:img a em strong b i del big small

六、列表

(1)无序列表

type:设置项目符号的类型  dis circle square none
<ul>
         <li>...</li>
         <li>...</li>
         <li>...</li>
     </ul>
<ul>
         <li><a href="#">...</a></li>
         <li><a href="#">...</a></li>
         <li><a href="#">...</a></li>
         <li><a href="#">...</a></li>
         <li><a href="#">...</a></li>
     </ul>

(2)有序列表

type:设置项目符号类型  1 A a i I
start:从第几个开始,取值为数字
reversed:倒序
<ol>
         <li>...</li>
         <li>...</li>
         <li>...</li>
         <li>...</li>
         <li>...</li>
     </ol>

(3)自定义列表

<dl>
        <dt>主题 </dt>
        <dd>描述</dd>
        <dt>主题 </dt>
        <dd>描述</dd> 
        <dt>主题 </dt>
        <dd>描述</dd>
     </dl>


相关文章
HTML 速查列表4
本示例包含两个部分:表格和框架。表格部分展示了带有两个列标题和一行数据的简单表格;框架部分通过 `&lt;iframe&gt;` 标签嵌入了一个外部页面 `demo_iframe.htm`。
|
2月前
|
数据安全/隐私保护
HTML 速查列表5
表单示例包括文本输入、密码框、复选框、单选按钮、提交和重置按钮、隐藏输入、下拉菜单及多行文本区。实体表示特殊字符,如 &lt; (&lt;)、&gt; (&gt;) 和 &#169; (©)。
HTML 速查列表3
文档排版元素简介:包括图片、替换文本、样式/区块、块级和内联元素、无序列表、有序列表及定义列表等,帮助清晰组织和展示内容。
HTML 速查列表3
本示例展示了HTML中常用的元素:图片、样式与区块、块级与内联元素、以及三种列表(无序、有序和定义列表)的使用方法。通过这些基本标签,可以构建网页的基本结构。
|
5天前
|
人工智能 程序员 UED
【01】完成新年倒计时页面-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
【01】完成新年倒计时页面-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
【01】完成新年倒计时页面-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
|
3天前
|
前端开发 JavaScript
【02】v1.0.1更新增加倒计时完成后的放烟花页面-优化播放器-优化结构目录-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
【02】v1.0.1更新增加倒计时完成后的放烟花页面-优化播放器-优化结构目录-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
【02】v1.0.1更新增加倒计时完成后的放烟花页面-优化播放器-优化结构目录-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
|
2天前
css3 svg制作404页面动画效果HTML源码
css3 svg制作404页面动画效果HTML源码
50 34
|
6天前
html+js+css实现的建筑方块立体数字时钟源码
html+js+css实现的建筑方块立体数字时钟源码
58 33
|
4天前
|
前端开发
“弘五四,耀青春”程序创意获奖作品【html+css】
本作品以“青春筑梦,共创未来”为主题,采用动态龙元素展现青春活力与创新精神。页面设计简洁明快,色彩协调,突显年轻人积极向上的风貌。作品内容包括获奖截图、名字《时代扬新帆》及源代码分享。特别说明:禁止用于商业活动,可用于比赛和作业等开源场景。最后,作者表达了对五四精神的致敬与传承,强调了青春活力和创造力的重要性,并感谢评委和支持者。 **获奖感言摘录:** “获得这个奖项,对我们团队来说,既是认可也是激励。我们将继续努力,不断优化产品,为用户带来更好的体验,为社会贡献更多价值。”
18 2