HTML简单基础和部分css

前端三大块

1	2
html	结构
css	表现
javascript	行为

• 结构: HTML用于描述页面的结构
• 表现:CSS用于控制页面中元素的样式
• 行为: JavaScript用于响应用户操作

HTML（Hypertext Markup Language）

• 超文本标记语言
• 使用标签的的形式来标识网页中的不同组成部分
• 所谓超文本指的是超链接，使用超链接可以让我们从一个页面跳转到另一个页面

一个最基本的HTML页面

    
    


    
网页正文

标签

• HTML中的标记指的就是标签
• HTML使用标记标签来描述网页
• 结构

<标签名>标签内容

<标签名 />

元素

• 我们还将一个完整的标签称为元素
• 这里我们可以将元素和标签认为是一个同义词

一级标题

上边的h1我们就称为元素

我是一个段落

p也是一个元素，em是p的子元素，p是
em的父元素。


    
内容


1. body也是一个元素
2. body是p和em的祖先元素。
3. p和em是body的后代元素

属性

• 可以为HTML标签设置属性
• 通过属性为HTML元素提供附加信息
• 属性需要设置在开始标签或自结束标签中
• 属性总是以名称/值对的形式出现。
• 比如：name=“value”
• 有些属性可以是任意值，有些则必须是指定值

标题

常见属性

• id --id属性作为标签的唯一标识，在同一个网页中不能出现相同的id属性值

• class --class属性用来为标签分组，拥有相同class属性的标签我们认为就是一组，可以出现相同的class属性，可以为一个元素指定多个class

• title --title属性用来指定标签的标题，指定title以后，鼠标移入到元素上方时，会出现提示文字。

注释

• HTML注释中的内容不会在网页中显示
• 注释不能嵌套！
• 合理的使用注释可以帮助开发人员理解网页的代码
• 格式:

doctype

• HTML总共有那么多的版本，而且这其中至少有三个版本在广泛使用，那么浏览器怎么知道我们在使用哪个版本呢？
• 为了让浏览器知道我们使用的HTML版本我们还需要在网页的最上边添加一个doctype声明，来告诉浏览器网页的版本
• 避免怪异模式的最好方式就是在页面中编写正确的doctype

html4
    过渡版
    
    严格版
    !DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
    框架集
    

html5

编码问题

• 如果我们保存文件时使用的是utf-8进行编码，而浏览器读取页面时使用gb2312，这样就会导致页面中的内容不能正常显示，也就是我们所说的乱码。
• 所以我们只需要统一两者使用的字符集就可以解决乱码问题
• 这里为了页面有更好的使用性，我们一般使用utf-8

解决

• 保存文件的编码我们直接通过编辑器即可指定，接下来就是要告诉浏览器使用什么字符集去解析文件。
• 在html5中只需要使用meta标签即可完成这个任务：

meta

• 标签可提供有关页面的元信息，比如针对搜索引擎和更新频度的描述和关键词
• 标签位于文档的头部，不包含任何内容。 标签的属性定义了与文档相关联的名称/值对。

meta的用法

设置页面的字符集


设置网页的描述


设置网页的关键字


请求的重定向

常用标签

< html>

• 作用: < html>标签用于告诉浏览器这个文档中包含的信息是用HTML编写的
• 用法: 所有的网页的内容都需要编写到html标签中，一个页面中html标签只能有一个,html标签中有两个子标签head和body

< head>

• 作用: < head>标签用来表示网页的元数据，head中包含了浏览器和搜索引擎使用的其他不可见信息。
• 用法 head标签作为html标签的子元素的出现，一个网页中只能有一个head

< title>

• 作用: --- < title>标签表示网页的标题，一般会在网页的标题栏上显示 --- title标签中的文字，是页面优化的最重要因素。在搜索引擎的搜索时最先看到的、最醒目的内容
• 用法: --- 建议将< title>标签紧贴着head标签编写，这样搜索引擎可以快速检索到标题标签--- 网站中的多个页面的< title>也不应该重复，这样不利于搜索隐藏检索

< body>

• 作用: < body>标签用来设置网页的主体，所有在页面中能看到的内容都应该编写到body标签中
• 用法: < body>标签作为html的子标签使用

h1~h6

• h1_{h6都是网页中的标题标签，用来表示网页中的一个标题，不同的是，从h1}h6重要性越来越低。
• 标题标签相当于正文的标题，通常认为重要性仅次于页面的title
• 一般标题标签我们只会使用到h3，h3以后的标题标签对于搜索引擎就没有什么意义了
• 一个页面中只会使用一个h1标签

< p>

• < p>标签表示网页中的一个段落
• 一般浏览器会在段落的前和后各加上一个换行,也就是段落会在页面中自成一行

< br />

• < br />标签表示一个换行标签，使用br标签可以使br标签后的内容另起一行
• 在HTML中，字符之间写再多的空格，浏览器也会当成一个空格解析，换行也会当成一个空格解析在页面中可以使用br标签来表示一个换行，br标签是一个自结束标签

