暑期web实训one day

最新推荐文章于 2019-07-29 17:05:28 发布

WindSearcher

最新推荐文章于 2019-07-29 17:05:28 发布

阅读量160

点赞数

分类专栏： web

本文链接：https://blog.csdn.net/qq_40511966/article/details/95231380

版权

web 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

1.常用的HTML标签

层级标签：span strong img a em

块级标签：div h1 ul li p

以上10个标签可以做出大部分网页

ul,li,p会自带浏览器样式(所以在实际开发中，使用以下方式去掉样式)

<!--一般0不用写成0px，写成0px不规范-->
ul,li,p{
    padding:0;
    margin:0;
}

而不是以下方式

*{
    padding:0;
    margin:0;
}

<!DOCTYPE html>
<!--网页的类型为HTML5-->
<html lang="en">
    <!--根元素，head和body的父元素-->
<head>
    <!--指定字符集-->
    <!--HTML属性attribute 如charset，属性值-->
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<img>
    HTML元素=开始标签+内容+结束标签
    语义：标题
    SEO：搜索引擎优化
    <ul>
        <li>
            ul的子元素只能是li
        </li>
    </ul>
    <h2>静夜思</h2>
    <p>床前明月光</p>
    <p>疑是地上霜</p>
    <p>举头<strong>望</strong>明月</p>
    <p>低头思<b>故乡</b></p>

   <!--strong语义是强调，表现效果是加粗 -->
    <!--b表现效果是，违背了html与样式相分离-->
   <!---->
    <!--div没有自带样式,px是像素-->
    <div style="width:300px;height:300px;background-color:blue">
        <span style="color:red">盒</span><span style="color:green">子</span>
    </div>

    <!--没有自带样式，内嵌css不推荐使用-->

    <!--不能用table,br-->
    <!--p ul h存在默认样式-->
    <!--不要使用li的默认小圆点，有浏览器兼容性问题-->

   <a href="http://www.baidu.com">百度</a>
   <a href="#">空链接</a>
   <a href="javascript:void(0)"></a>
    <!--a必须有href属性,title与搜索引擎(SEO)相关-->
   <a href="images/img1.png" title="this is title">图片资源</a>
    <!--title属性与SEO优化相关联-->
    <img src="images/img2.png" alt="this is alt" title="this is title" width="400px"/>
    <!--层级标签:span img a strong em-->

    <dl>
        <dt>辽宁</dt>
        <dd>省会沈阳，简称辽</dd>
        dt与dd有着天生的对应关系
    </dl>
    <!--table用来表示数据-->
     <!--#334455可以表示为#345,rgba(232,232,56,0.5) rgb
         字符实体:&lt;不推荐使用
         不推荐使用的标签：br hr table font
     -->
    </body>
</html>

结构层(HTML)、表示层(CSS)、行为层(Javascript)。

面试题：strong与b的区别？

em:
Indicates emphasis.(表示强调)
strong:
Indicates stronger emphasis.(表示更强的强调)

所以strong和em是两种级别的强调。例如，一个单词或者短语需要显得更加响亮、更高调、更快速……总之，要比一般文本更加突出。这里我们就引出了strong和em在SEO中的应用了，可以对目标关键词或者长尾关键词等加上该标签，然搜索引擎知道我们的内容中强调的是什么！

W3C还继续做了如下说明：

“短语元素的外观呈现效果取决于用户代理程序。—般情况下，图形界面的用户代理会将用em标记的文本显示为斜体，将strong标记的文本显示为粗体。语音合成器的用户代理则可能会相应地改变参数，例如音量、音高以及节奏。”

作为替代，使用b和i仅仅是简单的外观指令(违背了html与css相分离的规范，因为通过一个标签就可以加粗)。如果我们的目标是将结构和外观尽可能彻底地分离，那么当使用strong和em是不二的选择。我们可以把对文本的加粗和加斜工作留给CSS去完成。

如果我们在网页中不需要强调某个词语，但是又想使用加粗或者斜体，我们可以使用CSS，以下两条分别是字体加粗和斜体的CSS规则：
{font-weight: bold;}{font-style: italic;}

2.实际开发中不推荐使用

<!--没有自带样式，内嵌css不推荐使用-->

<!--不能用br hr table font-->

3.搜索引擎优化

<a href="http://www.baidu.com">百度</a>
<a href="#">空链接</a>
<a href="javascript:void(0)"></a>
 <!--a必须有href属性,title与搜索引擎(SEO)相关-->
<a href="images/img1.png" title="this is title">图片资源</a>
 <!--title属性与SEO优化相关联-->
 <img src="images/img2.png" alt="this is alt" title="this is title" width="400px"/>

4.规范化

#334455可以表示为#345

WindSearcher

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
暑期web实训one day

1.常用的HTML标签层级标签：span strong img a em块级标签：div h1 ul li p以上10个标签可以做出大部分网页ul,li,p会自带浏览器样式(所以在实际开发中，使用以下方式去掉样式)ul,li,p{ padding:0; margin:0;}而不是以下方...
复制链接

扫一扫

专栏目录