html5
2018-11-20 13:35:19 0 举报AI智能生成
HTML5基础学习者可整理学习框架。
作者其他创作
大纲/内容
Javascript
css样式
脑图代码
CSS样式表引用
行内用法
内嵌用法
外部样式表
路径
相对路径
绝对路径
样式选择器
<span>ID选择器 #id{属性名：属性；}</span>
<span>类名选择器 .class｛color:red;｝</span>
<span>标签选择器 div{width:80px;}</span>
后代选择器 <span>#links a {color:red;}</span>
编码规范
css注释
书写风格
单行
多行
类名命名
书写方式(连字符) list-tit
书写方式(下划线) list_tit
书写方式(小驼峰) listTit
书写顺序
显示样式
自身样式
文本样式
CSS3新样式
书写样例
样式重置
防止默认样式对CSS书写带来不便
保证网页在各个浏览器表现一致性
常用样式属性
文本
字体
大小写加粗修饰
行高
对齐
溢出修剪
背景属性
方框属性
margin边界属性
padding填充属性
border边框属性
<span>列表属性</span>
<span>编号类型</span>
<span>编号图像</span>
<span>标记位置</span>
超链接属性(伪类选择器)
cursor<span>光标属性</span>
<span>布局相关属性</span>
盒子模型
属性值
方向属性
边框颜色表示方法
标签嵌套
<span>浮动float</span>
兄弟元素clear:both
空标签清除浮动
br标签清除浮动
<span>overflow溢出处理</span>
<span>display显示属性</span>
opacity<span>透明度</span>
<span>position位置定位方式</span>
html
项目文件夹
cn
存放中文网页文件
en
存放英文网页文件
images
图片
css
CSS样式表
js
js脚本
imagestudio
PSD源文件
flash
flash文件
media
媒体文件
font
自定义字体
project
工程项目资料
temp
客户原始资料
html头部模板
DOCTYPE声明
charset
UTF-8
name属性
generator:代码的生成工具，向搜索引擎说明网页使用哪种软件工具开发的
keywords：关键词，多个关键词用英文逗号隔开
description：描述，介绍网站内容
author：作者，说明网站作者
copyright：版权，标明版权信息
renderer:渲染内核，控制浏览器以什么内核进行渲染
robots：机器人，向搜索引擎说明文件检索方式，即哪些页面需要被检索，主要有以下属性
all:文件被检索，页面链接可以查询
none:文件不被检索，页面链接不可被查询
index:文件被索引
follow:页面上链接可被查询
noindex:文件不被检索，页面链接可以被查询（不让robot/spider登录）
nofollow:文件不被检索，页面上链接可以被查，（不让robot/spider登录）沿着此页深入查
http-equiv属性
content-type:编码类型
content-language:语言
refresh:定时，让页面指定时间内刷新或者跳转至其他界面
expires:到期定时，设置到期时间，过期需要重新调用
pragma:缓存调用，离开页面后无法从Cache中调出
set-cookie:设置cookie缓存过期时间
pics-label:进行网页等级评定，年龄限制
windows-target:防钓鱼防止被人当frame界面调用
page-enter:设定进入网页时的特殊效果
page-exit:设定离开网页时候效果
常用标签
网页结构
html
body
head
meta
title
CSS及JS引入
link
style
script
布局标签
div
标题标签h1~h6
段落<p>...</p>
align=""
有序：<ol><li>...</li></ol>
（序号类型有：1、a、A、ⅰ、I）
无序：<ul><li>...</li></ul>
none无
disc(默认值,实心圆点)
circle(空心圆环)
square(空心正方形)）
decimal(阿拉伯数字)
lower-alpha(小写引文字母)
upper-alpha(大写英文字母)
upper-roman(大写罗马数字)
lower-roman(小写罗马数字)
自定义列表<dl> <dt> <dd>哈哈</dd>..</dt>.. </dl>
<span style="color: rgb(51, 51, 51); font-family: "Microsoft Yahei", "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 12px;"><br /></span>
用于换行
<hr/>水平线
注释
<a>...</a>
电子邮件链接
href=""
锚点链接
<img>...</img>
src=""
段落文本(行内标签)
默认span
强调em
强调strong
变量var
br
加粗b
倾斜i
下划线u
特殊符号
空格
&nbsp;
大于号
&gt;
小于号
&lt;
引号
&quot;
版权号
&copy;
表单提交
<input>
text
password
密码遮掩
radio
单选
submit
提交
reset
重置
checkbox
复选
<span>image(alt)</span>
定义图像作为提交文本
<span>file</span>
浏览选择文件上传
<span>readonly</span>
规定文本只读
<span><form>标签</span>
<span>action 属性：规定向何处提交表单的地址（URL）</span>
<span>method 属性：定在提交表单时所用的 HTTP 方法：（默认：GET），POST</span>
<span><fieldset> 将表单内容的一部分打包，生成一组相关表单的字段</span>
<span><legend> 标签为 fieldset 元素定义标题</span>
<span>name 属性是 <fieldset> 在 HTML5 中的新属性</span>
legend图例
定义表单字段域标题
label控制标签
<textarea></textarea>多行文本框
<select></select>下拉列表
option定义下拉选项或者列表选项
optgroup定义下拉选项组
button表单发送按钮
表格
table-tr-td
table定义一个表格
caption定义表格标题
thead定义表格头部区域
tbody定义主体内容区域
tfoot定义脚部区域
col表格列区域
colgroup定义表格数据列组
tr表格行
td单元格
th表格表头单元格
0 条评论
下一页
