码迷,mamicode.com
首页 > Web开发 > 详细

HTML和CSS

时间:2019-01-15 19:04:13      阅读:212      评论:0      收藏:0      [点我收藏+]

标签:一个个   千万   pre   锚点   后台   特定   sel   解析   建立   

前端概念:
  广义:用户能看见并且交互的展示界面
  狭义:运行在浏览器上的页面

学习的语言:
  HTML5 =>(h5架构 + CSS布局 + JavaScript逻辑)
  网页编写 | 移动端编写 | (客户端编写)
  前后台分离 开发方式 =>通过接口完成数据交互 => 后台可以千千万,前端就是h5

一:HTML:超文本标记语言

学习HTML的目的:完成页面结构的搭建(什么时候用什么标签)
HTML属于标记语言:标记语言为非编程语言,不具备编程语言具备的程序逻辑

HTML三大组成:
标签:被尖括号包裹,由字母开头包含合法字符的,可以被浏览器解析的标记
    eg:系统标签,自定义标签
指令:被尖括号包裹,由!开头的标记。
    eg:<!doctype html> <!-- -->
转义字符:被&与;包裹的特殊字母组合或#开头的的十进制数。
    eg:&#60; &#62; &nbsp;
    

  1.1标签

标签的概念:被<>包裹由字母开头,可以结合合法字符(-|数字),能被浏览器解析的特殊符号
标签具有特定的功能:换行 | 设置页面字符编码集 | 控制文本字体颜色与大小 | 加载图片与视频
注意:标签都有头有尾,用/来标识标签的结束(用来标识尾)

  1.2页面

<!-- html的注释: 一个html页面有且只有一个页面模板 -->
<html>
    <head>
        <!-- 字符编码 -->
        <meta charset="utf-8">
        <!-- 页面标签的标题 -->
        <title>页面</title>
        <!-- 内部或外部的css样式 | js脚本 | 页面其他设置 -->
    </head>
    <body>
        <!-- 所有页面显示的内容: 文本 | 图片 | 视频 | 超链接 | 表格 | 表单 ... -->
        <!-- js脚本 -->
    </body>
</html>

  1.3常用标签

目的:使用标签的语义与功能 | 完成页面架构的搭建(div)
1.div:“三无”,无语义,无功能,无样式,完成页面架构的搭建
2.h1:页面总标题,代表页面“整体含义”,出现一次即可
3.列表:ul>li*5
4.p:段落标签
5.img:图片标签,src(数据源),alt(资源加载失败的文本提示)
6.a:超链接标签,href(超链接地址),target(跳转方式_self | _blank:_self是在本页面跳转,_blank是跳转打开新页面),锚点
7.常用的文本类标签:span ,i (斜体), b (加粗) 

二:CSS层级样式表

学习CSS的目的:完成页面布局(还原设计稿)
三大组成部分:
    选择器:由标签、类、ID 单独或组合出现
    作用域:一组大括号包含的区域
    样式块:满足CSS连接语法的众多样式

  2.1选择器

  用来将CSS与HTML建立关联的桥梁,称之为CSS选择器
  将原来出现在标签内部的样式分离开来,可以用一个个选择器加以管理,达到页面与样式的解耦合目的,从而提高代码的复用性与开发效率
  本质:就是页面标签的各种名字

  2.2CSS三种引入方式

1.行间式
    i)写在标签的style属性中
    ii)属性与属性值间用:赋值
    iii)属性与属性之间用;隔开
2.内联式
    i)写在style标签中(style标签一般出现在head标签中)
    ii)用选择器与HTML建立连接
    iii)样式块书写在作用域内
3.外联式
    i)CSS样式完全与HTML文件脱稿,形成单独的.css文件,样式书写在.css文件中
    ii)用选择器与HTML建立连接
    iii)样式块书写在作用域内
    iv)要将.css文件与.html文件建立关联 => <link rel="stylesheet" href="css文件的相对路径">

注:选择器的应用场景在内联式与外联式

总结:
开发:最常用的是外联式,内联与行间辅助样式布局
测试:内联式,可读性最强,且解耦有复用性
行间的应用场景:最简单粗暴,js操作的样式都是行间式

 

HTML和CSS

标签:一个个   千万   pre   锚点   后台   特定   sel   解析   建立   

原文地址:https://www.cnblogs.com/liuxiaolu/p/10273598.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!