HTML+CSS知识点-周1.md

一、浏览器及内核(渲染引擎)

主流浏览器	内核
safari 苹果浏览器	webkit
chrome 谷歌浏览器	webkit --> blink
opera 欧朋	presto --> webkit --> blink
firefox 火狐	gecko
IE 微软IE浏览器	trident

国内浏览器

   QQ、360、UC、猎豹浏览器...
  无自主研发内核，基本都是使用webkit、trident 内核改造

二、网页组成

    结构层   --  HTML
    表现层   --  CSS
    行为层   --  Javascript

W3C组织：万维网联盟，制定web标准
web标准（W3C标准）要求网页三层结构应该相分离

三、HTML初识

1、HTML概念

HyperText Markup Language 超文本标记语言

超文本：不仅可以承载文本、还可以承载图片、动画、音频、视频…
用来描述网页的语言
不是编程语言，是标记语言

2、HTML基本语法

元素-标签以及标签之间的内容这个整体又称之为元素

3、HTML基本结构

<!DOCTYPE html> -告诉浏览器以html5的标准去解析网页,网页根标签代表网页开始和结束

<head> - 网页头部：通常放页面的元信息

<meta charset="utf-8"> -设置网页的编码方式（字符集）
               utf-8: 国际编码（万国码）
               gb2312 : 国标，简体中文
               gbk : 国标扩，简体+繁体

<title>  - 网页标题

四、常用标签

1、标签分类

块级标签	行内标签
从上往下、独占一行	从左到右、水平排列在一行
默认宽度占满父级,高度由内容撑开	默认宽度和高度都是由内容撑开
可以设置宽高,可以设置所有的盒模型属性	不可以设置宽高，水平方向盒模型属性（padding、border、margin）可以正常设置，垂直方向盒模型不能设置
text-align:center 有效	text-align:center 无效

占满父级表示盒子实际内容的宽度 content+ 左右padding + 左右border + 左右的外边距margin= 父级宽度100%

块级标签
        hr 分割线  
        div 区块、盒子
        p   段落
        h1-h6   标题   
        ol  有序列表    type="1/A/a/I/i"
        ul   无序列表    type="desc/circle/square"
        li   无序列表和有序列表的项目
        dl   定义列表
        dt   放名词或术语
        dd   放描述或者说明
        form   表单域

行内标签
        span    无语义标签，给一段文字中的指定文本设置特殊样式
        i       样式斜体 
        em      斜体，并且强调
        b       样式加粗
        strong  加粗并且强调
        sub     下标
        sup     上标
        del     删除文本

行内块级标签（img、表单元素input/textarea/select）
从左到右、多个行内块级标签水平排列在一行
可以设置宽高,可以设置所有的盒模型属性
text-align:center 无效

居中效果
1、块元素中的行内元素或者行内块居中，给外部的这个块元素设置text-align:center;
2、块元素在父级元素中水平居中，给这个块元素设置margin:0 auto;

2、图片img标签

    <img src="图片路径../ : 返回上一级目录
    ../../: 返回上两级目录" alt="替换文本" >

3、链接 a 行内元素

    本网站中的页面跳转
    <a href="相对路径/目标页面的网址" target="_blank在新窗口中打开/_self : 默认值，当前窗口打开" title="提示文字"> 链接文本 </a>

    锚点（锚记）链接 ：跳转到当前页面的指定位置
    <h3 id="f1"> ... </h3>
    <a href="#f1"> ... </a>
    跳转页面同时指定位置：
    <a href="./4、链接.html#floor2"> 跳转到链接页面的第2层</a>

五、列表

1、有序列表

'1 / A / a / I /i'ol和li属于固定父子标签，ol的直接子标签只能是li
    <ol type="A">
        <li>张三</li>
        <li>
            <h3> ... </h3>
            <p> ... </p>
        </li>
    </ol>

2、无序列表

'desc (实心圆点)/cricle(空心圆圈)/square(正方形)'

    <ul type="circle">
        <li>Tom</li>
        <li>Jack</li>
        <li>Rose</li>
    </ul>

3、定义列表

一般用于解释一些专有名词或者术语说明
    <dl>
        <dt>放名词或者术语</dt>
        <dd>放解释说明</dd>
    </dl>

列表符换成图像
list-style-type:none;//去掉圆点
list-style-image: url(images/icon.gif);

六、网页特殊符号

    &nbsp;    空格
    &gt;    大于符号    >
    &lt;    小于符号    <
    &amp;    &符本身    &
    &copy;   版权符     ©
    &reg;    注册商标   ®

七、语义化

什么是语义化？
用合理的标签去格式化文档内容,比如标题用h标签，段落用p标签，重要图片添加alt属性添加替换文本-

好处？
1. 没有css也能表现出良好的结构
2. 具有良好的可读性，有利于团队开发维护
3. 有利于用户体验
4. 有利于搜索引擎优化

