07Html、CSS-2018/07/17

  • 1.HTML是用来描述网页的一种标记语言,是一套标记标签。HTML用使用标记标签来描述网页。超文本 标记语言。
  • 2.格式
    • <html>
      <head>
      <title> "我的第一个HTML网页"</title>
      </head>
      <body>
      正文:<font color="red" size="5">包子</font>
      <br/>大家很高兴 </body>
      <html>
    • 结构:head包括咨询信息,整个页面的属性,指导浏览器解析的标签,引入外部文件的标签。 body要展示的信息
    • 标签是以尖括号包裹关键字成对出现,有开始有结束,支持正确的嵌套。
    • 标签属性 属性 = “属性值”多个属性用空格隔开。
    • 空标签 功能比较单一 <br></br>相当于<br/>
    • 不区分大小写,但建议小写
  • 3.基本标签

    • A:文件标签(结构标签)

      • 根标签
      • 页面的标签
      • 内容 属性:text-文本的颜色 bgcolor-背景颜色 background - 背景图片
      • 颜色 (1)单词 (2)rgb三原色:reg(0,0,0) 0-225 (3)#000000 #ffffff #325678 十六进制
    • B:排版标签
      • (1)注释标签<!--  -->
      • (2)换行标签<br>
      • (3)段落标签<p>文本文字</p>

        特点:段与段之间有空行 ( 空格)
        属性:align 对齐方式 left center right

      • (4)水平线标签<hr/>
        • 属性:width 长度 size 粗度 color 颜色 align 对齐方式
        • 尺寸的写法:像素 10px 百分比 50%
        • 区别 百分比会随着副标签的大小进行变化
    • C:块标签
      • div 行级块标签,占据一行
      • span 行内块标签
      • 作用 div:div+css布局 span:进行友好提示
    • D:文字标签(结构标签)
      • <font> 属性:color颜色 size大小(最大值为7,最小值为1,默认值3) face字体类型
      • 标题标签:是依次减小,默认字体加粗,内置字号,默认占据一行<h1>~<h6>
    • E:清单标签(自己加尖括号)
      • 无序列表:ul 属性:type:disc(黑色小圆点)square(方块)circle(空心圆)
        li : 列表项
      • 有序列表:ol 属性:type="1"/"A"/"a"/"i"/"I" start数字,代表首项开始的标记
    • F:图形标签
      • img src:图形的地址 width:宽度 height:高度 border:边框 align:对齐方式代表图片与相邻文本的相对位置(top,middle,bottom) alt:图片的文字说明
      • <img src="data:images/1.jpg" width="10%" height = "13%“/>
    • G:链接标签 a
      • 属性 herf跳转页面的地址 name名称 锚点
        target _selt自己的页面打开,默认 _blank在空白页打开
      • 作用:
        • (1)页面跳转 注意:访问互联网上的资源,前面必须加协议http://
        • (2)锚点访问 herf在访问锚点时书写格式#name的值
        • <a herf="http://www.baidu.com" target = "_blank">点击我吧哈哈</a>
    • H.表格标签table
    • 属性:border表格边框 width表格宽度 align表格对齐方式 bgcolor背景颜色
    • tr代表行
    • th加粗
    • td代表单元格 属性:colspan行合并 rowspan列合并
    • caption表格的标题
    • 作用(1)实现一个表格(2)进行布局分块加载用户体验比较好
    • <table border="1" width = "50%" align = "center" bgcolor="yellow">
      <caption>19成绩单元表</caption>
      <tr align="center">
      <th>1--1</th>
      <th>1--2</th>
      <th>1--3</th>
      </tr>
      <tr align="center">
      <td rowspan="2">2--1</td>
      <td colspan="2">2--2</td>
      </tr>
      <tr align="center">
      <td>3--2</td>
      <td>3--3</td>
      </tr>
      </table>
  • 4.表单标签(form和table一起用时先写form)
    • form标签

      • 属性:name表单名称 action提交的路径地址 method提交方式:get/post
      • get和post的区别:get提交数据加在地址栏的后边,格式?name=value&name=value;而post提交将数据封装在请求体中。get提交相对不安全,post提交相对安全。get提交有大小限制,根据浏览器不同而不同。post不限制大小。
    • input标签
      • 属性:type根据该值不同会显示不同功能表单项
      • text普通的文本输入框
      • password密码输入框,会掩码
      • radio单选按钮(checked代表被默认选中)注意:如果想让一组单选按钮互斥,必须属性name相同
      • checkbox复选框 (同上一个属性)
      • file上传文件
      • button普通按钮,没有任何内置功能
      • submit提交按钮,点击表单按照action地址进行提交
      • reset重置按钮,点击会将表单清空
      • image图片按钮,点击表单按照action地址进行提交,属性src,alt
      • hidden隐藏表单,服务端需要但是不需要用户看到
    • select标签
      • name:表单项的名称
      • option:代表一个选择项,属性:value,selected默认被选中的项
    • textarea文本域标签
      • cols列数 rows行数 注意默认文本值在标签体当中,两个尖括号之间
  • 5.HTML框架标签
    • frameset属性:

      • cols按列分 rows按行分 划分格式 rows="120,*,120", *代表剩余
    • frame 属性:
      • name名称,方便target根据name值进行定位
      • src:加载页面的路径
  • 6.其他标签(自己加<>)
    • meta
    • link href:引入css文件中的地址
    • script src:js的文件地址
  • 7.特殊字符
    • &nbsp空格
    • &gt大于号
    • &lt小于号
    • &copy版权符号
    • &Reg 注册符号
  • 8.css简介
    • 层叠样式表:层层覆盖叠加,样式有冲突的应用优先级高的。css是对HTML进行样式修饰语言
    • 作用:
      • 修饰HTML
      • 提高样式代码的复用性
      • HTML的内容与样式相离,便于后期维护
    • css的引入方式和书写规范
      • 内嵌样式是把css的代码嵌入到HTML标签中(不建议使用这种)

        • <div style ="color:red;font-size:10px;">你好啊,小朋友</div>
        • 语法:(1)使用style属性将样式嵌入(2)属性:属性值(3)多个用属性用;分开
      • 内部样式:在head标签中用style标签进行css的引入
        • 语法:(1)使用style标签进行css的引入。属性:type告知浏览器使用css解析器去解析(2)属性:属性值(3)多个用属性用;分开
        • <style type ="text/css"> div{color:red;font-size:50px} </style>
      • 外部样式:将css样式抽取成一个单独css文件
        • < link rel="stylesheet" type = "text/css" href="testcss.css"/>
        • 语法:
          • (1)创建css文件,将css属性写在css文件中
          • (2)在head中使用link标签进行引入。rel:代表要引入的文件与HTML的关系;type:告知浏览器使用css解析器去解析;href:css的文件地址
          • (3)属性:属性值
          • (4)多个用属性用;分开
    • @import
      • <style type ="text/css"> @import url("css地址"); </style>
    • 与Link的区别
      • (1)link所有浏览器都支持,import部分低版本IE不支持
      • (2)import方式是等待HTML加载完毕之后在加载
      • (3)import不支持js的动态修改
  • 9.css的选择器
    • 基本选择器

      • 元素选择器 (优先级最低)

        • 语法:HTML标签名(css属性)
        • <span>hello css!!</span>
          <style type ="text/css">
          span{color:red;font-size:10px}
          </style>
        • id选择器 (优先级最高)

          • 语法:#id的值{css属性}
          • <div id= "div1">hellocss</div>
            <div id= "div1">hellocss</div>
            <style type ="text/css">
            #div1{background-color:red;}
            #div2{background-color:pink;}
            </style>
        • class选择器

          • 语法:.class的值
          • <div class= "style1">div1</div>
            <div class= "style2">div2</div>
            <div class= "style2">div3</div>
            <style type ="text/css">
            .style1{background-color:red;}
            .style2{background-color:pink;}
            </style>
             
        • 属性选择器
          • 语法:基本选择器[属性=‘属性值’]{CSS属性}
          • input[type='text']{background-color :yellow}
        • 伪元素选择器
          • a标签的伪元素选择器
          • 语法:静止状态a:link{css属性},悬浮状态a:hover{css属性},触发状态a:active{css属性},完成状态a:visited{css属性}
          • <a href="#">点击我吧</a>
            a:link{color:blue}
            a:hover{color:red}
            a:active{color:yellow}
            a:visited{color:green}
        • 层级选择器
          • 语法:父级选择器(空格)子级选择器 ....

