HTML标签笔记总结(归纳)

这篇文章主要集合了容易忘记的一些常用的标签和属性.
d88c52df787492c0f778b65483e86c81.jpg

1.文本格式化标签

标签 表头
加粗
斜体
删除线
下划线

img标签属性

属性 描述
src 图像的路径
alt 图片无法显示时候替换文本
title 鼠标悬停时显示的内容
border 图片边框的高度

base标签

新建标签页打开链接页面,只需在head里面添加这段代码

常用特殊字符

字符 描述 代码
© 版权 ©
& &
空格  

列表

无序列表 ul li

在一些导航布局当中也会经常用到

属性 结果
list-style-type:circle; image.png
list-style-type:square; image.png

开发中我们会经常清除ul li默认样式:

ul,li{ padding:0;margin:0;list-style:none}

有序列表 ol li

CSS样式

属性 结果
list-style-type:upper-roman; image.png
list-style-type:lower-alpha; image.png

自定义列表

 
hello
hello world
hello world
hello world

一般在footer底部介绍菜单分类中用的比较多

表格

表格一般不用来布局,用来显示数据;


               ...
           
               ...
           
           ...
       
表头
内容

表格属性

属性名 含义 常用属性值
border 边框 像素
cellspacing 单元格之间的空白间距 像素
cellpadding 单元格的内间距padding 像素
width 宽度 像素
height 高度 像素
align 表格在网页中的水平对齐方式 left center right

表格结构

如果用表格进行布局,将表格划分为头部,主体和页脚

:定义表格头部:一般包含logo和导航等信息

:定义表格的主体

表格标题

会居中显示在表格上

合并单元格

跨行(竖着):rowspan

跨列(横着):colspan

input控件

属性 属性值 描述
type text 文本
type password 密码
type radio 单选(input要是同一个name)
type checkbox 复选
type button 按钮
type submit 提交
type reset 重置
type image 图片按钮,配合src使用
type file 文件域(上传文件)
name 用户自定义 控件的名称
value 用户自定义 input默认的文本值
size 正整数 input控件的显示宽度
checked checked 定义选择控件默认被选择的项
maxlength 正整数 允许输入的最多的字符

label标签

作用:绑定一个表单元素,当点击label标签的时候,被绑定的表单元素会获取输入焦点

 
 

textarea控件

  

下拉菜单

selected="selected"用于设置默认选中的那项

表单域

在HTML中,form被用于定义表单域,实现收集传递用户信息,form中的所有内容都会被提交给服务器

 
属性 作用
action 收集信息传递给服务器进行处理,action指定接收并处理表单数据的服务器程序的url地址
method 用于设置表单数据的提交方式,其取值为get和post
name 名称

常用新增标签

语义化标签header nav footer article section aside

datalist :配合input使用,输入时会提示关键词

 
        
            
            
            
            
            
       

fliedset 将表单内的相关元素分组,打包

 
用户登录 用户名:
密码:

input type新增属性值:

**类型 使用示例** 含义**
email 输入邮箱格式
tel 输入手机号码格式
url 输入url格式
number 输入数字格式
search 搜索框(体现语义化)
range 自由拖动滑块
time 小时分钟
date 年月日
datetime 时间
month 月年
week 星期 年

常用新属性

  1. placeholder:输入时候提示文字消失
  2. autofocus:让input表单加载页面时默认被选中
  3. multiple:多文件上传(默认的file是单个文件上传)
  4. required:必填项;内容不能为空
  5. accesskey:规定激活(使元素获得焦点)元素的快捷键,采用alt+S的形式

多媒体标签

embed:标签定义嵌入的内容,可以用来插入Midi,wav,AIFF,AU,MP3等格式,url是音频或视频文件及其路径;

  1. audio:播放音频
  2. autoplay自动播放
  3. controls是否显示不播放控件
  4. loop循环播放(loop或loop="-1"无限循环)

多浏览器支持的方案

 

video:播放视频

  
  1. autoplay自动播放
  2. controls是否显示控件
  3. loop循环播放
  4. width设置窗口宽度
  5. heigh设置窗口高度

多浏览器支持的方案和audio类似

你可能感兴趣的:(html,前端,html5)