标签：文件名   密码字段   idt   text   段落   cells   目录文件   图像   大小   

简介

• 结构用于对网页元素进行整理和分类，身体，HTML。
• 表现用于设置网页元素的板式、颜色、大小等外观样式，装饰CSS。
• 行为是指网页模型的定义及交互的编写，动作，JavaScript。

结构标签(骨架标签)

• 每个网页都有一个基本的结构标签
• HTML标签
  • 根标签，所有html语言都在其内部

• 网页头部
  • 在头部中一定要设置标题title

• 网页标题
  • 当前网页的名字

• 网页主体
  • 页面中的内容都在主体中

• 范例

    页面内容

• 文档类型声明标签
• 告诉浏览器使用哪个版本的HTML来显示网页
• 使用HTML5版本来显示网页

lang

• 定义当前文档显示的语言
• 若需要使用浏览器翻译当前网页，则需要用到
• en为英语
• zh-CN为中文

charset

• 规定HTML文档使用的字符编码
• UTF-8为万国码，基本包含了所有国家的字符
• 若不设置编码格式，可能会出现乱码
• 写在title标签中

标题标签

• 共有6级，h1~h6
• 一个标题单独占一行

1
2
···

段落标签

• 将文字分段
• 段落之间有间距

一个段落

换行标签

• 换行

加粗标签

• 将文字加粗

加粗
加粗

倾斜标签

• 将文字倾斜

倾斜
倾斜

删除线标签

• 文字中间有一条线

删除线
删除线

下划线标签

• 文字下面有一条线

下划线
下划线

盒子标签

• div
  • 独占一行，一行只能有一个div
  • 大盒子

  大盒子
  

• span
  • 一行可以有多个span
  • 小盒子

  小盒子
  

图像标签

• 用来设置HTML页面中的图像
• 属性
  • src
    • 用于指定图像文件的路径和文件名
    • 是图像标签必须添加的属性
  • alt
    • 若图像不能显示时，显示的文字
  • title
    • 鼠标放到图片上时，显示的文字
  • width
    • 图像的宽度
  • height
    • 图像的高度
    • 高度和宽度只需要设置一个即可，另一个会根据比例进行缩放
  • border
    • 图像边框的粗细
    • 边框一般通过CSS进行修改
• 范例

路径

• 目录文件夹

  • 就是存放所有文件的最外面那个文件夹，即项目文件夹

• 根目录

  • 打开目录文件夹的第一层就是根目录

• 绝对路径

  • D:\image\a.jpg
  • https://www.phd99.com/images/a.jpg

• 相对路径

  • 当前文件夹中的image文件夹下的a图片
    • image/a.jpg
    • 或者./image/a.jpg
  • 当前文件夹的上一级文件夹中的image文件夹
    • ../image

超链接标签

• 从一个页面跳转到另一个页面
• 属性
  • herf指定要跳转的页面的url地址
    • 当值为#时，为空链接
  • target指定如何打开跳转页面
    • _self在当前窗口打开，默认
    • _blank在新窗口中打开
  • 范例

  新页面
  

• 锚点链接
  • 点击时可以直接定位到页面中的某个位置

  跳转到id属性值为phd的标签处
  

注释标签

• 快捷键ctrl + /

特殊字符

• 空格 

• 大于

<

• 小于

>

• 和

&

• 人民币

¥

• 版权

©

• 注册商标

®

• 摄氏度

°

• 正负号

±

• 乘号

×

• 除号

÷

• 平方

²

• 立方

³

表格标签

• table用于定义表格
• tr用于定义一行
• td用于定义一行中的一列
• th表头单元格，里面的单元格会加粗居中显示，一般用于表格的第一行
• 属性
  • align，对齐方式
  • border，设置表格是否有边框
  • cellpadding，文字和单元格边框之间的距离
  • cellspacing，单元格之间的距离
  • width，表格的宽度

第1行第1列
        
第1行第2列
    

第2行第1列
        
第2行第2列
    

表格头部标签

• 表头区域，表头部分

表格主题标签

• 主体区域，表格的内容部分

第1行第1列
            
第1行第2列
        

第2行第1列
            
第2行第2列
        

列表标签

无序列表

• 无顺序
• 用
  表示无序列表，
  标签中只能有
• 标签
• 用
• 表示列表中的一项，
• 标签中放其他标签

啊啊
     
嗯嗯
     
嘿嘿

有序列表

• 有顺序
• 用
  表示有序列表，
  标签中只能有
• 标签
• 用
• 表示列表中的一项

张三
     
李四
     
王五
 

自定义列表

• 对列表中的信息有一个整体的描述
• 用
  表示自定义列表，
  标签中只能有
  和
  标签
• 用
  表示最上面的描述标题
• 用
  表示描述标题下面的每一个小标题

服务支持
    
售后政策
    
自助服务
    
相关下载

表单标签

表单域

• 属性
  • action用于指定接收并处理表单数据的服务器程序的url地址
  • method用于设置表单数据的提交方式，其取值为get或post
  • name用于指定表单的名称，以区分同一个页面中的不同表单域

表单元素

input

• 输入表单元素
• type属性值
  • button按钮
  • checkbox复选框，要有相同的name属性值
  • file定义输入字段和“浏览”按钮，供文件上传
  • hidden定义隐藏的输入字段
  • image定义图像形式的提交按钮
  • password定义密码字段
  • radio定义单选按钮,要有相同的name属性值
  • reset定义重置按钮，会清除表单中的所有数据
  • submit定义提交按钮，提交按钮会把表单数据发送到服务器
  • text定义单行的输入字段，用户可在其中输入文本，默认宽度为20个字符
• checked属性值
  • 单选按钮和复选框可以设置checked属性，当页面打开的时候可以默认选中这个按钮
  • checked="checked"
• maxlength属性值
  • 规定输入字段中的字符的最大长度

    

    男
    女

select

• 下拉表单元素
• 标签用来表示下拉列表中的选项
• selected属性设置默认选择

    学生
警察
医生
教师

textarea

• 文本域元素
• 可以输入多行文字
• 常见于留言板、评论
• 属性
  • cols一行显示的字符数
  • rows显示的行数

            内容
    

标注标签

• 当点击label标签对应的位置时，其完成的功能就是与for属性值相同的id属性值对应的其他标签所完成的功能。
• 鼠标点击“男”的位置，也能实现单选功能

    男
    女
    

HTML知识

标签：文件名   密码字段   idt   text   段落   cells   目录文件   图像   大小   

原文地址：https://www.cnblogs.com/phd99/p/14408284.html