2018-09-17HTML

01-文本标签

• 1.web标准
  web前端的内容：HTML、CSS、JavaScript
  web标准（万维网——W3C指定的）中规定HTML是结构标准，CSS是表现标准，JavaScript是行为标准
  a.HTML结构标准中规定了网页上能够显示的内容，比如文字、图片、音频、视频、Flash、按钮、输入框ect
  b.CSS表现标准规定网页内容的布局和样式，比如内容该显示在什么位置，内容是什么颜色，大小ect
  c.JS行为标准规定网页的内容在某种情况下发送什么样的改变。（网页发生动态的变化）

• 2.HTML
  a.什么是HTM
  HTML又叫超文本标记语言（是标记语言，不是编程语言）
  b.HTML的版本
  狭义的h5：指的是html第五个大版本
  广义的h5：指的是html5 + CSS3 + javascript
  c.html文件结构（由不同的标签组成）
  
  ——
  ————内容是不可见的
  ——
  ——
  ————内容是可见的
  ——
  

• 3.HTML中的标签
  网页中的内容就是通过html中的不同的标签（标记）来确定
  标签语法：
  a.常规标签（双标签）：<标签名 属性名1=属性值1 属性名2=属性值2 ...>标签内容
  b.单标签：<标签名 属性名1=属性值1 属性名2=属性值2 ... ...>或者<标签名 属性名1=属性值1 属性名2=属性值2 .../>
  meta、hr、br
  说明：
  <>,：固定写法，html中所有的标签都是写在<>中的
  标签名：HTML中的标签名不是随便命名的，而是一些固定的值，例如：

  -p标签、a标签、b标签、h1标签、input标签、img标签
  标签名前不能有空隙
  属性：放到开始标签中，属性名和属性值之间用=连接，多个属性之间使用空格隔开。属性可以是自定义的属性也可以是标签自带的属性
  属性没有顺序
  标签内容：双标签才存在标签内容，标签内容可以是任何东西（可以是文字也可以是其他的标签）
  例如：
  我是Python
  ，
  
  ：结束标签，单标签没有一个单独的结束标签

• 4.基本语法
  HTML中大小写不敏感：html和HTML，HtMl是一样的
  文件命名要求：是由字母和数字组成，但是数字不开头，一般都是小写，网站首页的html文件命名为index
  DOCTYPE：用来说明当前的html文件中使用的html版本
  html：代表HTML5

• 5.标签
  1.head标签：head标签中的内容不可见，一般做一些网页设置性的操作
  2.head标签中的内容：head标签中的子标签是固定的
  meta标签：单标签，charset属性用来设置网页的编码方式
  title标签：设置网页标题
  link标签
  style标签
  script标签
  base标签

02-图片和超链接

• 1.图片标签:img标签
  单标签

        src属性：图片地址（可以是本地的图片地址，也可以是远程服务器上的地址）
        title属性：设置图片的标题（这个标题是鼠标停留在图片上等一会儿出现的文字）
        alt属性：用来设置图片加载失败的时候出现的提示信息
  

• 2.超链接标签：a标签
  想要点击跳转的地方都可以使用超链接语法

        (1).href属性：跳转目标对应的地址
        a.其他的网页地址        ------   跳转
        b.写本地的一个html路径    -----  跳转
        c.空   ------  刷新
        d.选择器  ------  在网页内，让网页跳转到指定的位置
        
        (2).target属性：设置跳转方式
        _self（默认值）：在当前页面中刷新出新的内容
        _blank：创建一个新的页面，然后刷新href指定位置的内容
        注意：刷新当前网页和在当前网页跳转到指定位置的时候，只能使用默认的_self
  

03-表格标签

• 1.表格标签：table标签、tr标签、td标签、th标签
  快捷键：tr*10 + tab键，直接创建10行
  table标签：表格整体（一个table标签代表一个表格）
  tr标签：行（一个tr标签代表一行）
  td标签：单元格（一个td标签代表一个单元格）
  th标签：表头
• 2.属性：
  a.border属性：设置表格的边框的宽度，只能作为table的属性
  b.bordercolor属性：设置边框颜色,只能作为table的属性
  c.background：设置背景图片
  d.bgcolor：设置背景颜色，可以作为table/tr/td的属性
  e.cellspacing：设置单元格与单元格之间的间距（默认值1）
  f.cellpadding：设置内容和单元格之间的距离（默认值0）
  g.width:一般作用于某一个单元格，影响的是一列
  h.height:一般作用于一行，影响的是一行地高度
  i.align：设置对齐方式（可以作用于table/tr/td）
  作用于table，让整个表格在浏览器中居中
  作用于tr/td，让内容在单元格中居中
  j.设置宽高只有大的值有效,表格中不一定是文字，可以是图片或者超链接ect
  k.colspan:列的合并；rowspan:行的合并
  过程：先确定表格的行和列的最大数，再观察表格是否有合并现象，
  如果有，就使用列合并（colspan）和行合并（rowspan）