关于html:HTML标签笔记总结归纳

这篇文章次要汇合了容易遗记的一些罕用的标签和属性.

1.文本格式化标签

标签 表头
<b> <strong> 加粗
<i> <em> 斜体
<s> <del> 删除线
<u> <ins> 下划线

img标签属性

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

base标签

新建标签页关上链接页面,只需在head外面增加这段代码
<base target=" blank">

罕用特殊字符

字符 形容 代码
© 版权 &copy;
& &amp;
空格 &nbsp;

列表

无序列表 ul li

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

属性 后果
list-style-type:circle;
list-style-type:square;

开发中咱们会常常革除ul li默认款式:

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

有序列表 ol li

CSS款式

属性 后果
list-style-type:upper-roman;
list-style-type:lower-alpha;

自定义列表

 <dl>
            <dt>hello</dt>
            <dd>hello world</dd>
            <dd>hello world</dd>
            <dd>hello world</dd>
        </dl>

个别在footer底部介绍菜单分类中用的比拟多

表格

表格个别不用来布局,用来显示数据;

<table>
           <tr>
               <th>表头</th>
               ...
           </tr>
           <tr>
               <td>内容</td>
               ...
           </tr>
           ...
       </table>

表格属性

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

表格构造

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

<thead></thead>:定义表格头部:个别蕴含logo和导航等信息

<tbody></tbody>:定义表格的主体

表格题目

<caption></caption会居中显示在表格上

合并单元格

跨行(竖着):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标签的时候,被绑定的表单元素会获取输出焦点

 <label for="male">男生</label>
 <input type="radio"  id="male">

textarea控件

  <textarea cols="每行中的字符数" rows="显示行数"></textarea>

下拉菜单

<select name="" id="">
            <option value="">选项1</option>
            <option value="">选项2</option>
            <option value="" selected="selected">选项3</option>
        </select>

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

表单域

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

 <form action="url地址" method="提交办法" name="表单名称"></form>
属性 作用
action 收集信息传递给服务器进行解决,action指定接管并解决表单数据的服务器程序的url地址
method 用于设置表单数据的提交形式,其取值为get和post
name 名称

罕用新增标签

语义化标签header nav footer article section aside

datalist :配合input应用,输出时会提醒关键词

 <input type="text" placeholder="请输出明星" list="star">
       <datalist id="star"> 
            <option>杨超过</option>
            <option>刘德华</option>
            <option>那英</option>
            <option>姚贝娜</option>
            <option>钢铁侠</option>
       </datalist>

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

 <fieldset>
           <legend>用户登录</legend>
           用户名:<input type="text" name="" id=""><br>
           明码:<input type="password" name="" id="">
       </fieldset>

input type新增属性值:

**类型 应用示例** 含意**
email <input type=”email”> 输出邮箱格局
tel <input type=”tel”> 输出手机号码格局
url <input type=”url”> 输出url格局
number <input type=”number”> 输出数字格局
search <input type=”search”> 搜寻框(体现语义化)
range <input type=”range”> 自在拖动滑块
time <input type=”time”> 小时分钟
date <input type=”date”> 年月日
datetime <input type=”datetime”> 工夫
month <input type=”month”> 月年
week <input type=”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″有限循环)

多浏览器反对的计划

 <audio src="">
            <source src="...">
            <source src="...">
            您的浏览器不反对HTML音频播放性能
 </audio>

video:播放视频

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

多浏览器反对的计划和audio相似

评论

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

这个站点使用 Akismet 来减少垃圾评论。了解你的评论数据如何被处理