八、表格

1、表格相关标签

    - table  定义整个表格
    - tr  定义一行
    - td  定义表格的单元格（标准单元格）
    - th  定义表头单元格 （加粗居中）
    - caption  定义表格标题
    - thead  表格的头
    - tbody  表格的主体
    - tfoot  表格的底部
    > thead\tbody\tfoot 这些标签可以增强表格的语义化，对布局没有影响

   <table>
          <caption>学生成绩表</caption>
          <tr>
                <th>编号</th>
                <th>姓名</th>
                <th>分数</th>
           </tr>
           <tr>
           <td>01</td>
           <td>张三</td>
                <td>90</td>
           </tr>
    </table>

2、表格相关属性

   <table border="1" cellspacing="0" style="width: 300px;border-collapse:collapse;">
   </table>

border 给表格整体添加边框（表格和单元格都有边框）
border-collapse:collapse; 去除单元格之间的空白间距，并且把相邻边框合并成一个
cellspacing=“0” ：去掉单元格之间的空白间距

3、合并单元格

合并列（横向合并）colspan = “2”

    <td colspan="2">  ... </td>

合并行（纵向合并）rowspan = “2”

    <td rowspan="2"> ... </td>

4、表格特点

不设置表格宽度时，实际宽度由内容撑开
如果给表格设置宽度width，表格的列宽会按照每一列当中内容最多的单元格的比例分配列宽，行高也是同理
也可以通过给单元格设置 width和height调整整行或整列的宽度和高度

    <tr>
        <td width="80">4444</td>
        <td width="80">5</td>
        <td width="140">6</td>
    </tr>
    <tr>
        <td width="33.33%">4444</td>
        <td width="33.33%">5</td>
        <td width="33.33%">6</td>
    </tr>

九、CSS

Cascading Style Sheets 层叠样式表–是用来规定网页样式的语言

1、 css三种引入方式(行内/内嵌/link外部引入)

行内样式 ：
<div style="width:100px;height:100px;background-color:red;"></div>
内嵌式 :
<head>
        <style>
            p{
     
     
                width:100px;
                height:100px;
                background-color:red;
            }
        </style>
</head>
link外部引入：
<link rel="stylesheet" href="./style.css" type="text/css">

   - rel : 表示目标文件和当前文件的关系  stylesheet 表示样式表
   - href : 目标文件的相对路径
   - type : "text/css"标记文件类型为 css

CSS中link和@import导入样式的区别

   <style> 
       <!--该规则必须在样式表头部最先声明。并且其后的分号是必需的，如果省略了此分号，外部样式表将无法正确导入，并会生成错误信息。-->
        @import url("global.css");
        @import url(global.css);
        @import "global.css";

　     　p{
     
     color:red;}

   </style>

link	@import
link是XHTML标签，除了加载CSS外，还可以定义RSS等其他事务	属于CSS范畴，只能加载CSS
link引用CSS时，在页面载入时同时加载	需要页面网页完全载入以后加载
link是XHTML标签，无兼容问题	在CSS2.1提出的，低版本的浏览器不支持
支持使用Javascript控制DOM去改变样式	不支持

2、选择器

用来获取要添加样式的标签，选择器有很多类型（标签名、id、class、*）

div,p{  ...  }
#box{ ... }
.red{ ... }
*{
        margin: 0;
        padding: 0;
 }

3、复合选择器（后代、子代、并集群组、交集选择器）

    .box div{  /* 选择.box标签后代当中所有div标签*/
    }
    
    .box>div{  /* 选择.box标签直接子代中所有div标签 */
    }
     
    #box,.red,h3,#box p{  /*把以下几个选择器匹配的元素同时选中*/
        #box
        .red
        h3
        #box p
    }
    
    div.red{ ... }   /*选择标签名为div并且类名中包含red这个单词的标签，精准定位   */

十、文字相关属性

1、 text系列

  text-align : left/right/center--文本对齐方式
  text-indent : 2em --首行缩进，em : 代表一个字的大小
  text-decoration ：none/underline/overline/lint-through--文字修饰  
  color : 文本颜色

2、 font 系列

字体简写属性，顺序不能随意更改
可以省略不需要设置的属性, 至少保留font-size和font-family

font 字体简写属性

font: font-style font-weight  font-size/line-height font-family;
font: italic bold 20px/2 "宋体";
至少要大小、字体

font 字体属性(size、weight、style、family)

   font-size   字体大小 16px
   font-weight 字体加粗
         100-300  细
         400-500  正常
         600-900  加粗
         normal   正常
         bold     加粗
   font-style --字体风格
         normal   正常
         italic   斜体
   font-family  --字体系列（族类）
        可以设置一个字体或多个字体
        多个字体用逗号分隔，浏览器会显示第一个能够识别的字体
   font-family: Helvetica Neue,Helvetica,Arial,"宋体",Hiragino Sans GB,Heiti SC,WenQuanYi Micro Hei,sans-serif;

