常用的标签
a 行内标签
h1-h6 块状标签
p div li 块状标签
去掉默认样式
ul,li{
list-style:0;
}
面试题
块级元素(block):div ol ul li dl dt dd h1 h2 h3… p canvas table address article footer header menu
行内元素(inline):span label select strong textarea
空元素:br hr img input link meta area col param source
块级元素与行内元素的区别:
① 块级元素可以设置宽高;行内元素不能设置宽高(例外:img 和input可以设置宽高)
② 块级元素独占一行,行内元素不可以
块级元素和行内元素的转化:
① 块级元素 → 行内元素:display: inline;
② 行内元素 → 块级元素:display: block; (可设置宽高,独占一行)
display: inline-block; (可设置宽高,不会独占一行)
————————————————
谈谈你对HTML标签语义化的理解
根据内容的结构选择合适的标签,也就是说用正确的标签做正确的事情。
① 页面更容易被搜索引擎收录,有利于SEO。
( 设置 <meta name="keywords" content="" /> )
② 能更好地体现页面的主题,在没有CSS的情况下,页面也能呈现出很好的内容结构。
③ 可以在更多的设备上进行解析(如屏幕阅读器、移动设备、盲人阅读器);便于团队开发和维护
>>实现HTML标签语义化一些具体的措施:
① 尽可能使用 p 标签,而不是 div、span。原因:p标签在默认情况下有上下间距,对兼容特殊终端有利
② 需要强调的文本,尽量使用 strong(加粗)和 em(斜体),而不是 b 和 i 。
注意:可以针对自己的简历来说一下,如何用html来实现简历页面。
————————————————
怎么在前端HTML里面输出一个空格?
方法一:【html】空格原样输出。使用 <pre></pre> 标签
方法二:【html】改用 html 实体。使用 表示空格
方法三:【css】空格原样输出。使用 white-space: pre;样式属性(空白会被浏览器保留,作用和法一相同)
HTML标签中 meta 是用来作什么的?
语法为:<meta name="" content=""> 或者 <meta http-equiv="" content="">
● name属性:用于描述网页。其属性值 content 中的内容便于搜索分类SEO优化
● http-equiv属性:向浏览器传回一些有用的信息。其属性值 content 中的内容就是各个参数的变量值
例如:常用的几个meta标签
① 声明文档使用的字符编码
<meta charset='utf-8'>
② 启用360浏览器的极速模式(webkit)
<meta name="renderer" content="webkit">
③ 页面关键词,利于SEO
<meta name="keywords" content=""/>
④ 优先使用 IE 最新版本和 Chrome
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
⑤ 避免IE使用兼容模式
<meta http-equiv="X-UA-Compatible" content="IE=edge">
⑥ 网页的宽度自动适应手机屏幕的宽度。
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=3.0, minimum-scale=1.0, user-scalable=no">
width=device-width: 表示宽度是设备屏幕的宽度 initial-scale=1.0: 表示初始的缩放比例
maximum-scale=3.0: 表示最小的缩放比例 minimum-scale=1.0: 表示最大的缩放比例
user-scalable=no : 用户不可以调整缩放比例(若值为 yes,则用户可以调整缩放比例)