html5基础用法

标签：center   二层   浏览器   对齐   password   table   div   gray   textarea   

html5用法

一、基础用法

• 标签对齐属性设置：align="right/left/center"，默认是left，当设置成right时标签右对齐。
• target="_blank" ：当点击超链接时在新的页面中打开，如果不设置target，则超链接页面会覆盖掉当前页面，不会在新页面中打开。

百度这是一个p标签

• html格式化

注意：所有的格式化时都必须使用包裹单词，例如：。还有big在html5中已经取消来，被css样式替换掉了。设定被上标和下标的文字需要在这些文字的前后添加其他的内容才能对比出来，否则看不出来效果。

• 三种样式表的插入方法
  • 外部样式表
    • rel="stylesheet"：表示的是外部样式表
    • type="text/css"：表示的是文件的类型
    • href=""：表示的是文件的来源
  • 内部样式表
  • 内联样式表

二、html链接

- 链接数据
    - 文本链接
    - 图片链接
- 属性
    - href属性：指向另一个文档的链接
    - name属性：创建文档内的链接
    ```html

    hello
    









































    跳转到hello
    ```

name属性用于定义文档内的跳转，如果希望从文档中的一个地方跳转到另外一个地方可以使用name和href属性，需要注意的是：name属性规定好超链接的名字后，另外一个标签的href中的设置必须是"#跳转链接的名字"，必须加上#，否则会创建失败。
- img标签属性
- alt：替换文本属性，当图片加载不出来的时候显示的文本名字
- width：宽
- height：高
```html

    
        点击我
    
    ```

注意：a标签中可以插入img图片标签，可以达到通过点击图片直接跳转链接的目的

三、表格的使用

姓名
        
课程
        
总分
    

李镇
        

            

语文
                
数学
                
政治
                
军事
            

        
370
    

注意：在标签td中也可以写入ul/ol和li标签

四、有序、无序、嵌套及自定义列表的使用

• 无序列表
  • 使用标签：ul、li
  • 属性：type="disc/circle/square"
    • disc：设置无序列表中的图标为实心圆
    • circle：设置无序列表中的图标为空心圆
    • square：设置无序列表中的方块
• 有序列表
  • 使用标签：ol和li
  • 属性：type="A/a/I/i/start"
• 嵌套列表
  • 使用标签：ul、ol和li

动物
    

老虎
        
狮子
    
人类
    

中国人
        
美国人
    

• 自定义列表
  • 使用标签：dl、dt和dd

hello world
        
课程1
    
hello world
        
课程2
    
hello world
        
课程3

五、表单的设置

• 表单的设置可以使用colspan="单元格个数"来合并单元格
• 表单的可以通过正常的width、height和style来设置

头部
        

左菜单
            

        

这是底部
        

六、div的设置

• div中可以嵌套多个div
• div可以通过width、height和style来设置
• div可以使用float:left/right来设置浮动，可以使用clean:both来清除浮动，清除浮动主要用在前边div设置了浮动，但是当前的div不需要浮动时。

        
头部
        
内容菜单
        
内容主体
        
底部
    

七、表单的使用

• 标签：form和input
  input标签的type属性：
  • text：文本输入，用户用户名输入设置
  • password：密码输入
  • checkbox：复选框设置，即多选
  • radio：单选框设置，但是需要注意的是：当设置单选的时候，每一个input的type必须设置成radio，同时name属性设置相同的名字，如果名字不同无法归类，也就无法实现单选的效果
  • button：设置按钮，value可以指定显示的内容
  • submit：设置提交/确认按钮，value可以指定显示的内容
• 下拉菜单标签：form、select和option
  • 一个select包含多个option，select必须在form表单中
  • option标签中的value值是当提交时传递为服务器的内容，如果没有写，则默认传递标签中的内容
• 文本框：textarea标签
  • cols="num"：设定文本框的列数
  • rows="num"：设定文本框的行数

        用户名:
        

        密码:
        

        你喜欢的水果有:
        

        苹果
        香蕉
        西红柿
        梨

        性别:
        男
        女

        最喜欢的网站:
        www.baidu.com
www.taobao.com
www.toutiao.com
www.ejpro.com
请填写个人简介

八、html5框架

• 框架标签：frame，框架对于页面的设计有很大的作用
• 框架集标签：frameset
  • 框架集标签定义如何把窗口分割为框架
  • 每一个frameset定义一系列的行或者列
  • rols/cols="num"规定了每行或者每一列占据屏幕的面积比例

注意：如果是竖向分割则使用cols，如果是横向分割则使用rows。

• 常用标签
  • noresize：固定框架大小
  • cols：列
  • rows：行
• 内联框架：iframe标签
  • frameborder="0"设置内联框架没有边框，如果不设置会显示边框
  • 当内联框架中的内容很多超过当前页面设定的内联框架的大小的时候，框架会以进度条的方式来上下翻页查看

• 框架嵌套
  • 使用的是iframe标签
  • 标签中的src属性是内联的文件或者资源的名字
  • width和height设置宽和高
  • frameborder="0"设置框架没有边框
  • 在嵌套框架中使用a标签，标签中的target属性分为：
    • _self：在当前的框架中展示
    • _blank：生成一个空白的网页展示
    • _parent；在当前框架的上一层框架中展示
    • _top：不在框架展示，而是在当前所在的网页文件中展示，即覆盖所有的内容

    Frame01
    











    Frame02
    
    










    Frame03
    
今日头条
    

九、XHTML的规范化

• 简介

  • 指的是可扩展的超文本标记语言
  • 与HTML4.01几乎是相同的
  • 是更严格和更纯净的HTML语言
  • 是以XML应用的方式来定义的HTML
  • 得到了所有主流浏览器的支持

• 为什么使用？
  为了代码的完整性和良好性

• 文档声明：
  DTD：规定了使用通用标记语言的网页语法

• 语法

  • 元素必须有正确的嵌套
  • 元素必须始终关闭
  • 元素必须小写
  • 文档必须有一个根元素

html5基础用法

标签：center   二层   浏览器   对齐   password   table   div   gray   textarea   

原文地址：https://www.cnblogs.com/ddzc/p/12827579.html