HTML基础第一课(div,span标签,选择器,文本样式)

一、按键

tab键 是缩进键
command + N 是新建文件
command + S 是保存文件
command + / 是注释
command + shift + p 启动插件入口

知识体系
html(页面结构)
css(样式布局)
JS(基本语法)
Jquery(AJax)

浏览器种类
主流浏览器(遵从行业标准,行业规范支持网页开发相关技术)
  chrome(webkit)
  safari
  火狐
  opera
  IE(9--11,edge)
非主流浏览器
    遨游
    猎豹
    QQ
    360(IE内核,webkit内核,双内核浏览器)
    百度

二、HTML

超级文本标记语言


标记分两种:单标记 双标记 
标记的特点:要闭合 大小写不敏感  有属性  有块级 行级区分
单标记语法<标记名 属性名=“属性值”/>
双标记语法<标记名 属性名="属性值">后标记名>

html模板
1:版本控制
2:html文档区域
3:文档包含头部(head)和身体(body)
4:头部包含编码格式(meta utf-8)和标题(title)


文本格式必须为html为后缀

三、div和span标签




<html lang="en">

<head>

    <meta charset="utf-8">
    <title>哈哈哈哈title>
head>
<body>
 
 
 <div style="border: 1px red solid;">我是div1div>
 <div>我是div2div>
 <div>我是div3div>
 <div>我是div4div>
 
 <span style="border: 10px gold solid">我是sapn1span>//实线
 <span style="border: 5px red dashed">我是sapn2span>//虚线
 <span style="border: 5px blue dotted;">hahhahahspan>//点状线
 <span>我是sapn3span>
 <span>我是sapn4span>
<div>1div>
 <span style="border-top: 1px red solid;border-bottom: 2px blue dashed;border-right: 3px yellow dotted;border-left: 4px green solid" >边界宽度设置span>
 <span style="border-color:red ">边界宽度设置2span>
 <span>边界宽度设置3span>
 <span>边界宽度设置4span>
 <span>测试1span>
 <span>测试1span>
 <span>测试1span>

body>
html>

四、选择器

1.标签选择器

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>选择器title>
    <style>
        /*基础选择器-标签选择器*/
        /* tags{}*/

      /*优点:不需要给标签起名称(打标记),保证标签的纯净性
      缺点:样式影响面太广,容易干扰其他标签。*/
     div{
        border: 1px red solid;

     }
     span{
        border: 2px blue dashed;
     }
    style>
head>
<body>
    <div>woshi divdiv>
    <div>woshi div1div>
    <span>woshi span1span>
    <span>woshi span2span>
body>
html>

2.id选择器

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>选择器title>
    <style>
        /*基础选择器-id选择器*/
        /* #id名称{}*/
        /*特点:唯一性*/
        /*优点:可以逐个标记,互相的样式的不影响*/
        /*缺点:唯一性,冗余代码多*/
        /*使用场景:JS钩子*/
     #liergou{
       border: 3px red solid;
     }
     #wangdamao{
       border: 10px black dashed;
     }
     #datupiaozi{
      border: 6px gold dotted;
     }
    style>
head>
<body>
    <div id="liergou">我是div1div>
    <div id="wangdamao">我是div2div>
    <div id="datupiaozi">我是div3div>
    
    <span >我是spanspan>
body>
html>

3.类选择器

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>选择器title>
    <style>
        /*基础选择器-类选择器*/
        /* #class名称{}*/
        /*一个标记可以起多个class名,建议不超过7个*/
        /*优点:可以减少代码冗余量,把相同样式的标记总结在一起*/
        /*缺点:会略微的破坏html结构*/
        /*solid */
      .hongse{
        border: 3px red solid;
      }
      .wangermazi{
        border: 5px gold dotted;
      }
      .lanse{
        border: 3px blue solid; 
         }

    style>
head>
<body>
    <div class="hongse wangermazi" >我是div1div>
    <div class="hongse" >我是div2div>
    <div class="lanse">我是div3div>
  <div class="hongse">我是div4div>  
body>
html>

4.后代选择器

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>选择器title>
    <style>
        /*基础选择器-后代选择器*/
        /* 语法:
        选择器 选择器...{

          }
          */
        /*优点:*/
        /*缺点:*/

    #div1 .div5{
      border: 1px red solid;
    }

    style>
head>
<body>
    <div id="div1">
    <div>我是div1
    <div>
      <div>
        <div class="div5">woshidiv5div>
      div>
    div>div> 
    <span>我是span1span>
  div>
body>
html>

5.选择器优先等级

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>选择器优先级title>
    <style>
        /*选择器优先级*/
        /*1:标签(名)选择器*/
        /*2:id选择器*/
        /*3:class选择器*/
        /*4:后代选择器*/

        /*优先级*/
        /*1:相同选择器,样式冲突的情况下,后面覆盖前面*/

   /*标签名选择器优先级是1*/
   /*类选择器优先级是10*/
   /*id选择器优先级是100*/
   /*style行间样式优先级是1000*/

    div{
        border: 5px black solid;
    }
    body div{
        border: 10px yellow solid;
    }
    body div{
        border: 3px red solid;
    }
    .div1{
        border: 10px purple solid;
    }
    style>
head>
<body>
    <div id="div1" class="div1">1div>
body>
html>

五、引入css方式


<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Documenttitle>
    
    <link rel="stylesheet"  href="index.css">
head>
<body>
    <div>我是divdiv>
body>
html>
css:
div{
    border: 10px red solid;
}

五、文本样式


<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>文本样式title>
    <link rel="stylesheet" type="text/css" href="index.css">
head>
<body>




    <div>我是divdiv>

body>
html>

css:
div{
    border: 1px red solid;
    width: 400px;
    height: 400px;
    color: yellow;
    text-align: center;
    font-size:20px;
    text-decoration: none;
}

你可能感兴趣的:(HTML)