font 字体行高

   line-height  字体行高-由上间距、文本高度、下间距组成
      取值可以为具体的长度  30px
      也可以为font-size的倍数   比如2  代表font-size的两倍
      单行文本垂直居中可以设置line-height为盒子的高度

3、其他

设置字符间距：英文字母、中文汉字
letter-spacing:10px;  "1 2 3 a b c 汉 字"
设置单词的间距
word-spacing:10px;  "world    hello    ujiuye   汉字   "

鼠标变小手cursor:pointer

4、长度单位和颜色表示法

单位

   px   像素
   em   相对单位，代表的是当前元素的font-size值  
   %    百分比   
   rem  1rem 等于页面的根元素的font-size值，也就是html标签的font-size

颜色表示法

   red                          --英文单词  
   #000000                      --十六进制
   rgb(0-255,0-255,0-255)       --rgb()模式
   rgba(0-255,0-255,0-255,0-1); --rgba()模式-alpha 透明度

十一、HTML表单

表单是网站用来收集用户信息的

1、表单域 form （块级）

表示用来规定表单的一片区域，里面用来放各种表单元素

表单域属性

   action: 用来规定表单的提交地址(与后台对接)
   method:用来规定表单的提交方式
   get : 默认提交方式, 会把表单数据以键值对形式，多组用&拼接在一起，通过地址栏进行传递，安全性不好，因为地址栏可容纳的数据大小有限制的，所以可能造成数据丢失
   post : 推荐使用的方法，安全性更好，理论上没有大小限制

    <form action="" method="" >
        ...
    </form>

2、表单元素(行内块)

input标签（name后台接收，要写噢）

   <input type="text" name="username"> 普通文本框
   <input type="password" name="psd">  密码框
   <input type="radio" name="gender" value="male">单选按钮(name要设置相同才能互斥单选)
   <input type="checkbox" name="hobby" value="coding">复选框
   <input type="file" name="file"> 文件域
   <input type="submit" value="注册">      提交按钮  
   <input type="reset"  value="清空表单">  重置按钮
   <input type="button" value="普通按钮">  普通按钮
   <input type="image" src="图片路径"> 图片提交按钮，显示图标，变成小手
   <input type="hidden" name="hid" value="传数据">   隐藏域,页面不显示但是可以携带数据

下拉列表

   <select name="city">
            <option value="aa">AA</option>
            <option value="bb">BB</option>
            <option value="cc">CC</option>
   </select>

文本域（多行文本）

   <textarea name="des" cols="30" rows="20"
    style="width:100px; height:200px;">
    我就是文本域初始显示的值
   </textarea>
        - cols ： 规定输入文本列数
        - rows ： 规定输入文本的行数

3、表单元素属性说明

   1.type用来定义输入框的不同类型
   2.name属性用来规定表单字段名，如果不设置这个输入框的内容无法随表单一起提交到后台
        - 多个单选按钮想要有互斥效果，name属性值必须相同
   3.value用来给表单元素定义值
        - 单选按钮(radio)、复选框(checkbox)、下拉列表的选项(option)必须要设置value属性，表示选项所代表的值
        - 提交按钮(submit)、重置按钮(reset)、普通按钮(button)设置value属性表示修改按钮上的文字
        - 文本框(text)、密码框(password)、隐藏域(hidden)，用value设置默认值
        - 文件域flie和textarea不能设置value
   4.maxlength="10" 用于规定输入框允许输入的最大字符个数
   5.disabled="disabled"  设置表单元素为禁用状态, 不能编辑，也不能被提交
   6.readonly="readonly"  设置表单元素为只读状态, 不能编辑，可以被提交
   7.checked="checked"    设置单选按钮和复选框默认选中
   8.selected="selected"  设置下拉列表的选项默认选中
   9.size="2"  规定下拉表默认显示项目的个数

HTML+CSS知识点-周1.md

一、浏览器及内核(渲染引擎)

二、网页组成

三、HTML初识

1、HTML概念

2、HTML基本语法

3、HTML基本结构

四、常用标签

1、标签分类

2、 图片img标签

3、链接 a 行内元素

五、列表

1、有序列表

2、无序列表

3、定义列表

六、网页特殊符号

七、语义化

八、表格

1、表格相关标签

2、表格相关属性

3、合并单元格

4、表格特点

九、CSS

1、 css三种引入方式(行内/内嵌/link外部引入)

2、选择器

3、复合选择器 （后代、子代、并集群组、交集选择器）

十、文字相关属性

1、 text系列

2、 font 系列

3、其他

4、长度单位和颜色表示法

十一、HTML表单

1、表单域 form （块级）

2、表单元素(行内块)

3、表单元素属性说明

猜你喜欢

2、图片img标签

3、复合选择器（后代、子代、并集群组、交集选择器）