1. 首页
  2. IT资讯

HTML标签笔记总结(归纳)

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

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;image.png
list-style-type:square;image.png

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

ul,lipadding:0;margin:0;list-style:none}

有序列表 ol li

CSS样式

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

自定义列表

 <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控件

属性属性值描述
typetext文本
typepassword密码
typeradio单选(input要是同一个name)
typecheckbox复选
typebutton按钮
typesubmit提交
typereset重置
typeimage图片按钮,配合src使用
typefile文件域(上传文件)
name用户自定义控件的名称
value用户自定义input默认的文本值
size正整数input控件的显示宽度
checkedchecked定义选择控件默认被选择的项
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类似

本文来自投稿,不代表程序员编程网立场,如若转载,请注明出处:http://www.cxybcw.com/201952.html

联系我们

13687733322

在线咨询:点击这里给我发消息

邮件:1877088071@qq.com

工作时间:周一至周五,9:30-18:30,节假日休息

QR code