前端开发学习──初识Html

html结构

html 超文本标记语言,它的结构标准如下:

  声明文档类型
  根标签
 头标签
    
    Document 标题标签

  主体标签




html标签

  • 单标签

  • 注释标签

  • 水平线标签


  • 换行标签

  • 双标签

  • 段落标签

    文本内容

    ,特点:上下自动生成空白行,而
    标签换行不会生成空白行

  • 标题标签,h1-h6 取值到h6,建议h1标签在一个页面里只能出现一次

  • 文本标签 文本内容

  • 文本格式化标签:
    1.文本加粗标签 ,前者更具语义化
    2.文本倾斜标签 ,前者更具语义化
    3.删除线标签 ,前者更具语义化
    4.下划线标签 ,前者更具语义化

  • 图片标签:

  • src:图片来源,必写

  • alt:替换文本,当图片不显示的时显示的文字

  • title:提示文本,当鼠标放到图片上时显示的文字

  • width:图片宽度

  • height:图片高度
    注:图片没有定义宽高的时候,图片按照百分之百比例显示,如果只更改图片的宽度或者高度,图片等比例缩放

  • 超链接标签:

  • href:跳转的路径,必写

  • title:提示文本,当鼠标放到链接上时显示的文字

  • target:_self为默认值,在自身页面打开(关闭自身页面,打开链接页面);_blank打开新页面 (自身页面不关闭,打开一个新的链接页面)

  • 无序列表

  • d
  • a
  • c
  • e

type:disc默认 实心小圆圈;square 小方块;circle 空心小圆圈

  • 有序列表
  1. e
  2. re
  3. a
  4. f
  • type:type=”1,a,A,i,I” type的值可以为1,a,A,i,I

  • start:start=”2” 决定了开始的位置

  • 自定义列表

帮助中心
购物指南
订单操作
账户管理
帮助中心1
购物指南2
订单操作3
账户管理4
前端开发学习──初识Html_第1张图片
  • meta标签:content 属性始终要和 name 属性或 http-equiv 属性一起使用。

  • 搜索关键字,某些搜索引擎在遇到这些关键字时,会用这些关键字对文档进行分类

  • 网页描述

  • 网页重定向:5s后跳转到www.baidu.com

  • link标签

  • 链接外部样式表

  • 设置icon图片

表格

表格由

标签来定义。每个表格均有若干行(由 标签定义),每行被分割为若干单元格(由

  • 单元格合并:colspan=”2” 合并同一行上的单元格;rowspan=”2” 合并同一列上的单元格

  • 内容垂直对齐方式valign="top | middle | bottom"

  • 
        
    标签定义)。字母 td 指表格数据(table data),即数据单元格的内容。数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等

    
        
    标题
    1 2 3
    4 5 6
    7 8 9
    10 11 12
    前端开发学习──初识Html_第2张图片
    • table属性:
      Border=”4” 边框
      Width=”300” 宽度
      Height=”400” 高
      cellspacing=”2” 单元格与单元格的距离
      cellpadding=”10” 内容距边框的距离
      align=”left | right | center” 如果直接给表格用align=”center” 表格居中,如果给tr或者td使用 ,tr或者td内容居中
      bgcolor=”yellow” 背景颜色
      bordercolor="red" 边框颜色

    • 表头

    标题
    标题
    1 2 3
    4 5 6
    7 9
    10 11
    前端开发学习──初识Html_第3张图片

    表单

    • 表单域
      • action :表单提交的目标地址。
    • method :POST 的安全性更加,因为在页面地址栏中被提交的数据是不可见的;GET通过地址栏提供(传输)信息,可见,安全性差
    • 输入框
    用户名:
    密码:
    • maxlength="6" 限制输入字符长度

    • readonly=”readonly” 将输入框设置为只读状态(不能编辑)

    • disabled="disabled" 输入框未激活状态

    • name="username" 输入框的名称

    • value="html" 将输入框的内容传给处理文件

    • 单选框

    • 只有将name的值设置相同的时候,才能实现单选效果。

    • checked=”checked” 设置默认选择项

    • 多选框

     1
     2
     3
    
    • 下拉列表
    
    
    
    前端开发学习──初识Html_第4张图片
    • Multiple=”multiple” 将下拉列表设置为多选项

    • Selected=”selected” 设置默认选中项目

    • 对下拉列表进行分组, label=“” 分组名称

    • 多行文本框

    • Cols 控制输入字符的长度。

    • Rows 控制输入的行数

    • 文件上传

    • 重置按钮

    • 文件提交按钮

    • ,可以实现信息提交功能

    • ,不能提交信息,配合JS使用

    • ,图片按钮可实现信息提交功能

    • 表单信息分组
    分组1
    分组2
    前端开发学习──初识Html_第5张图片
    示意图
    • 对表单信息分组

    • 表单信息分组名称

    • 其他表单控件











    前端开发学习──初识Html_第6张图片

    html特殊字符

    前端开发学习──初识Html_第7张图片
    特殊字符

    标签语义化

    好的语义化的网站标准就是去掉样式表文件之后,结构依然很清晰。

    • 标签语义化意义:
    • 网页结构合理
    • 有利于seo:和搜索引擎建立良好沟通,有了良好的结构和语 义你的网页内容自然容易被搜索引擎抓取
    • 方便其他设备解析(如屏幕阅读器、盲人阅读器、移动设备)
    • 便于团队开发和维护
    • 尽可能少的使用无语义的标签div和span;
    • 在语义不明显时,既可以使用div或者p时,尽量用p, 因为p在默认情况下有上下间距,对兼容特殊终端有利;
    • 不要使用纯样式标签,如:b、font、u等,改用css设置。
    • 需要强调的文本,可以包含在strong或者em标签中strong默认样式是加粗(不要用b),em是斜体(不用i);

    你可能感兴趣的:(前端开发学习──初识Html)