博客
关于我
强烈建议你试试无所不能的chatGPT，快点击我
Day14 HTML补充
阅读量：4614 次
发布时间：2019-06-09

本文共 10036 字，大约阅读时间需要 33 分钟。

一、认识前端

前端开发的核心语言：

  • html - 超文本标记语言 结构
  • css - 层叠样式表 样式
  • javascript - 脚本语言 行为
 双标记 双标签 
      标记 单标签

css的语法就是

属性名:属性值;

第一个HTML文件

            
              我是头                
      
       我是身体
View Code

a标签

    git

二、HTML模板

第一个网页

                  
              我是抬头                我是内容
View Code

HTML5之前的文档头声明

    
          Document
View Code

 HTML模板

    
          Document
View Code

HTML回顾

          
          Document        
      
       随便
View Code

CSS引入方式

          
          Document    
                  
              
      
    
      
    
      
    
      
    
我是p1
    
我是p2
    
我是H1
    
我是H2
View Code

1.css

div {
        width:100px;height:100px;background:green;}#box1 {
        width:300px;    height:350px;    background: blue;}.cla1 {
        width:200px;    height:200px;    background: yellow;}
View Code

前端项目目录结构

project_name|------img|------css|------js*.html

CSS基础样式

    
          Document
View Code

CSS基础样式border

    
          Document
View Code

CSS基础样式padding

    
          Document        
      
       培训
View Code

padding效果

    
          Document
View Code

空间大小的问题

    
          Document
View Code

CSS基础样式margin

    
          Document
View Code

margin的小性子

            
              Document
View Code

盒模型

    
          Document
View Code

三、CSS文本样式的设置

    
          Document        
      
       培训
View Code

line-height

    
          Document        
      
       我今天晚上吃炸酱面我今天晚上吃炸酱面我今天晚上吃炸酱面我今天晚上吃炸酱面我今天晚上吃炸酱面我今天晚上吃炸酱面我今天晚上吃炸酱面我今天晚上吃炸酱面我今天晚上吃炸酱面我今天晚上吃炸酱面我今天晚上吃炸酱面我今天晚上吃炸酱面我今天晚上吃炸酱面我今天晚上吃炸酱面我今天晚上吃炸酱面我今天晚上吃炸酱面我今天晚上吃炸酱面我今天晚上吃炸酱面我今天晚上吃炸酱面我今天晚上吃炸酱面我今天晚上吃炸酱面我今天晚上吃炸酱面我今天晚上吃炸酱面我今天晚上吃炸酱面我今天晚上吃炸酱面
View Code

text-align

    
          Document        
      
       培训
View Code

text-indent

    
          Document        
      
       前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端
View Code

font-weight

    
          Document        
      
       培训
View Code

font-style

    
          Document        
      
       培训
      
    培训
View Code

text-decoration

    
          Document        
      
       100元RMB
      
    蓝鸥科技
View Code

letter-spacing

    
          Document        
      
       I like html
View Code

复合样式

    
          Document        
      
       培训
View Code

font-family

font-family可以取的值宋体 SimSun黑体 SimHei微软雅黑 Microsoft YaHei微软正黑体 Microsoft JhengHei新宋体 NSimSun新细明体 PMingLiU细明体 MingLiU标楷体 DFKai-SB仿宋 FangSong楷体 KaiTi仿宋_GB2312 FangSong_GB2312楷体_GB2312 KaiTi_GB2312 宋体：SimSuncss中中文字体（font-family）的英文名称Mac OS的一些：华文细黑：STHeiti Light [STXihei]华文黑体：STHeiti华文楷体：STKaiti华文宋体：STSong华文仿宋：STFangsong儷黑 Pro：LiHei Pro Medium儷宋 Pro：LiSong Pro Light標楷體：BiauKai蘋果儷中黑：Apple LiGothic Medium蘋果儷細宋：Apple LiSung LightWindows的一些：新細明體：PMingLiU細明體：MingLiU標楷體：DFKai-SB黑体：SimHei新宋体：NSimSun仿宋：FangSong楷体：KaiTi仿宋_GB2312：FangSong_GB2312楷体_GB2312：KaiTi_GB2312微軟正黑體：Microsoft JhengHei微软雅黑体：Microsoft YaHei装Office会生出来的一些：隶书：LiSu幼圆：YouYuan华文细黑：STXihei华文楷体：STKaiti华文宋体：STSong华文中宋：STZhongsong华文仿宋：STFangsong方正舒体：FZShuTi方正姚体：FZYaoti华文彩云：STCaiyun华文琥珀：STHupo华文隶书：STLiti华文行楷：STXingkai华文新魏：STXinwei
View Code

