序列表
经过之前关于表格、表单的学习后,再来学习列表,就显得非常的简单和容易理解了。
学习是构建知识体系的过程,没有形成体系的知识学习再多也是碎片,是很难形成技能或深刻理解的,因此,如果您是零基础的初学者,第一次看我的教程,如果时间允许的话,请务必从目录中找寻第一篇,循序渐进的学习。
列表分为有序列表、无序列表和定义列表,同时列表之中还能嵌套列表,和表格非常相似。
首先介绍有序列表
要用<ol></ol>标签告诉浏览器这里是列表。
然后在里面添加<li></li>标签,在这个标签中添加内容即可。
示例代码如下
<p>我喜欢的水果</p>
<ol>
<li>葡萄</li>
<li>西瓜</li>
<li>苹果</li>
<li>桃子</li>
</ol>
大家可以把它放到一个新的html框架中看看效果。
完整代码如下:
<!DOCTYPE HTML>
<html>
<head>
<title>列表</title>
</head>
<body>
<h>有序列表</h>
<p>我喜欢的水果</p>
<ol>
<li>葡萄</li>
<li>西瓜</li>
<li>苹果</li>
<li>桃子</li>
</ol>
</body>
</html>
页面效果如下:
通过修改<ol>标签中的type属性我们可以改变序号显示的样式,默认的是数字,大家看一下不同的type值的不同效果吧!示例代码如下:
<ol type="A">
<li>葡萄</li>
<li>西瓜</li>
<li>苹果</li>
<li>桃子</li>
</ol>
<ol type="a">
<li>葡萄</li>
<li>西瓜</li>
<li>苹果</li>
<li>桃子</li>
、</ol><ol type="I"> <li>葡萄</li> <li>西瓜</li> <li>苹果</li> <li>桃子</li></ol>
页面效果如下:
下面给大家介绍一下搜狗输入法中如何输入罗马数字。
step1.点击"输入方式"
step2.点击"特殊符号"后选择数字序号,找到罗马数字即可
除此之外我们还可以使用CSS的方法为有序列表的序号提供更多样式。在<ol>标签中修改style属性可以直接调用这些css中的属性。写法是style="list-style-type:属性值;"
示例代码如下:(使用日语中的片假名表示序号)
<ol style="list-style-type:hiragana;">
<li>葡萄</li>
<li>西瓜</li>
<li>苹果</li>
<li>桃子</li>
</ol>
页面效果如图所示:
是不是很有趣,这里的测试就不一一做了。为大家奉上list-style-type的值的列表与说明,大家自己课下去尝试,这个列表中既有有序列表的值也有无序列表的值。
如图:
资料来自w3school
无序列表
无序列表与有序列表的区别在于最外层的标签,它的写法是这样的:<ul></ul>。
有一个记忆的小技巧,有序的英文是order,故有序列表为order list(列表),缩写为ol。
无序为unorder,无序列表为unorder list,缩写为ul。
无序列表<ul>标签的type属性用来控制列表前的标记显示演示。
示例代码如下:
<h>无序列表</h>
<p>我喜欢的水果</p>
<ul>
<li>葡萄</li>
<li>西瓜</li>
<li>苹果</li>
<li>桃子</li>
</ul>
<ul type="disc">
<li>葡萄</li>
<li>西瓜</li>
<li>苹果</li>
<li>桃子</li>
</ul>
<ul type="circle">
<li>葡萄</li>
<li>西瓜</li>
<li>苹果</li>
<li>桃子</li>
</ul>
<ul type="square">
<li>葡萄</li>
<li>西瓜</li>
<li>苹果</li>
<li>桃子</li>
</ul>
页面效果如下:
通过图片我们可知,无序列表默认的列表标识就是type="disc"。
style属性的话大家自己试试吧,这里就不啰嗦了。
定义列表
这个列表比较特殊,也比较不常见,主要就是显示名词定义的。
首先要写入<dl></dl>标签。这是告诉浏览器这里是个定义列表,和<ol>或<ul>一样。
定义的英文是definition,定义列表就是definition list,缩写是dl。
下面在<dl></dl>标签中间写入定义的名称<dt></dt>,即definition title(标题)。
与定义名称标签并列的是定义描述<dd></dd>,即definition describe(描述)。
示例代码如下:
<dl>
<dt>计算机</dt>
<dd>用来计算的仪器 ... ...</dd>
<dt>显示器</dt>
<dd>以视觉方式显示信息的装置 ... ...</dd>
</dl>
页面效果如下:
今天的内容结束了!
列表嵌套列表的测试大家自己试试吧,学到现在,相信你们都可以完成了!
如果您喜欢我的教程请关注我,点赞也能让我充满动力!
如果您有任何疑问请给我留言,如有问题或错误请予以斧正!
HTML序章(学习目的、对象、基本概念)——零基础自学网页制作
HTML是什么?——零基础自学网页制作
第一个HTML页面如何写?——零基础自学网页制作
HTML页面中head标签有啥用?——零基础自学网页制作
初识meta标签与SEO——零基础自学网页制作
HTML中的元素使用方法1——零基础自学网页制作
HTML中的元素使用方法2——零基础自学网页制作
HTML元素中的属性1——零基础自学网页制作
HTML元素中的属性2(路径详解)——零基础自学网页制作
使用HTML添加表格1(基本元素)——零基础自学网页制作
使用HTML添加表格2(表格头部与脚部)——零基础自学网页制作
使用HTML添加表格3(间距与颜色)——零基础自学网页制作
使用HTML添加表格4(行颜色与表格嵌套)——零基础自学网页制作
16进制颜色表示与RGB色彩模型——零基础自学网页制作
HTML中的块级元素与内联元素——零基础自学网页制作
初识HTML中的<div>块元素——零基础自学网页制作
在HTML页面中嵌入其他页面的方法——零基础自学网页制作
封闭在家学网页制作!为页面嵌入PDF文件——零基础自学网页制作
HTML表单元素初识1——零基础自学网页制作
HTML表单元素初识2——零基础自学网页制作
HTML表单3(下拉列表、多行文字输入)——零基础自学网页制作
HTML表单4(form的action、method属性)——零基础自学网页制作
HTML列表制作讲解——零基础自学网页制作
为HTML页面添加视频、音频的方法——零基础自学网页制作
音视频格式转换神器与html视频元素加字幕——零基础自学网页制作
HTML中使用<a>标签实现文本内链接——零基础自学网页制作
TML我们也学了那么久了,是时候看一些面试题了,毕竟学习完找工作要面试,你工作能力再强,面试这一关还是要过得。所以面试题占了很重要的成分。下面我来总结一部分,尽量全面一些,既要接近我们所学,又要满足真实面试场景。
1、请说出XHTML和HTML的区别
答: 1、文档顶部doctype声明不同,xhtml的doctype顶部声明中明确规定了xhtml DTD的写法;
2、html元素必须正确嵌套,不能乱;
3、属性必须是小写的;
4、属性值必须加引号;
5、标签必须有结束,单标签也应该用 “/” 来结束掉;
2、请写出至少5个HTML块元素标签
答: div p ul li table h1 h2 h3 ... h6 form 等
3、请写出至少5个HTML行内元素标签
答:span a i label img input button textarea select 等
4、请写出table标签下面会包含哪些标签元素
答: tr th td thead tbody tfoot 等
5、很多网站不常用table iframe这两个元素,知道原因吗?
答:因为浏览器页面渲染的时候是从上至下的,而table 和 iframe 这两种元素会改变这样渲染规则,他们是要等待自己元素内的内容加载完才整体渲染。用户体验会很不友好。
6、jpg和png格式的图片有什么区别?
答: jpg是有损压缩格式,png是无损压缩格式。所以,相同的图片,jpg体积会小。比如我们一些官网的banner图,一般都很大,所以适合用jpg类型的图片。但png分8位的和24位的,8位的体积会小很多,但在某些浏览器下8位的png图片会有锯齿。
7、请用html知识解决seo优化问题
答: 网站上线应该设置TDK
TDK就是 :
然后就是html语义化标签,要简洁,合理,这样可以在css和js加载不全的时候,使我们的html文档尽量清晰的展示出来,而不会特别乱;
8、常用浏览器有哪些,内核都是什么?
答: 常用浏览器有 IE 火狐(firefox) chrome safari 360 搜狗 等
内核:IE的是 Trident
火狐的是 Gecko
chrome和safari 用的是 Webkit
360和搜狗这些分极速模式和兼容模式,极速模式用的Webkit的内核,兼容模式用的Trident内核。
9、请至少写出5个H5的新标签
答: header nav footer canvas datalist article mark
10、a标签在新窗口打开链接怎么加属性?
答: <a target="_blank">链接</a>
11、写了2个<a>标签,两个标签之间有空格的情况遇到过吗?
答:遇到过,一般换行写的时候会出现这种情况。代码:
<a>我们</a>
<a>你们</a>
这样“我们”和“你们”之间就会有明显的空格,如图:
怎么样,是不是空格挺明显的。
解决办法就是不换行写,把两个a标签写在一行里。
12、form标签上定义请求类型的是哪个属性?定义请求地址的是哪个属性?
答:form表单定义请求类型的是 method 属性 , 定义请求地址的是 action属性
好啦,基本上html这部分面试题就这么多,肯定还有没有总结到的,这些面试题一定要会,甚至比我总结的多了更好。喜欢文章的小伙伴记得关注公众号:书软
年不更新的搜狗搜索SR值最近突然抽疯更新了,很多网站SR值骤,卢松松博客的SR值也从之前的4降到1了。
这次搜狗SR值更新,扒了几个网站发现,完全不按套路走,基本上很多网站都被撸到底了,不光卢松松博客博客的搜狗SR降到了1,很多之前SR值很高的大站,比如网易、站长之家、A5站长网这次都被降到1了,没有一个站搜狗SR值上涨的。
基本上搜狗SR值停更之后,很多站长们都忘了搜狗SR值这回事了,没想到万年不更新,来次更新权重直接掉光了!
其实网站走到目前这一块,PR值也好SR值也好都只是你网站大概的流量,不准确,更多的是跟你网站关键词的指数以及排名有关,这些数值只是一个参考,但是没办法现在站长们除了数值和流量也没有更好的彰显网站价值的办法,不知道这次搜狗SR值改动会不会影响一些站网站在搜狗搜索的排名和流量!
来源:卢松松博客, 欢迎分享,(QQ/微信:13340454)
来源链接:https://lusongsong.com/blog/post/12996.html
*请认真填写需求信息,我们会在24小时内与您取得联系。