* <html>:根标签 * <head>  <title>页面的标签 * <body>内容属性:text-文本的颜色 bgcolor-背景颜色 background - 背景图片 * 颜色  (1)单词  (2)rgb三原色:reg(0,0,0) 0-225 (3)#000000  #ffffff #325678 十六进制

07Html、CSS的更多相关文章

  1. javascript 框架、根基技巧、布局、CSS、控件 JavaScript 类库

    预筹备之 JavaScript 今朝支流的 JavaScript 框架排名中,jQuery 和 Ext 可算是佼佼者,得到了用户的普遍好评.海内的一些框架许多也是模仿 jQuery 对 JavaScr ...

  2. HTML、CSS、JS对unicode字符的不同处理

    unicode字符的不同表示法 unicode字符在html.css和js中的表示方法均不相同,下面分别作介绍. 原文发表于这里 css表示法 首先来一段很常见的bootstrap的字体图标代码: . ...

  3. 这些HTML、CSS知识点,面试和平时开发都需要 No1-No4

    系列知识点汇总 这些HTML.CSS知识点,面试和平时开发都需要 No1-No4(知识点:HTML.CSS.盒子模型.内容布局) 这些HTML.CSS知识点,面试和平时开发都需要 No5-No7(知识 ...

  4. nodejs处理图片、CSS、JS链接

    接触Nodejs不深,看到页面上每一个链接都要写一个handler,像在页面显示图片,或者调用外部CSS.JS文件,每个链接都要写一个handler,觉得太麻烦,是否可以写个程序出来,能够自动识别图片 ...

  5. 新手理解HTML、CSS、javascript之间的关系

    http://www.cnblogs.com/dreamingbaobei/p/5062901.html 工作多年,一直忙忙碌碌的应用各种技术,现在不忙了,问问自己究竟在做什么,究竟会什么竟答不上来, ...

  6. Web编程基础--HTML、CSS、JavaScript 学习之课程作业“仿360极速浏览器新标签页”

    Web编程基础--HTML.CSS.JavaScript 学习之课程作业"仿360极速浏览器新标签页" 背景: 作为一个中专网站建设出身,之前总是做静态的HTML+CSS+DIV没 ...

  7. 新手程序员随笔2——初识html、css和javascript

    翻看博客,发现好久木有发blog了.纠其原因,一则是近来工作上卡到了一个编程难题,我是一个单线程的小猿,当我手头有事情做的时候,我不想分心去做其它事情,如写blog.二则是我个人的写作能力不佳,想到写 ...

  8. js、css引用文件的下载方式

    js.css引用文件的下载方式 一.测试(chrome):1.直接使用<script...>.<link...>标签来混合引入脚本文件和css文件, <script as ...

  9. 使用Maven构建Java Web项目时,关于jsp中引入js、css文件路径问题。

    今天有点闲,自己动手搭建一个Java Web项目,遇到jsp中引入js.css文件时路径不正确的问题,于是在网上查阅了很多资料,最终都无法解决问题,于是,上stackoverflow找到了解决方法,这 ...

随机推荐

  1. 容器HashMap原理(学习)

    一.概述 基于哈希表的 Map 接口的非同步实现,允许使用 null 值和 null 键,不保证映射的顺序 二.数据结构 HashMap实际上是一个“链表散列”的数据结构,即数组和链表的结合体:Has ...

  2. ubuntu 截图工具 Shutter,设置快捷键 Ctrl+Alt+A

    系统设置 键盘 快捷键 自定义快捷键

  3. 【Silverlight】Bing Maps学习系列(七):使用Bing Maps的图片系统(Tile System)

    [Silverlight]Bing Maps学习系列(七):使用Bing Maps的图片系统(Tile System) 目前包括微软必应地图在内的几乎所有在线电子地图(如:Google Maps等)都 ...

  4. Handle/Body pattern(Wrapper pattern)

    Handle Body Pattern 一些设计模式,通过一系列非直接的间接的方式(这种间接的方式,可称其为 handle(把手)),完成接口与实现(实现可称为 body(主体))的分离 Handle ...

  5. luogu 3952 时间复杂度

    noip2017 D1T2 时间复杂度 某zz选手考场上写了1.5h 考完之后发现自己写的是错的 但是结果A了??? 题目大意: 一种新的编程语言 A++ 给出一个程序只有循环语句 并给出这个程序的时 ...

  6. RDA CoreDump 实例

    UMF进程的Coredump问题追踪: 通河code开机DUMP问题 现象: 开机Dump,原因:_MAINAPP_SW_Init()调用了Factory_Ver_Debug()内存溢出. 分析流程: ...

  7. 模块化编程:AMD规范

    目前,通行的Javascript模块规范共有两种:ComonJS和AMD. CommonJS node.js的模块系统,就是参照CommonJS规范实现的.在ConmonJS中,有一个全局方法requ ...

  8. linux下的zookeeper启动

    zookeeper的安装目录:/usr/local/zookeeper-3.4.6/bin/zkServer.sh; 配置文件路径:../conf/zoo.cfg 端口 :2181: ZooKeepe ...

  9. PHP面向对象技术(全面讲解)

    作者:高洛峰    来源:<PHPer>杂志 1.面向对象的概念      面向对象编程(Object Oriented Programming, OOP, 面向对象程序设计)是一种计算机 ...

  10. selenium3.4.3 + python3.6 + HTMLTestRunner0.8.0

    HTMLTestRunner下载地址:http://tungwaiyip.info/software/HTMLTestRunner.html.该页面下载的HTMLTestRunner默认支持pytho ...