四、常见标签及标签类型的转换

reset.css(去掉默认样式)

/*margin的样式初始化*/body,h1,h2,h3,h4,h5,h6,p,ul,ol,dl,dd{    margin:0;}/*padding的样式初始化*/ul,ol {    padding:0;}/*列表的样式初始化*/ul,ol,li {    list-style:none;}/*font-style的样式初始化*/em {    font-style: normal;}/*下划线的样式初始化*/a {    text-decoration: none;}
View Code

块属性标签

    
          Document    
          
           
      
       我是DIV
      
     
我是h1
     
我是h2
     
我是h3
     
我是h4
     
我是h5
     
我是h6
     
我是p
     
           
         我是P1         
                
            
    
      
            
           
  • 我是li 1
    •         
           
  • 我是li 2
    •         
           
  • 我是li 3
    •         
           
  • 我是li 4
    •     
          
    
      
            
           
  1. 我是li 1
    2.         
           
  2. 我是li 2
    3.         
           
  3. 我是li 3
    4.         
           
  4. 我是li 4
    5.     
          
    
      
        
       
        美女
       
        
       
        古代用来形容女子很漂亮
       
        
       
        打招呼
View Code

块标签的特性

    
          Document
View Code

内联属性的标签

    
          Document    
          
           
      
       我是div1
      
     
      
       我是div2
      
     
      
       我是div3
      
     
      
       我是div4
      
     我是span1我是span2 我比较宽我是span3     我是span4     
           我是strong1     我是strong2     我是strong3     我是strong4     我是em1     我是em2     我是em3     我是em4    链接到百度    我是A2    我是A3    我是A4    机器猫    机器猫    机器猫
View Code

标签类型的转换

    
          Document    
       
      
       1
      
 
      
       2
      
 span1 span2 
我是h2
 
我是h2
 
我是p标签
 
      
       我是DIV
View Code

五、样式布局

reset.css

/*margin的样式初始化*/body,h1,h2,h3,h4,h5,h6,p,ul,ol,dl,dd{
        margin:0;}/*padding的样式初始化*/ul,ol {
        padding:0;}/*列表的样式初始化*/ul,ol,li {
        list-style:none;}/*font-style的样式初始化*/em {
        font-style: normal;}/*下划线的样式初始化*/a {
        text-decoration: none;}/*BFC的方法*/.clear:after{
        content: "";display: block;clear: both;}clear {
        zoom:1;}
View Code

浮动是什么

    
          Document        
           
      
       我是DIV1
      
     
      
       我是DIV2
      
     
      
       我是DIV3
      
     
      
       我是DIV4
View Code

浮动的特性

    
          Document        
           
           
           
           
      
         
       
我是H2
View Code

BFC

    
          Document
View Code

提升层级半级

    
          Document        
      
       div1
      
    
      
       前端学习前端学习前端学习前端学习前端学习前端学习前端学习前端学习前端学习前端学习前端学习前端学习前端学习前端学习前端学习前端学习前端学习前端学习前端学习前端学习前端学习前端学习前端学习前端学习前端学习前端学习前端学习
View Code

定位

    
          Document        
      
        
       1        
       2        
       3        
       4
View Code

定位的属性及特性

    
          Document
View Code

三种定位的特性

    
          Document
View Code

定位和BFC

    
          Document        
      
        
       1        
       2        
       3        
       4
View Code

定位的例子

    
          Document
View Code

派生选择器

    
          Document        
           
      
         
       我是box1的span         
       我是box1的span         
       我是box1的span         
       我是box1的span     
      
     
      
         
       我是box2的span         
       我是box2的span         
       我是box2的span         
       我是box2的span
