zoukankan      html  css  js  c++  java
  • HTML与CSS学习笔记(1)

    1、web三大核心技术?
    HTML
    CSS
    JavaScript

    2、HTML基本机构和属性
    HTML:超文本 标记 语言

    超文本:文本内容+非文本内容(图片、视频、音频等)

    标记:<单词>

    语言:编程语言

    标记也叫做标签:
    <header>
    <footer>
    写法分为两种:
    单标签:<header>
    双标签:<header></header>

    创建标签的快捷键:tab+单词-><单词>

    标签可以上下排列也可以嵌套。

    HTML常见标签:http://www.xuanfengge.com/funny/html5/element/

    标签的属性:来修饰标签的,设置标签当前的功能。
    <标签> 属性="值"

    3、HTML初始代码:

    每个.html文件都有的代码叫做初始代码,要符合html文件的规范写法

    !+tab键:可以快速创建html的初始代码:

    <!DOCTYPE html> 文档声明:告诉浏览器这是一个html文件
    <html lang="en"> html文件的最外层标签,包裹着所有html标签的代码 lang="en"表示是一个英文网站;lang="zh-CN"表示是一个中文网站。
    <head> 输入网址的地方通常叫做head
    <meta charset="UTF-8"> 元信息:是编写网页中的一些辅助信息(该语句表示采用国际编码,在网页上使用不同语言而不至于出现乱码情况)
    <title>Document</title> 凡是跟页面头部有关系的标签都写在<head>标签里面(设置网页的标题)
    </head>
    <body>
    显示网页内容的区域
    </body>
    </html>

    4、html注释:

    写法:<!--注释的内容--> 在浏览器中看不见,在代码中可以看见

    意义:
    1、可以先注释不用的代码,方便之后的使用
    2、对开发人员进行提示

    快速添加注释与取消注释:
    1、ctrl+/
    2、shift+alt+a

    5、标题与段落?

    标题->双标签:<h1></h1>.....<h6></h6>

    在一个页面当中,h1标签最重要,并且一个.html文件中只能出现一次h1标签

    h5、h6标签在网页中不常使用

    段落:双标签:<p></p >

    6、文本修饰标签:

    强调:双标签:<strong></strong>

    区别:1、写法与展示效果是有区别的:一个加粗一个斜体
    2、strong的强调型较强,em较弱

    下标:<sub></sub>
    上标:<sup></sup>

    删除文本:<del></del>
    插入文本:<ins></ins>
    一般情况下删除文本都是和插入文本配合使用的

    7、图片标签

    img:单标签
    src:引入图片的地址
    alt:当图片出现问题的时候可以显示一段友好的文字
    title:提示信息
    widthheight:图片的大小

    8、路径的引入?

    绝对路径
    相对路径

    9、链接标签?

    a:双标签<a></a>
    href属性:链接的地址
    target属性:可以改变链接的打开方式,默认方式为:在当前页面打开_self 新窗口打开_blank

    base:单标签:作用是改变链接的默认行为

    10、跳转锚点?

    两种做法:
    1、#号+id属性
    2、#号+name属性(注意name属性加给的是a标签)

    11、特殊字符?

    1、&+字符
    2、解决冲突啊,比如做有尖括号的冲突,添加多个空格
    3、&lt;(左尖括号);&gt;(右尖括号);&nbsp;(空格)

    12、列表标签?

    1、无序列表:ul li 符合嵌套的规范,ul与li必须是相邻的中间不可以有其他标签
    2、有序列表:ol li 一般用的比较少,可以用无序列表来替代
    3、定义列表:dl dt dd 列表项需要添加标题和对标题进行描述的内容

    注:列表之间可以互相嵌套,形成多层级的列表。

    13、表格标签

    table、tr、th、td、caption等

    注:他们之间是有嵌套关系的,要符合嵌套规范。

    语义化标签:thead、tbody、tfoot

    注:在一个table中、tbody可以出现多次,但是thead和tfoot只能出现一次

    align:left、center、right
    valign:top、middle、bottom
    拿到一个表格先观察有多少行,和多少列;一个tr便签表示一行,第一个tr标签(即第一行)里面的th标签是各列的标题;
    tr标签里面的th标签或者td标签的个数决定了列数;之后再考虑合并行和列的问题。(可以这样记td是"弟弟"所以是非标题)

    *关于合并行列的问题:合并行用rowspan="x";x表示合并的行数,注意合并行和列都是在合并行组合中的第一个单元格里面写rowspan或指责colspan;合并列用colspan="x";x表示合并的列数;具体操作见练习
    *多说一点:①一对tr标签表示一行;②没对tr标签里面的th或者td标签的对数决定列数;
    ③合并行时,要在不同的tr标签对(即在不同的行内操作)里面,删除需要合并的th或者td标签,并在第一个元素里添加colspan属性。
    ④合并列时,只需要在同一对tr标签里面,删除需要合并的th或者td标签,并在第一个元素里添加colspan属性

    14、表单标签?
    form、input、textarea、select、label.....
    input:单标签,有一个type属性决定是什么控件
    还有一些常见的属性:
    checked、disabled、name....(表格里面嵌套表单时,要注意表格的嵌套规则,表单没有嵌套规则)

    15、div与span?
    div:做一个区域划分的块
    span:对文字进行修饰的,内嵌

    16、CSS语法基础?
    格式:
    选择器{属性1:值1;属性2:值2} 最后一组属性可以不写样式

    width:宽;
    height:高;
    background-color:背景色

    长度单位:
    1、px->像素
    2、%->百分比
    外容器1->600px 当前容器 50%->300px
    外容器2->400px 当前容器 50%->200px

    css注释:
    /* css注释 */

    17、CSS样式的引入方式?
    1、内联样式(也叫行内样式,通过在标签内添加style属性来添加样式)
    style属性
    2、内部样式
    style标签
    区别:
    内部样式的代码可以复用,符合W3C的标准,让结构和样式分开处理
    3、外部样式
    引入一个单独的css文件,name.css

    通过link标签引入外部资源,rel属性指定资源跟页面的关系,href属性指定资源的地址
    通过@import的方式引入外部样式,这种方式有很多问题,不建议使用

    18、css中的颜色表示法?
    1、单词表示法:red、blue.....

    2、16进制表示法:

    3、rgb三原色表示法:
    rgb(255,255,255)
    取值范围为0-255

  • 相关阅读:
    烧写NAND Flash时出现错误:*** Warning bad CRC or NAND, using default environment
    在ubuntu下如何验证文件的MD5码
    条件编译#ifdef MACRO_A和#if defined(MACRO_A)的区别
    用nmap获取ip和mac地址
    rcS中启动udevd
    ubuntu下minicom不能接受键盘输入
    ios audioqueue 流播放接口
    ffmpeg 0.8.11 VC编译的SDK已经发布
    lua 字符串数学表达式运算
    ffmpeg 0.8.11 VC编译的SDK已经发布
  • 原文地址:https://www.cnblogs.com/AhuntSun-blog/p/11982404.html
Copyright © 2011-2022 走看看