常用标签及语义&标签样式初始化

191 阅读1分钟

常用标签

<a href="">链接,包含4个伪类link/visited/hover/active</a>
<span>用于区分样式</span>
<header>
    header主要用于页面头部信息介绍,也可用于板块头部
</header>
<nav>
    导航:包含链接的一个列表
</nav>
<nav><a href="">链接1</a><a href="">链接2</a></nav>
<footer>
    页脚,和header对应,页面或板块底部
</footer>
<section>
    板块:页面上的板块,划分页面上不同区域、划分文章里的不同节
    先用section,再用div 
</section>
<article>
    article,页面中用于表示一套 结构完整且内容独立的部分,好比帖子的主体
</article>
<aside>
    aside,与当前页面或主要内容相关的引用,侧边栏,广告,nav元素组等
</aside>
<time>
    time,表示时间或日期
</time>
参考:w3school.com.cn/tags/index.asp 
其他常用标签
<h1>logo,页面唯一</h1>
<h6>6级标题</h6>
<p>段落</p>
<strong>加粗强调</strong>
<em>斜体强调</em>
<ul>
    无序列表及列表项
    <li>苹果</li>
    <li>梨子</li>
</ul>
<ol>
    有序列表及列表项
    <li>脱裤子</li>
    <li>放屁</li>
</ol>
<dl>
    自定义列表dl及列表项表头dt及列表项信息dd 
    <dt>name</dt>
    <dd>jirk</dd>
    <dd>jim</dd>
</dl>
<mark>标记</mark>
标记有黄色背景
<img src="../210908Psd图/999.png" alt="">
img标签,图片

标签样式初始化

  css reset 原则:浏览器的默认样式都别使用,因为不同浏览器不一致
<ul>
    <li></li>
    <li></li>
</ul>
<ol>
    <li></li>
    <li></li>
</ol>
检查-找到节点-user agent stylesheet中写的便是节点的默认样式
css reset,先将所有元素的样式清除,再分别定义
需要重置的样式:
    1与盒模型相关的
        border/margin/padding
    2元素特有的样式
        ul>li ol>li a img 
建议或规范:清除用到的标签的默认样式,不能一刀切;②不要忘了body

css-reset

    <style>
    body, h1, h2, h3, h4, h5, h6, p, dl, dd{
        margin: 0;
    }
    ul, ol{
        margin: 0; padding: 0; list-style: none;
    }
    img{
        border: none; vertical-align: top; /*用于当a标签包裹img时,在ie6下会有样式问题*/
    }
    a{text-decoration: none;/*a标签包含文字,文字有下划线*/}
</style>