< hr />

• < hr />标签是水平线标签，使用hr标签可以在页面中打印一条水平线，水平线可以将页面分成上下两个部分

< img />

• 作用：< img />标签是图片标签，可以用来向页面中引入一张外部的图片
• 属性:

1. src --指向一个外部的图片的路径
2. alt --图片的描述

    
        
        
    
    
        
        使用img标签来向网页中引入一个外部图片
        img标签也是一个自结束标签
        属性：
            src：设置一个外部图片的路径
            alt：可以用来设置在图片不能显示时，对图片的描述
                搜索引擎可以通过alt属性来识别不同的图片
                如果不写alt属性，则搜索引擎不会对img中的图片进行收录
            width：可以用来修改图片的宽度，一般使用px作为单位
            height：可以用来修改图片的高度，一般使用px作为单位
                宽度和高度两个属性如果只设置一个，另一个也会同时等比例调整大小
                如果两值同时指定，则按照你指定的值来设置
                一般开发中除了自适应的页面，不建议设置width和height
                src:可以绝对路径，也可相对路径，../（上级目录）
        -->
        
    


图片的格式
    JPEG（JPG）
        - JPEG图片支持的颜色比较多，图片可以压缩，但是不支持透明
        - 一般使用JPEG来保存照片等颜色丰富的图片
    GIF
        - GIF支持的颜色少，只支持简单的透明，支持动态图
        - 图片颜色单一或者是动态图时可以使用GIF
    PNG
        - PNG支持的颜色多，并且支持复杂的透明
        - 可以用来显示颜色复杂的透明的图片
    图片的使用原则：
        效果不一致，使用效果好的
        效果一致，使用小的

< iframe >内联框架

    
        
        
    
    
        
我是demo11
        
        
    

< a >

• 作用：< a>标签是超链接标签，通过a标签，可以快速跳转到其他页面。
• 属性：

1. href : 指向一个链接地址
2. target : 设置打开目标页面的位置，可选值：_blank新窗口、_self当前窗口。

    
        
        
    
    
        
我是demo12
        
        我是一个超链接


        
        我是一个超链接


        
        
        我是一个超链接


        
        
        
        
        
            
我是一个p标签
        
    

实体（转义字符）

• 在HTML中预留了一些字符。
• 这些预留字符是不能在网页中直接使用的
• 比如<和>,我们不能直接在页面中使用<和>号，因为浏览器会将它解析为html标签。
• 为了可以使用这些预留字符，我们必须在html中使用字符实体
• 语法: &实体名

字符实体

小于号<	<
大于号>	>
空格
和符号&	&
版权©	©
引号”	"
注册商标®	®
商标™	&trade

    
        
        
    
    
        
        
        
        
        
        -->
        
        
        
        
我是一个p标签
        
        
我是一个p标签
        
        
        
        
        abc
        

        bcd
        

        efg
        
        
        
今天天气真不错
        
今天天气真不错
        
        
        
今天天气真不错
        
今天天气真不错
    


谁敢管我

CSS

• 层叠样式表 (Cascading Style Sheets)
• css可以用来为网页创建样式表，通过样式表可以对网页进行装饰
• 所谓层叠，可以将整个网页想象成是一层一层的结构，层次高的将会覆盖层次低的
• 而css就可以分别为网页的各个层次设置样式

基本语法

• CSS的样式表由一个一个的样式构成，一个样式又由选择器和声明块构成。
• 语法：

选择器 {样式名:样式值；样式名:样式值 ; }
– p {color:red ; font-size:12px;}

    
        
        
        
    
    
        
今天天气真不错，PM2.5也就500
    

行内样式

• 可以直接将样式写到标签内部的style属性中，这种样式不用填写选择器，直接编写声明即可

• 这种方式编写简单，定位准确。但是由于直接将css代码写到了html标签的内部，导致结构与表现耦合，同时导致样式不能够复用，所以这种方式我们不使用

内部样式表

• 可以直接将样式写到

  jiandan

  • 这样使css独立于html代码，而且可以同时为多个元素设置样式，这是我们使用的比较多的一种方式
  • 但是这种方式，样式只能在一个页面中使用，不能在多个页面中重复使用

  外部样式表

  • 可以将所有的样式保存到一个外部的css文件中，然后通过标签将样式表引入到文件中。
  • 这种方式将样式表放入到了页面的外部，可以在多个页面中引入，同时浏览器加载文件时可以使用缓存，这是我们开发中使用的最多的方式

  
  
  
      
          
          
          
          
          
          
      
      
          
          
  举头望明月，低头思故乡
          
  举头望明月，低头思故乡
          
  举头望明月，低头思故乡
      
  
  

  ---

  
  
  
  
      
      
      
  
  
      
  
      
  我是一个span
  
  
      我是一个超链接
  
      
          
  
              我是一个div
          
      
      
  
          我是一个div
      
  
      
  我是一个p标签
      
  我是一个p标签
  
      
  
  
      我是一个span
      我是一个span
  
      我是一段文字