1.5 html基本语法特性2

1. 上节课知识复习

• HTML骨架结构，抽象的：

    
        网页的配置
    
    
        给用户看的
    

• DTD：
  文档类型声明Doc Type Declaration，一共有7种DTD,3种html4.01;3种XHTML1.0；1种HTML5(后面详细的讲)；
  三个小种类：
  • strict(更为严格，不能用u,b,i)
  • transitional(不怎么严格)，
  • frame(框架)

（XHTML比HTML严格，比如必须是小写字母标签等）

• meta标签-字符集
  • UTF-8 ：字符全，每个汉字3个字节，所以文件尺寸大；
  • GB2312 : 字符少，每个汉字2个字节，所以文件尺寸小；
• meta标签-关键词，页面描述
  
  
• title标签：就是页面的标题
• html标签就是负责描述语义的，所以就用标签对的形式，给文本增加语义；
  • h1~h6 标题
  • p 段落，注意，里面只能放文本，图片，表单元素（这三个东西都是流元素）
• img图片![](路径)
  • 完整语法包含两个属性：src 和 alt
  • src:source资源，图片中的路径是相对路径，从html触发，找到图片；
  • alt:alternate替换物；
• a标签，超级链接
  • a标签常用的属性有三个：href=“地址” , title=“悬停文本”,target="_blank"
  • a锚点的跳转：本页面不同模块跳转 和 不同页面不同模块跳转

//本页面不同模块跳转
到第一屏
省略无数行代码。。。
第一屏
//不同页面不同模块跳转
//01page1
到第2屏
//02jianli
这是简历页面

• 调试工具：用chrome浏览器-审查元素

2. 列表：

列表有三种：

2.1 无序列表

• 无序列表，用来表示一个列表的语义，并且每个项目和每个项目之间，不分先后；
• ul:就是英文 unordered list，“无序列表”的意思；
• li:就是英文 list item,"列表项"的意思；
• li不能单独存在，必须包裹在ul里面；也就是说，ul的“儿子”不能是别的东西，只能有li；

中国互联网发达的城市

    
北京
    
上海
    
广州
    
深圳
        
杭州

• ul的作用，不是给文字增加小圆点，而是增加无序列表“语义”的；ul的“儿子”只能是li标签，不能是别的语义标签；但是li是“容器级标签”，li里面什么都能放，放ul都没有问题；(js部分会讲多级菜单，就用li中套ul);
• ul的应用场景：导航条；

2.2 有序列表

• ol:英文名字ordered list(有序列表)

热门电视剧排行榜

    
三生三世十里桃花
    
孤芳不自赏
    
神雕侠侣

2.3 定义列表

• 定义列表也是一个组标签，不过比较复杂，出现了三个标签：
  • dl：表示 definition list 定义列表
  • dt：表示definition title 定义标题
  • dd：表示definition description 定义表述词；
• dt、dd只能在dl里面；dl里面只能有dt、dd

    
html
    
语义化标签，用来搭建页面结构的


    
css
    
样式表，用来给搭建好的页面添加样式的


    
js
    
行为，用来给页面增加动态效果的

用什么标签，不是根据样子来决定，而是语义；

3. div和span

div和span都是非常重要的标签，

• div标签是个块级元素，里面放置大东西；有个非常重要的作用：div标签负责布局，负责结构，负责分块；css负责样式；所以，一个静态页面，我们总亲切的称呼"div+css";

    
导航条


    
主要内容
    
侧边栏

页脚

• span是个行内元素，里面放置小东西(文本，图片等)；

4. 表单

• 表单就是收集用户信息的，就是让用户填写，选择的；

• form表单有两个属性：action-提交到哪里； method：提交方式；

  
  
  

  注册表单

4.1 文本框

• • input表示“输入”，指的是这是一个“输入小部件”
  • type表示“类型”
  • text表示“文本”，指的是类型是一个文本框的输入小部件；
• 这是一个自封闭标签，自此，我们学习的自封闭标签有：

• value表示“值”，value属性就是默认有的值，文本框中已经被填写好了：

4.2 密码框

4.3 单选按钮

• 基本写法

请选择你的性别:
男
女
你猜

• 注意：单选按钮，天生是不能互斥的，如果想互斥，必须有相同的name属性；name就是名字；
• 默认被选择，就应该书写checked=”checked”

4.4 复选框

• 基本写法

      请选择你的爱好:
      睡觉
      吃饭
      足球
 

• 复选框，最好也是有相同的name（虽然他不需要互斥，但是也要有相同的name）

4.5 下拉列表

• 基本写法

      请选择你的籍贯:
      
          北京
          上海
          山西
          广州
      

• select就是“选择”，option“选项”。
• select标签和ul、ol、dl一样，都是组标签。

4.6 多行文本框（文本域）

• 标签textarea : text就是“文本”，area就是“区域”。
  这个标签，是个标签对儿。对儿里面不用写东西。如果写的话，就是这个框的默认文字。
• cols属性表示columns“列”，rows属性表示rows“行”。

4.7 三种按钮

按钮也是input标签，一共有三种按钮：

• 普通按钮
• 提交按钮 ,这个按钮不需要些value，自动就有“提交”的文字；
• 重置按钮 ；