ACCP8.0 HTML标签
ACCP8.0 HTML标签
第一章
1、HTML超文本标记语言
2、网页<html></html>
3、网页头部<head></head>
4、网页标题<title></title>
5、网页主体<body></body>
6、DOCTYPE声明3种级别:
(1)Strict 严格类型
(2)Transitional过渡类型
(3)Frameset框架类型
7、网页摘要<meta>标签
8、字符编码:
gb2312简体中文
ISO-885901纯英文
big5繁体
UTF-8国际通用编码
9、W3C 万维网联盟
10、标题标签
<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>
11、段落<p></p>
12、换行<br/>
13、水平线<hr/>
14、字体加粗<strong></strong>
15、斜体字<em></em>
16、注释<!--注释内容-->
17、特殊符号
空格: 大于号:>
小于号:< 引号:"
版权符号:©
18、图像标签
<img src=“图片地址”alt=“图像的替代文字”title=“鼠标悬停提示文字”width=“图片宽度”height=“图片高度”/>
19、链接标签
<a href=“链接地址”target=“目标窗口位置”>链接文本或图像</a>
Target常用取值:_self(自身窗口)和_blank(新建窗口)
20、锚链接
<a name=“market”>目标位置乙</a>
<a href=“#market”>当前位置甲</a>
21、功能性链接
<a href=“mailto:电子邮箱地址”>联系我们</a>
第二章
22、无序列表 Type属性取值:disc实体圆心 square 实体方心 circle空心圆
<ul type=“”>
<li>列表项</li>
</ul>
23、有序列表 Type属性取值:1数字 A/a大/小写字母 I/i大/小写罗马数字
<ol type=“”>
<li>列表项</li>
</ol>
24、定义列表
<dl>
<dt>标题</dt>
<dd>内容</dd>
</dl>
25、表格
<table border=“ ”>
<tr>
<th>标题</th>
</tr>
<tr>
<td>内容</td>
</tr>
</table>
26、 表格跨列属性colspan 表格跨行属性rowspan
27、视频元素:controls手动控制播放 autoplay自动播放 loop循环播放
1、<video src=“视频路径” controls=“controls”></video>
2、<video controls><source src=“视频路径”></video>
28、音频元素:
1、<audio src=“视频路径” controls=“controls”></audio>
2、<audio controls><source src=“音频路径”></audio>
29、HTML5结构元素
<header></header>标题头部区域的内容(用于页面或页面中的一块区域)
<footer></footer>标记脚部区域的内容(用于整个页面或页面的一块区域)
<section></section>Web页面中的一块独立区域
<article></article>独立的文章内容
<aside></aside>相关内容或应用(常用于侧边栏)
<nav></nav>导航类辅助内容
30、iframe内联框架
<iframe src=“引用页面地址”name=”框架标识名”… ></iframe>
第三章
31、表单
<form method=“提交方式get/post” action=“提交页面”>
32、表单元素:
文本框:
<input type=“text” name= “元素名称”value=“初始值”size=“初始宽度”>
密码框:
<input type=“password” name= “元素名称”value= “初始值” maxlength= “最大字符数”>
单选按钮:<input type= “radio” name= “元素名称”value= “值” >
复选框:<input type= “checkbox” name= “元素名称” value= “值” checked= “checked”>
列表框:<select>
<option value= “值” selected= “selected”>显示文本</option>
<option value= “值”>显示文本</option>
</select>
提交按钮:<input type= “submit” name= “元素名称” value= “显示文字”>
重置按钮:<input type= “reset” name= “元素名称” value= “显示文字”>
普通按钮:<input type= “button” name= “元素名称” value= “显示文字”>
图片按钮:<input type= “image” name= “元素名称” src= “图片地址” >
多行文本域:
<textarea name= “元素名称” cols= “显示列宽” rows= “显示行数”>内容</textarea>
文件域:
<form action=“” method= “” enctype=”multipart/form-data”>
<input type= “file” name=“元素名称” >
</form>
邮箱:<input type= “email” name=“元素名称” >
网址:<input type= “url” name=“元素名称” >
数字:<input type= “number” name=“元素名称”min=“ ”max=“ ”step=“ ” >
滑块:<input type= “range” name=“元素名称”min=“ ”max=“ ”step=“ ” >
搜索框:<input type= “search” name=“元素名称” >
隐藏域:<input type=“hidden” name=“元素名称” value=“值”>
33、表单只读属性:readonly=“readonly”
34、表单禁用属性:disabled=“disabled”
35、域:<fieldset></fieldset>
域标题:<legend></legend>
36、表单元素标注:<label for= “元素id名称”>文本</label>
37、表单初级验证方法:placeholder(文本框提示) required(文本框填写内容不为空)
Pattern(文本框输入的内容是否与自定义的正则表达式相匹配)
第四章
38、定义样式信息
<style type=”text/css”></style>
39、链接外部样式表
<link href=“样式文件路径” rel=“stylesheet” type=“text/css”>
40、导入外部样式表
<style type=”text/css”>
@import url(“样式文件路径”)
</style>
41、样式优先级
行内样式>内部样式表>外部样式表
ID选择器>类选择器>标签选择器
42、高级选择器
(1)层次选择器(2)结构伪类选择器(3)属性选择器
第五章
43、<span>标签
44、字体样式
font-family:字体类型
font-size:字体大小
font-style:字体风格
font-weight:字体粗细
font:设置所有字体属性
45、文本属性
color:文本颜色
text-align:水平对齐方式 left左边 right右边 center居中 justify两端对齐
text-indent:首行缩进
line-height:文本行高
text-decoration:文本装饰 none无 underline下划线 overline上划线 line-through删除线
blink 文本闪烁
vertical-align:垂直对齐方式
文本阴影:text-shadow:color x轴位移 y轴位移 模糊半径;
46、超链接伪类
a:link 单击访问前
a:visited 单击访问后
a:hover 鼠标悬浮上
a:active 鼠标单击未释放
47、网页布局<div></div>标签
48、背景属性
background-color:背景颜色
background-image:背景图像
background-repeat: repeat水平,垂直两方向平铺
background-repeat: no-repeat不平铺
background-repeat: repeat-x水平方向平铺
background-repeat: repeat-y垂直方向平铺
background-position背景定位
background-size背景尺寸
49、列表样式
列表项符号list-style-type:none无 disc实心圆 circle空心圆 square实心正方形 decimal数字
列表项图片list-style-image:url(图片路径);
放置列表项list-style-position:inside放置文本以内 outside文本左侧,文本以外
50、CSS3渐变
linear-gradient(渐变方向,颜色1,颜色2, …)
第六章
51、border边框
border-top-color:上边框颜色
border-right-color:右边框颜色
border-bottom-color:下边框颜色
border-left-color:左边框颜色
border-color:边框颜色
border-top-width:上边框粗细
border-right-width:右边框粗细
border-bottom-width:下边框粗细
border-left-width:左边框粗细
border-width:边框粗细
border-top-style:上边框样式
border-right-style:右边框样式
border-bottom-style:下边框样式
border-left-style:左边框样式
border-style:边框样式
border:边框粗细 边框颜色 样式
52、margin外边距
margin-top 上外边距
margin-right 右外边距
margin-bottom 下外边距
margin-left左外边距
margin 边距
53、padding内边距
padding-top 上内边距
padding-right 右内边距
padding-bottom 下内边距
padding-left左内边距
padding 内边距
54、盒子模型总尺寸=边框宽度+内边距+外边距+内容宽度
55、box-sizing盒子模型布局
content-box:默认值
border-box:盒子的宽度或高度等于元素内容的宽度与高度
inherit:此值使元素继承父元素的盒子模型模式
56、圆角边框:border-radius
57、圆形:border-radius:50% (可制作半圆形、扇形)
58、盒子阴影:box-shadow:inset x轴位移 y轴位移 模糊半径 颜色;
第七章
59、display属性
display:block 块级元素默认值
display:inline 内联元素默认值
display:none 元素不显示
60、float浮动
float:left元素向左浮动
float:right元素向右浮动
float:none元素不浮动,默认值
61、clear清除浮动
clear:left 在左侧不允许浮动元素
clear:right 在右侧不允许浮动元素
clear:both 在左、右两侧不允许浮动元素
clear:none 默认值,允许浮动元素出现在两侧
62、overflow溢出处理
overflow:visible 默认值,多的内容出现在盒子之外
overflow:hidden 多的内容不可见
overflow:scroll 内容会被修剪,浏览器会出现滚动条
overflow:auto 如果内容被修剪,出现滚动条
第八章
63、position定位
position:static 默认值,没有定位
position:relative 相对定位,以标准流的排版方式为基础,然后使盒子在他原位置进行偏移,相对定位的盒子仍在标准流中
position:absolute 绝对定位,以父元素为基准进行定位,绝对定位会脱离标准流
position:fixed 固定定位,是以浏览器窗口为基准进行定位,当浏览器拖动时他位置依然保持不变
64、z-index 层叠
z-index属性用于调整元素定位时重叠上下的位置
65、透明设置
opacity:x (x值为0-1,值越小越透明) 如:opacity:0.4;
filter:alpha(opacity=x) (x值为0-100,值越小越透明) 如:filter:alpha(opacity=40);
第九章
66、变形函数
transform:[transform-function]*;
常用的transform-function:
translate():平移函数 scale():缩放函数 rotate():旋转函数 skew():倾斜函数
CSS3 3D变形函数:translate3d():平移函数 scale3d():缩放函数 rotate3d():旋转函数
2D变形
2D位移:translate(x轴,y轴) 2D缩放:scale(x轴,y轴)
2D倾斜:skew(x轴,y轴) 2D旋转:rotate(x轴,y轴)
67、过渡属性
transition:[transition-property transition-duration transition-timing-function
transition-delay]*
transition主要包括以下四个属性值:
transition-property:指定过渡或动态模拟的CSS属性
transition-duration:指定完成过渡所需要的时间
transition-timing-function:指定过渡函数
transition-delay:指定过渡开始出现的延迟时间
ACCP8.0 HTML标签的更多相关文章
- struts2.0 s标签_小小鸟_百度空间
struts2.0 s标签 1. Struts2页面开发中常用标签使用说明 1.1.往action里传值的使用方式: <input name="userName" type= ...
- accp8.0转换教材第10章Ajax和jQuery理解与练习
C/S (Client/Server)结构,即大家熟知的客户机和服务器结构. B/S(Browser/Server)结构即浏览器和服务器结构. 认识ajax .XMLHttpRequest.使用jqu ...
- 生鲜配送管理系统_升鲜宝V2.0 小标签打印功能说明_15382353715
小标签打印说明 小标签打印可以打印本系统的订单商品数量,也可以把外部的订单商品导入本系统进行打印. 打印本系统中的订单商品操作说明 1.1 界面说明 1.2 查询条件 1.2.1 ...
- JSP2.0自定义标签
JSP1.0中可以通过继承TagSupport或者BodyTagSupport来实现自定义的tag处理方法. JSP2.0中也支持另外一种更为简单的自定tag的方法,那就是直接讲JSP代码保存成*.t ...
- Jsp2.0自定义标签(第二天)——自定义循环标签
今天是学习自定义标签的第二天,主要是写一个自定义的循环标签. 先看效果图: 前台页面Jsp代码 <%@ page language="java" contentType=&q ...
- Jsp2.0自定义标签(第三天)——EL表达式的使用
1.提出问题: 我们经常会看到这样的jsp页面代码: 浏览器显示: 为什么会在页面输出:Hello World ,${per}究竟是如何找到“Hello World”的呢? 2.分析问题: 要想解决 ...
- Jsp2.0自定义标签(第一天)——一个简单的例子
今天是学习自定义标签的第一天 Jsp2.0以来,自定义标签的实现比传统标签的实现容易了很多,一般只要extends类SimpleSupport重写doTag()方法即可. 先看最简单的例子,输出一个H ...
- Html4.0.1 标签使用笔记
1.lang=zh,en有什么用? 告诉搜索引擎爬虫,网站是关于什么内容的,优先显示网站排名.一般竞价排名,根据百度搜索引擎,需要签订关键词协议,首页第一个竞价排名大概是30-50元/条,竞价排名范围 ...
- as3.0 [Embed]标签嵌入外部资源
1.[Embed]嵌入资源 ActionScript代码的顺序非常重要.你必须在声明变量前添加[Embed]元数据标签,而且这个变量的类型会是Class; package { import flash ...
随机推荐
- 这么用Mac才叫爽!
用了近一年的 Macbook Pro,已经离不开它了.真是生活工作学习必备之良品啊. 如果你将要买苹果电脑或者刚买,那么不妨看看此文.推荐一些个人觉得好用的软件,而Mac本身的使用技巧----触控板. ...
- 【Canal源码分析】Sink及Store工作过程
一.序列图 二.源码分析 2.1 Sink Sink阶段所做的事情,就是根据一定的规则,对binlog数据进行一定的过滤.我们之前跟踪过parser过程的代码,发现在parser完成后,会把数据放到一 ...
- 给Ubuntu18.04安装mac os主题
安装完的效果: 参考: https://linuxhint.com/gnome-tweak-tool-ubuntu-17-10/ ----------------------------------- ...
- 基于 Webpack 4 和 React hooks 搭建项目
面对日新月异的前端,我表示快学不动了
- jdk源码阅读笔记-LinkedList
一.LinkedList概述 LinkedList的底层数据结构为双向链表结构,与ArrayList相同的是LinkedList也可以存储相同或null的元素.相对于ArrayList来说,Linke ...
- typeconfig.json配置说明
如果一个目录下存在一个tsconfig.json文件,那么它意味着这个目录是TypeScript项目的根目录. 不带任何输入文件的情况下调用tsc,编译器会从当前目录开始去查找tsconfig.jso ...
- SpringBoot SpEL表达式注入漏洞-分析与复现
目录 0x00前言 0x01触发原因 0x02调试分析 0x03补丁分析 0x04参考文章 影响版本: 1.1.0-1.1.12 1.2.0-1.2.7 1.3.0 修复方案:升至1.3.1或以上版本 ...
- [翻译 EF Core in Action 1.7] MyFirstEfCoreApp访问的数据库
Entity Framework Core in Action Entityframework Core in action是 Jon P smith 所著的关于Entityframework Cor ...
- 使用JavaScript和D3.js实现数据可视化
欢迎大家前往腾讯云+社区,获取更多腾讯海量技术实践干货哦~ 本文由独木桥先生发表于云+社区专栏 介绍 D3.js是一个JavaScript库.它的全称是Data-Driven Documents(数据 ...
- Java虚拟机一:运行时数据区域
java虚拟机在执行java程序的过程中,会把内存划分为若干个不同的数据区域.每个区域都有各自的用途,创建和销毁时间,按照<java虚拟机规范(Java SE 7 版)>的规定,虚拟机运行 ...