　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的更多相关文章

javascript 框架、根基技巧、布局、CSS、控件 JavaScript 类库
预筹备之 JavaScript 今朝支流的 JavaScript 框架排名中,jQuery 和 Ext 可算是佼佼者,得到了用户的普遍好评.海内的一些框架许多也是模仿 jQuery 对 JavaScr ...
HTML、CSS、JS对unicode字符的不同处理
unicode字符的不同表示法 unicode字符在html.css和js中的表示方法均不相同,下面分别作介绍. 原文发表于这里 css表示法首先来一段很常见的bootstrap的字体图标代码: . ...
这些HTML、CSS知识点，面试和平时开发都需要 No1-No4
系列知识点汇总这些HTML.CSS知识点,面试和平时开发都需要 No1-No4(知识点:HTML.CSS.盒子模型.内容布局) 这些HTML.CSS知识点,面试和平时开发都需要 No5-No7(知识 ...
nodejs处理图片、CSS、JS链接
接触Nodejs不深,看到页面上每一个链接都要写一个handler,像在页面显示图片,或者调用外部CSS.JS文件,每个链接都要写一个handler,觉得太麻烦,是否可以写个程序出来,能够自动识别图片 ...
新手理解HTML、CSS、javascript之间的关系
http://www.cnblogs.com/dreamingbaobei/p/5062901.html 工作多年,一直忙忙碌碌的应用各种技术,现在不忙了,问问自己究竟在做什么,究竟会什么竟答不上来, ...
Web编程基础--HTML、CSS、JavaScript 学习之课程作业“仿360极速浏览器新标签页”
Web编程基础--HTML.CSS.JavaScript 学习之课程作业"仿360极速浏览器新标签页" 背景: 作为一个中专网站建设出身,之前总是做静态的HTML+CSS+DIV没 ...
新手程序员随笔2——初识html、css和javascript
翻看博客,发现好久木有发blog了.纠其原因,一则是近来工作上卡到了一个编程难题,我是一个单线程的小猿,当我手头有事情做的时候,我不想分心去做其它事情,如写blog.二则是我个人的写作能力不佳,想到写 ...
js、css引用文件的下载方式
js.css引用文件的下载方式一.测试(chrome):1.直接使用<script...>.<link...>标签来混合引入脚本文件和css文件, <script as ...
使用Maven构建Java Web项目时，关于jsp中引入js、css文件路径问题。
今天有点闲,自己动手搭建一个Java Web项目,遇到jsp中引入js.css文件时路径不正确的问题,于是在网上查阅了很多资料,最终都无法解决问题,于是,上stackoverflow找到了解决方法,这 ...

随机推荐

BZOJ 1055 区间DP
1055: [HAOI2008]玩具取名 Time Limit: 10 Sec Memory Limit: 162 MBSubmit: 1144 Solved: 668[Submit][Statu ...
RDA 互斥锁的使用
在多线程下,在同一时间内,可能有多个线程在操作.如果没有同步机制,那么很难保证每个线程操作的正确性. 1.互斥锁概念: 互斥锁提供一个可以在同一时间,只让一个线程访问临界资源的的操作接口.互斥锁(Mu ...
830C
分块+二分这道题思路很巧妙我们大概可以推出一个式子sigma(d-[(ai-1)%d+1])<=k,要求求出d的最大值然后我们化简一下,sigma(d-[(ai-1)-[(ai-1)/d] ...
使用Java实现图像分割
为减少动画制作过程中的IO操作,我们可以使用连续动画来改善动画播放效率.如果我们对图像中的每张小图像单独分割成独立的文件,那么当每次要使用这些小图像的时候,我们都得从文件中读取图像信息. 实际上我们可 ...
3-1 vue生存指南 - todolist实现-数据渲染
由于Vue.js作者是中国人,会说汉语,所以国内生态会更好一点.Vue.js作者是尤雨溪,
js滚轮事件需要注意的兼容性问题
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
bzoj 1050: [HAOI2006]旅行comf【枚举+并查集】
m是5000,就想到了直接枚举比例具体做法是是先把边按照边权从小到大排序,然后先枚举最小边权,再枚举最大边权,就是从最小边权里一个一个加进并查集里,每次查st是否联通,联通则退出,更新答案 #inc ...
VUE中全局变量的定义和使用
目录 VUE中全局变量的定义和使用 1.工作中遇到的两类问题 1.1 状态值(标志) 1.2 传递字段 2.解决方法 2.1 VUEX 2.2 使用全局变量法管理状态与字段值 3.具体实现 3.1创建 ...
洛谷 P1074 靶形数独(剪枝)
//人生中第一道蓝题(3.5h) 题目描述小城和小华都是热爱数学的好学生,最近,他们不约而同地迷上了数独游戏,好胜的他们想用数独来一比高低.但普通的数独对他们来说都过于简单了,于是他们向 Z 博士请 ...

07Html、CSS

07Html、CSS-2018/07/17

07Html、CSS的更多相关文章

随机推荐

热门专题

　07Html、CSS-2018/07/17