11-27

一、元素标签
1.块级元素–单独占一行
例如h1-h6,p,div
2.行内元素(内联元素)–紧跟一起
例如i,b,strong,em,img,span
div,span是2个比较特殊的没有任何意义的标签–用途:用来装其它有语义化的标签,类似容器
二、使用样式的三种方式
1.引用外部样式文件
2.写在head里面style标签内
3.写在元素开始标签内,用style属性
三、从一层(外部文件,style标签)层叠的优先级
1.id的优先级最高
2.class其次
3.tag标签再其次
4.浏览器默认是最低的(不同浏览器默认显示的内容样式是不一致的)
四、不同引用形式混合在一起
1.style属性 内联
2.id等级最高
3.先定义的会被后面的定义覆盖
4.后引用的会覆盖前引用的
五、引用外部样式文件

六、超链接anchor
1.使用网页链接
2.同一文件夹下的内容页
3.上一层文件夹下的内容页
4.邮件地址
5.电话地址
七、href 引用
1.绝对路径/地址:http://baidu.com
2.相对路径/地址:lastday.html
八、涉及的单词
container容器
content内容
style风格
navigatin导航
section 段落 章节
article 文章 文字
aside侧边栏
footer底部信息
anchor简称a 超链接,锚点
reference简称href 引用
target目标 _blank
blank空白的
mailto
font字体
header
color颜色
span
div
cascade层叠

<!DOCTYPE html>

<html>
 <head>
  <title>第二课</title>
  <style>
    /*这是span的注释*/
    span{
         font-size:30px;
         font-family:仿宋;
        }
    div{
         font-size:20px;
         font-family:宋体;
        }
    div{
      #one{
        color: red;
      }
        .lanse {
            color: #000000ff ;
          }
          * {
            margin:0;
            padding:0;
          }
    }
  </style> 
  <!--引用外部样式文件-->
  <link type="text/css" rel="stylesheet" href="yangshi.css">
 </head>
 <body>
`<span>
    这是第一个span的内容
  </span>
  <span>
    这是第二个span的内容
  </span>
  <div id="one" style="font-size: 40px;">
    这是第一个div的内容
  </div>
  <div id="second" class="lanse">
    这是第两个div的内容
  </div>
  <h1>标题标签</h1>
  <u1>
    <li>苹果</li>
    <li>香蕉</li>
    <li>橘子</li>
  </u1>`
<!--超链接anchor-->
  <a href="http://www.baidu.com">百度一下,你就知道</a>
  <!--同一文件夹下昨天的内容页-->
  <a href="网页.html">昨天的内容</a>
  <!--上一层文件夹下昨天的内容页-->
  <a href="../网页.html">昨天的内容</a>
  <a href="mailto:[email protected]">邮件地址</a>
  <a href="tel://12345678">电话</a>
  <div id="xiaoshuo">
    <p style="line-height:200%" align="left">
  在丛林沟壑之中,绵延盘旋着一条神秘的古道,它是世界上地势最高、山路最险、距离最遥远的古代商道——茶马古道,这是一条完全由马蹄和赶马人的一步一步趟出来的路,很多地段都是以羊肠小径的形式出现在陡峭的悬崖边上…… 
    </p>
``</div>
  <a href="#xiaoshuo">回到顶部</a>

 </body>
</html>

猜你喜欢

转载自blog.csdn.net/weixin_43805240/article/details/84566174
今日推荐