View Code

派生选择器的小例子

    
          Document
View Code

六、兼容性

reset.css

/*margin的样式初始化*/body,h1,h2,h3,h4,h5,h6,p,ul,ol,dl,dd{
        margin:0;}/*padding的样式初始化*/ul,ol {
        padding:0;}/*列表的样式初始化*/ul,ol,li {
        list-style:none;}/*font-style的样式初始化*/em {
        font-style: normal;}/*下划线的样式初始化*/a {
        text-decoration: none;}/*BFC的方法*/.clear:after{
        content: "";display: block;clear: both;}clear {
        zoom:1;}
View Code

兼容性到底是个什么玩意

    
          Document
View Code

兼容性1

    
          Document    
          
      
        
       
            
        
左侧
        
       
        
       
            
        
右侧
View Code

兼容性2

    
          Document
View Code

兼容性3

    
          Document
View Code

兼容性4

    
          Document
View Code

兼容性5

    
          Document
View Code

兼容性6

    
          Document
View Code

兼容性7

    
          Document
View Code

兼容性8

    
          Document    
          
      
        
       
        1
       
        
       
        2
       
        
       
        3
       
        
       
        4
View Code

兼容性9

    
          Document    
          
      
            
           
  •                                 
    •         
           
  •                                 
    •         
           
  •                                 
    •
View Code

兼容性10

    
          Document    
          
      
            
           
  •                                 
    •         
           
  •                                 
    •         
           
  •                                 
    •
View Code

兼容性11

    
          Document    
          
      
        
       
        1
       
        
       
        2
       
        
       
        3
       
        
       
        4
       
        
       
        1
       
        
       
        2
       
        
       
        3
       
        
       
        4
View Code

兼容性12

    
          Document    
          
      
        
       
        
               
       
            
                    
                
       
                
       
        老白是个大胖子
View Code

兼容性13

    
          Document
    View Code

    兼容性14

        
              Document
    View Code

    兼容性15

        
              Document
    View Code

    兼容性16

        
              Document
    View Code

    兼容性17

        
              Document
    View Code

    兼容性18

        
              Document
    View Code

    兼容性19

        
              Document
    View Code

    兼容性20

        
              Document
    View Code

    转载于:https://www.cnblogs.com/icsnow/p/5900565.html

    你可能感兴趣的文章
    运维派 企业面试题1 监控MySQL主从同步是否异常
    查看>>
    Docker 版本
    查看>>
    poj 1753 Flip Game
    查看>>
    在深信服实习是怎样的体验（研发测试岗）
    查看>>
    Linux免密码登陆
    查看>>
    SpringMVC中文件的上传（上传到服务器）和下载问题（二）--------下载
    查看>>
    Socket & TCP &HTTP
    查看>>
    osip及eXosip的编译方法
    查看>>
    Hibernate composite key
    查看>>
    [CF Round #294 div2] D. A and B and Interesting Substrings 【Map】
    查看>>
    keepalived+nginx安装配置
    查看>>
    我的2015---找寻真实的自己
    查看>>
    android编译遇到问题修改
    查看>>
    解决Ubuntu18.04.2远程桌面Xrdp登录蓝屏问题
    查看>>
    python_封装redis_hash方法
    查看>>
    Git的安装和使用教程详解
    查看>>
    lsof命令详解
    查看>>
    常用模块，异常处理
    查看>>
    父窗口与子窗口之间的传值
    查看>>
    eclipse 找不到 tomcat 的解决方案
    查看>>
    喝酒易醉，品茶养心，人生如梦，品茶悟道，何以解忧？唯有杜康！-- 愿君每日到此一游！
    当前时间: 2024-10-19 21:39:45   当前IP: 3.129.26.204   联系邮箱:javaeecc@qq.com     Copyright © 2020 - 2022 baihongyu.com 京ICP备2021015314号-2
    强烈建议你试试无所不能的CHAT-GPT，快点击我
    强烈建议你试试无所不能的CHAT-GPT，快点击我