HTML学习笔记总结
01目录,资料,工具,规范
HTML学习01目录,资料,工具,规范本文格式规范在线文档查询老师个人网站课程录播百度网盘02基础标签网页标准模板font标签span标签p标签a标签图片的相对路径-relative图片的绝对路径-absolute标签页内锚记,锚点定位特殊字符表示pre标签,这个标签内可以输入各种原生文字!!上标下标marquee标签03重要的图片标签-img图片的格式知识排列图片背景图片给图片加上超链接的方法排列图片浮动图像空链接04清单,表格,frame列表有序标签ol,无序标剑ul表格frame与框架一类的东西标签性质基础标签的单双，复合标签块级元素与行内元素Id与name的区别表单的使用-from-labelinput标签--数据交互重要标签label标签表格table 框架05css样式初学+选择器css选择器常用选择器 class id name属性选择器特殊选择器伪类伪元素打style类的指法,玩将分号打出来!!关于颜色style里面如何注释!!(h6代表小知识点)class类的命名如何进行?06-div盒子模型body的字体默认设置,设计的行业标准布置鼠标悬浮时的样式盒子模型margin与padding的用途body的margin与padding的默认设置css中的定位才是核心中的核心,必须好好学习css定位机制,非常重要----普通流,浮动.定位.float属性--脱离文档流,不占空间07字体样式细讲相对单位em与h1标签,h2标签字体大小的原理机制(默认大小,绝对大小,相对大小)标准默认字规范08backgroundjs00问题汇总
本文格式规范
H1 上课节数+具体内容 编号标记为哪一节课相关知识点H6 知识点,能显示在大纲里的最小单位,用来放一些知识点的标题(尽量让大纲渗透每一个知识点)跟据前后的标题级别决定当前知识点标题级别右键可以快速调节标题级别00最后一类是问题汇总,在这里将搞不明白的问题向老师资询,同时自己标注出来,有时间进行查询与询问答疑老师.ing...
在线文档查询
http://www.w3school.com.cn/tags/html_ref_language_codes.asp
02基础标签
网页标准模板
国际化网页标准模板
<html><head><!--声明当前页面的编码集：charset=gbk,gb2312(中文编码），utf-8国际编码--><meta http-equiv="Content-Type" content="text/html; charset=utf-8"/><!--声明当前页面的三要素：标题，关键词，描述--><title>国际化标准网页模板 （小于31个字）</title><meta name="keywords" content="关键词，关键词，关键词"><meta name="description" content="简介与描述，80个字内"><!--css/js--></head><body></body></html>这节课，学习了一些基本的标签
在做作业的时候，才发现简单的页面也会有许多的问题
标题类标签自带margin
比如<h1></h1>标签，是自带margin的，当要将别的，诸如div元素想要紧贴带有<h1>标签的<div>时，无法贴合，这种细节只有练习的时候才能知道，所以要多多练习。
font标签
<font size="6" face"微软雅黑">文字</font>
span标签
p标签
a标签
图片的相对路径-relative
<img src="../../images/1.jpg"/> 两个点,代表返回上一层文件夹
图片的绝对路径-absolute
<img src="C:\work\Java\course\vip\Arry精英战队\JavaWeb\chapter04\chapter04\images\bc.jpg" />标签页内锚记,锚点定位
<h3>矛点定位</h3><a href="#haha">点我可以跳转到标题栏</a>可以用来做页内定位,用来做页内导航,目录.
特殊字符表示
pre标签,这个标签内可以输入各种原生文字!!
上标下标
H<sub>2</sub>CO<sub>3</sub> = H<sub>2</sub>O + CO<sub>2</sub> 2<sup>3</sup> +3<sup>3</sup> = 35 <a href="#">这是一个超链</a>将href=#是指联接到当前页面，其实是无意义的，页面也不会刷新，关键是后面的onclick，当点击关闭时，会执行window.close()代码。
marquee标签
<marquee>移动的文字<marquee>03重要的图片标签-img
图片的格式知识
不同格式的图片
jpg
通用最多
gif
动图
png
高清+透明
图片标签的四要素 width height src alt
<img src="" alt="" width="" height="">标签内的属性都是用双引号隔开彼此
样式内都是用分号来隔开彼此
还有title属性,用来将鼠标放在上面的时候显示的文字
<img src="http://p0.qhimgs4.com/t01a10bc4aece0e5061.webp" alt="图片我找不到了" title="这是马云" width="300px" height="400px">图片的路径
.. 代表返回上一层文件夹
绝对路径与相对路径
正斜框向左偏,反斜杠向右偏
绝对路径用正斜杠,相 对路径用反斜杠
Img标签路径
img标签里，关于引入文件路径，课堂上并没有讲本地路径如何链接。还有以前记得有一个相对路径的概念。回来自己再查查资料
· 图片大小调节，这里还是有点迷，回来再仔细的研究一下
· 适配问题
关于img 与div 的适配
div与 浏览器的适配
这些排版的细节，概念不是很懂，碰到具体问题自己在想一下。
排列图片
背景图片
怎么做到不重复
怎么居中
给图片加上超链接的方法
<a href=""><img src="" alt="" width="" height="" /></a>标签内用双引号隔开属性
排列图片
（align="bottom / middle / top"）;
浮动图像
（带有图像的一个段落，图像的 align 属性设置为 "left"图像将浮动到文本的左侧）;
空链接
<a href="#">哈哈哈</a><a href="###">哈哈哈</a><a href="javascript:void(0)">哈哈哈</a>04清单,表格,frame
列表
是块级元素
列表标签
<dl><dt>编程语言</dt><dd>java</dd><dd>c++</dd><dd>python</dd><dd>web</dd><dd>html</dd></dl>在导航栏应用较多
一些标签在哪会用到，实际上的结合了！！
有序标签ol,无序标剑ul
ol---- orderlist
ul---- unorderlist
<h2>无序列表</h2><ul><li>翱翔</li><li>喵星人</li><li>jazc侠</li><li>Duckjoe</li><li>无名</li></ul>
<h2>有序列表</h2><ol><li>人狠话不多</li><li>温柔的王</li><li>莫瑟Mosir</li><li>大哈刘二</li><li>鱼摆摆</li></ol>无序列表的三种样式
type=“disc/circle/square”
嵌套列表
裸露了的文件,可以套一个<span>或者一个<a>来包住,用a包住会有
露在外面挺冷的!!
当嵌套时,不要让其中的内容裸露出来,用span标签,或者 a标签包裹起来.
<ul><li>列表项1</li><li>列表项2<ul><li>列表项01</li><li>列表项02</li><li>列表项03</li></ul></li><li>列表项3</li></ul>这里却没有出现!!
<a href="javascript:void(0)">空</a>line-height 行高度
CSS 文本属性定义文本的外观：
<1> 文本的颜色（color ，背景<background-color>） ;
<2> 字符间距 （letter-spacing: 20px; letter-spacing: -0.5em;）;
<3> 行间距 （line-height: 30px; line-height: 200%; line-height: 2;）;
<4> 对齐文本 （text-align: center/left/right） ;
注：16px=1em, 将原来的px数值除以16，然后换上em作为单位就ok
表格
是块级元素,
表格边框是比较有用的一个样式设置
style="border-collapse: collapse;
<table border="1" style="border-collapse: collapse;"></talbe>这样调置表格边框就是单边框了,而不是之前的双边框
<html lang="zh-Hans"><head><meta charset="UTF-8"><meta name="Author" content=" "><title>表格</title></head><body><!--表格标签 很早以前网页都是用table去写的tabletheadcaptiontobodythtrtdtfootcolspan 列合并rowspan 行合并--><table border="1" style="border-collapse: collapse;"><thead><caption>人员表</caption><tr><th>姓名</th><th>年龄</th><th>性别</th><th>地址</th><th>电话</th></tr></thead><tbody style="background: url(https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=2246315156,1662169434&fm=27&gp=0.jpg) center;"><tr><td style="color: yellow;background: black;">Jazc侠</td><td>18</td><td>男</td><td>广西</td><td>110</td></tr><tr><td style="color: red;background: skyblue">站撸</td><td>20</td><td>男</td><td>四川</td><td>123456</td></tr><tr><td style="color: green;">HeNTai</td><td>18</td><td>男</td><td>黑龙江</td><td>998</td></tr><tr><td style="color: pink">晶晶</td><td>16</td><td>萌妹子</td><td>绍兴</td><td>6666</td></tr></tbody><tfoot><tr><td colspan="5" style="text-align: center;">2018-01-16</td></tr></tfoot></table><table border="5" style="border-collapse: collapse;"><caption>课表</caption><tr><th>星期一</th><th>星期二</th><th>星期三</th><th>星期四</th><th>星期五</th><th>星期六</th><th>星期天</th></tr><tr><th>学习</th><th>学习</th><th>学习</th><th>学习</th><th>学习</th><th>学习</th><th>学习</th></tr><tr><th>学习</th><th>学习</th><th>学习</th><th>学习</th><th>学习</th><th>学习</th><th>学习</th></tr></table></body></html>frame与框架一类的东西
iframe 元素会创建包含另外一个文档的内联框架（即行内框架）。
可以用来将别的区或的内容这个地方显示出来,相当于一个窗口
百分比类型的宽度与高度都是基于父亲内容进行分析的！！
<html lang="zh-Hans" style="height: 100%;"><head><meta charset="UTF-8"><meta name="Author" content=" "><title>iframe</title></head><body style="height: 100%"><iframe src="03 表格.html" frameborder="1" scrolling="auto" width="300" height="300" seamless></iframe><!--网页理论上可以无限延长 body标签的高度可以无限延长的 取决于里面的内容给宽度的时候 body宽度是确定的 所以可以去使用 80% 继承body的宽度如果说给body也给了100% iframe高度又没效果了 那是因为body 他的父级元素高度是不确定的html 当给html元素给一个固定的高度的 body继承的高度就有效果了推出结论body html本身是没有高度的 需要靠文档的内容去填充大小.比如填充了1000px高度的东西 90% 900px--><iframe src="http://www.baidu.com" frameborder="1" scrolling="auto" width="50%" height="80%" seamless></iframe></body></html>标签性质
基础标签的单双，复合标签
基础标签
单标签
img标签
a标签
hr标签
br标签
input标签,这个是单标签
双标签
h1 ~ h6 标签 标题p 标签 文字段落div 标签 盒子 用来分割页面span 标签 组合strong 标签 加粗(在seo中有强调作用)b 标签i 标签 倾斜em 标签pre 标签 保留原有格式 (显示代码)a 标签 超链接 锚点 namemarquee 标签 弹弹乐
复合标签
复合标签
列表ul liol lidl dt dd表格table
块级元素与行内元素
<html lang="zh-Hans"><head><meta charset="UTF-8"><meta name="Author" content=" "><title>块级,行内</title></head><body><!--块级元素1. 会根据父级的大小去适应宽高2. 独占一行h标签p标签div标签pre标签ul liol litabledl行内1. 不会换行2. 给宽高是没有效果的img标签a标签b标签strong标签i标签em标签iframe--><h1 style="background: red;width: 80%">我是块级元素</h1><span>我是行内标签</span><span>我是行内标签</span><span>我是行内标签</span><span>我是行内标签</span><span>我是行内标签</span><span>我是行内标签</span><div style="width: 100px;height: 100px;background: red">我是行内标签</div></body></html> 块级元素(独占一行的)（这一行只能有我，不能有别人，这个是不利于拿来当笔记的，所以此时用div来限制块级标签的功能）
这个属性是设计网页框架时,通过属性,合理选择标签来显示内容
<h1></h1><p></p><div></div><pre></pre<Ul></ul><ol></ol>menu也是块级标签,但是基本不用,主流浏览器都已经不支持了!!
行内标签（不会换行）（这些标签给其内部宽高是没有效果的）
Img
A
B
Strong
I
Em
Span
Ifram
内联标签,只能放文本,或者别的行内标签,(又叫内联标签)
Id与name的区别
还有锚链接时， 通过id 与name进行指针的区别
总结以后可以理解为，id就是身份证，每个人的身份证独一无二
Name就是姓名，而重名重姓的人非常多
So问题：
总之在听完这些标签以后,发现还是要拿一些实例来练,这样才能发现问题,发现自己没有意识到的关键细节.
问题：
关于企业内部的一些书写规范是什么样的,这样的知识可以在哪去系统学习?
Html5现在已经经较的通过，但是企业内部对于 html书写的格式是不是一样考虑到一些不支持html5的浏览器，企业内是如何处理的
整理成一个笔记
因为没有全局搜索功能
不断的上传整理也笔记麻烦
后期更新前期的知识点也会麻烦,所以放在一个文档里面就可以了!!
-
有时间进一步完善相关类型里面的属性信息
表单的使用-from-label
textarea标签
应用在一个输入大量文字的输入框里面.
div布局里面,不用上面的写法,而是用div里面的 contenteditable="true"
<div class="t_message" contenteditable="true"></div><!--这个输入框依然用div做一个输入框,用contenteditable这个参数来执行!!-->
input标签--数据交互重要标签
input标签
checkbox 类型
~相关知识点---label标签(用于扩大点击范围)
radio 类型
hidden类型
按钮组
button普通按钮类型
reset 重置按钮类型
submit 重置按钮类型
select标签
**文本-text
**文本域-textarea
radio单选标签类型
<input type="radio">单选按钮</input>如何做单选(用丗一个name值,就会出现单选)
<form>程序员中最帅的一个是谁(<br><input type="radio" name="list" ><input type="radio" name="list" ><input type="radio" name="list" ></form>
select标签
<form><select><option></option><option></option><option></option></select></form>select不是input的子类,这一点记住了,是双标签,同时内部的选项option也是双标签
<form>出生年月:<select><option>请选择年份</option><option>1990</option><option>1991</option><option>1992</option></select>年<select size="3"><option>请选择月份</option><option>1月</option><option selected="selected">2月</option><option>3月</option></select>月</form>这是一个出生年月的表格, size属性表达了选项,能展示几个
"option"里面的selected属性,可以解决可以在选择前默认选中
默认选中
选雷的下载列表,网页智能的帮你选好,让你进行下一步操作
hidden的属性
<input type="hidden" name="new" value="null" />在表单里自动提交一些用户不需要知道的本地信息,用户使的端口,用的电脑还是手机,是不是新用户等等.
如何制作上传按钮
<form action="#" method="get">用户名:<input type="text" name="username" /><input type="submit" value="提 交" /></form>还在form表单里面定义好行为与上传数据的方法method,然后在其中制作一个 type为submit的按钮,value就是显示在按钮上的文字
我应该把之前写的代码全部整理到这里来
将现有代码的文件都在这里保存一下,然后那些文件夹就不用天天去看了,因为一个文件夹的点开,也比较的没有效果.
label标签
在label元素内点击文本,会触发此控件
当用户选择该标签时,浏览器会自动将焦点转到和标签相关的表单控件上
属性 "for" 用来指向 对应控件的 id
<form>性别:<input type="radio" name="gender" id="man" /> <label for="man">男</label><input type="radio" name="gender" id="woman" /><label for="woman">女</label></form>目的是用来提升用户的点击体验,因为它扩大了点击的范围
将要可以点击的区域括起来,用for指向点击的目换.类似于 a标签里的target!!
在表单里面添加默认值的方法
每一种input或者select等等,都可以设置默认值
radio里面是这样的
<input type="radio" name="gender" id="secrect" checked="checked" /><label>保密</label>checkbox里面是这样的
按钮
重置
<input type="reset" value="重 置">
submit
<input type="submit" value="提交">普通
fille
表格table
tabel
tr
th
td
td
<tbody></body这个tbody与thead可以将表格内的区域进行区分,方便后期进行样式调整!!
一个代码的造型
里面有默认选中的操作
代码的记忆方法,就是不停的写,写到手非常的熟练!!
在这里保存代码,然后写一些与代码相关的东西,在这里写,方便一遍遍的看!
但是实现的效果观看起来,不是很方便.
框架
fremset
注意事项
1fremset与框架标签和body是同一级别;
2不能放置其它内容
因为其本身就是用来定制框架的.加入文字是怎么回事呢
3不论是rows行还是cols列,加起来100%
frame的级别特别高,不能放到body里面
<frameset rows="70%,*">百分比的省略写法,自动补全剩下的30%
混合框架
<html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"/><title>HTML标签 - 导航框架 - Arry老师</title><meta name="keywords" content="关键词,关键词"><meta name="description" content=""></head><frameset rows="70%,*"><frame src="f_top.html"></frame><frameset cols="20%,*"><frame src="left1.html"></frame><frame src="right.html" name="frameName"></frame></frameset><!--frameset里面再放一个frameset进行布局--></frameset></html>fremeset是比较高的级别,可以定义内部的引入的frame
也就是fremeset里面放入具体的freme
freme放入以后却没有多大的作用了!!
iframe的意义是insert frame.在网页中插入的frame!!
在seo优化里面,能不用iframe就不用iframe!!
frame可以对网页进行整体布局?原来我一直以为是用div来进行布局的
看来真正起作用的是frame
垂直框架
水平框架
混合框架
导航框架
<frameset cols="20%,*"><frame src="left1.html"></frame><frame src="right.html" name="frameName"></frame></frameset> <a href="1.html" target="frameName">5月9日第一节作业</a> <br /><br /><a href="2.html" target="frameName">5月10日第二节作业</a> <br /><br /><a href="3.html" target="frameName">5月11日第三节作业</a>5月9日第一节作业是显示的文字
href是超链接要显示的内容
target是显示的位置,如果是_blank,是在新窗口中打开,如果是 指向某个frame的名字,则是在那个frame里面显示
这里要单独给frame建一个name,不是将target导向frame加载的html,而就是指向frame
内联框架
05css样式初学+选择器
css就是美丽的衣服
style是衣柜
style必须放在head里面,因为网页加载是有顺序的,css这样的东西,应该先回载.
比喻: 起床以后,要先穿衣服再出门
css选择器
常用选择器 class id name
标记衣服,这是我的衣服你不能穿
class 通用型,一类人都可以穿这个衣服
.人类(用符号.点来进行索引,代表在搜索类样式)
id 唯一时用id,通用性不强
name 通用型也不强
id #id{}class .class{} 用于针对批量同属性的对象tag div{} p{} <!--style与id的配对--><style>#341226****{}</style? <!--以下是style与相应带有class名称的div 配对!!--><style>.human{width:300px;height:100px;background:red;}</style>这里后面用大括号** { }**
同时内部 变量名与值之间只用:冒号就可以了,声明与声明之间用分号隔开
<div class="human"></div>与class下的子类进行配类
.arry .a_box{width:100px;height:300px;background:#F90;}
sytle与标签元素选择性定位
h1{}
例:<div class="human" id:"341226****" name="PHIL">属性选择器
属性选择器(针对某个标签的参数进行修饰)div[title="123"]{color:red;}<div title="123"></div>
特殊选择器
> 只找儿子(子集)+ 只找紧邻的兄弟(邻居)~ 会找到所有的邻居
伪类
伪类链接伪类:link:hover:active:visited:target表单:focus需要一个父级包裹起来:first-child:last-child:first-of-type:last-of-type
层级选择p span{color:red;}
伪元素
伪元素区别伪类的关系 它们没关系1. 写法 ::::before::after::first-letter::first-line
打style类的指法,玩将分号打出来!!
background-position:;(把分号先打出来) background-position:top left;
关于颜色
顔色的单位
1 十六进制
2 css中的缩写
关于网业优化的技术!!
3 英文单词
| golden | pink | yello |
| orange | pruple | blue |
| black | whit | red |
空格与大小写
属性与值之间的空格不影响样式, 一个声明与另一个声明之间有没有空格不受到影响.
大小写完全随意,同时在html的标签里,也是不区分大小写的!!
逗号隔开
h1,h2,h3{color:green;}
.arry{width:200px;height:200px;background:green;text-align:center;line-height:200px; border-radius:100px;}边框边成圆形,用起来特别好看.
border-radius:100px;
一个框中,文本出现在哪个高度上用这个样式属性
line-height:200px
style里面如何注释!!(h6代表小知识点)
/这里是注释/
/*这里是注释*/
class类的命名如何进行?
1.见名知意
2.不能以数字开头
3.用"-"横杠与"_"下划线命名,类中的了类!!
css放在哪
内嵌样式,文内样式
内嵌的样式与标签自带的属性是两个概念要区分开;
外部引用样式link样式 .css格式的文件引用
<head><linkk rel="stylesheet" href="index.css"></head> 另一种是在<style>里面引入的,但必须是第一行<style>@improt url(style.css); 第一行</style> 行内样式
<p style="font-size:12px;font- weight:bold;color:red;background:yellow">Hellod</ p>以style开头的就是css的样式属性标识双引号里面,用正常的css格式书写,冒号分开变量与值,分号区分不同的区域!!另一种是在style里面引入
css中的背景相关设置
<1> background-color: 规定要使用的背景颜色;
对于被覆盖的属性,后面的会覆盖前面的事情.
<2> background-position: 规定背景图像的位置;
<3> background-size:规定背景图片的尺寸;
<4> background-repeat:规定如何重复背景图像;
背景重复的两种写法
background:url("images/1.gif") no-repeat; background:url("images/1.gif");background-repeat: no-repeat;只进行横向平铺
background-repeat:repeat-x;只进行纵向的平铺
background-repeat:repeat-y;如何将背景图片放在特定的位置?
background-position:background-position:top center; 垂直居上,水平居中background-position:top left;background-position:top right; 垂直居上,水平居右./*background-position:center left;这样会出现问题,只出现半个图片*/网页滚动时,如何何证一个组件一直停留在相对位置?
.arry{position:fixed;right:10px;top:200px;}position属性设为fixed,图片就与浏览器生成相对位位,不会移动!!
大型网站的打开网页,加载技术是葵花宝典 jax 异步加载
没有用延迟加载.
<5> background-image:把图像设置为背景;
06-div盒子模型
关于margin,padding
body的字体默认设置,设计的行业标准
body{font-size:12px;font-family:"微软雅黑";color:#666;}在body里见到了文字,条件反射要写这个.
设定body字体的
font-family:"微软雅黑"; <style type="text/css">*{margin:0;padding:0;}body{font-size:12px;font-family:"微软雅黑";color:#666;}.desc{/*color:文本颜色*/color:#F30;/*字符间距 （letter-spacing: 20px; letter-spacing: -0.5em;）;letter-spacing:12px;*//*将段落的第一行缩进 text-indent（将段落的第一行缩进）*/text-indent:10px;/* 这里输入html的css实现缩进的方法 */}.phil{/* 1em = 12px */letter-spacing:1em;/*行间距 line-height*/letter-spacing:1em;line-height:30px;}.shanxi{background:gray;color:yellow;/* color默认是指文字的颜色,background默认是指背景颜色 */padding-top:60px;padding-bottom:60px;/* bottom是正确的拼写,button是什么? */margin:15px;/*文本的对齐方式：left,center,right 控制容器中的文本对齐方式*/text-align:right;text-align:left; /*居左对齐 默认值*/font-size:16px;text-align:center;/*上划线*//*穿过文本的一条线*/text-decoration:line-through;text-decoration:overline;/* overline是在文字上方悬浮的文本 */}.shanxi:hover{/*text-decoration装饰文本*/text-decoration:underline;}/* 这是悬浮时改变文本的样式 */.price{font-size:20px;margin-top:50px;}</style></head><body><h1>CSS文本的控制</h1><p class="desc">“陕西十大怪”（又称“关中十大怪”，英文Ten oddities in Guanzhong或Ten oddities in middle Shaanxi）是指陕西中部的关中地区（西安、咸阳、宝鸡、渭南、铜川等市）出现的十种奇特民俗习惯。</p><p class="phil">实际上“陕西十大怪”中的风俗仅出现在关中一带，在陕西的大部分地区并非如此。陕西省地理纬度跨度极大，从北至南存在陕北（黄土高原为主）、关中（渭河平原为主）、陕南（以秦岭以南的汉水流域为主）三大自然差异巨大的区域。以关中一地的风俗概括整个陕西，存在以点概面的概念缺陷，亦多表述为“关中十大怪”以去除歧义。</p><p class="shanxi">“陕西十大怪”（又称“关中十大怪”，英文Ten oddities in Guanzhong或Ten oddities in middle Shaanxi）</p><p class="price">价格：<del>原价999</del> ，现价99</p></body></html>布置鼠标悬浮时的样式
.shanxi:hover{/*text-decoration装饰文本*/text-decoration:underline;}使类中的英文首字母大写
.capitalize{text-transfom:capitalize;}盒子模型
margin与padding的用途
可以用margin与padding来调节内外盒子的相对位置,而不是用position这种方法!!
上面的方法更好理解!
body的margin与padding的默认设置
*{margin:0;padding:0}
<style type="text/css">*{margin:0;padding:0;}.phil{width:300px;height:100px;background:#FC0;/*外边距*/margin:200px auto;/*增加元素框的总高度，增加50px*/padding-top:50px;/*内边距*/padding:20px; }</style>
css中的定位才是核心中的核心,必须好好学习
margin与margin之间的关系是不相互在碰撞的!!
<1> 块级元素: div、h1或p元素 即：显示为一块内容称之为 “块框“ ;
<2> 行内元素: span,strong,a等元素 即：内容显示在行中称 "行内框";
<3> 使用display属性改变成框的类型
即：display:block; 让行内元素设置为块级元素，display:none; 没有框
块级元素与行内元素的转换方法
<3> 使用display属性改变成框的类型
只是标签就有的通用属性
即：display:block; 让行内元素设置为块级元素，display:none; 没有框
p span{color:red;/*把行内元素升级为块级元素*/display:block;}将p中的span标签的内容升级为块元素,独占一行!!
css定位机制,非常重要----普通流,浮动.定位.
position:absolute;<!--相对于父框进行移动-->.adv_absolute {position: absolute;left: 30px;top: 20px;}这是相对于父框进行移动,离左边30px,离顶部20px
position:relative;<!--相对自己原来的原置进行移动-->.adv_relative {position: relative;left: 30px;top: 20px;}code的意思为将离自己原位置向右30px,向下20px
相对定位：如果对一个元素进行相对定位，它将出现在它所在的位置上。
通过设置垂直或水平位置，让这个元素“相对于”它的起点进行移动
绝对定位：元素的位置相对于最近的已定位祖先元素，如果元素没有已定位
的祖先元素，它的位置相对于最初的包含块。
<style>*{margin:0;padding:0;}.arry{width:200px;height:200px;background:#6C0;float:left}.krry{width:200px;height:69px;background:blue;float:left}</style>大家一起向左看齐,这样所有的点才能依次排开流体布局,从上到下依次布局
解决一下markdown的图片问题,管它的,就发挥其跟本作用,就是写代码,在上面写代码
float属性--脱离文档流,不占空间
在盒子内部的浮动平铺,会影响父盒子的布局,一定要加上{clear:both;}来进行清除对于父框的影响.
.box{border:1px solid red;}.box.b_left{width:100px;height:100px;background:#6C0;float:left;}.box.b_right{width:100px;height:100px;background:#F90;float:left;}/*清除浮动*/.clear{clear:both;} <div class="box"><div class="b_left"></div><div class="b_right"></div><!--清除浮动--><!--哪里浮动清哪里,妈妈再也...--><div class="clear"></div></div>清除浮动对周围元素的影响
在父框下建立一个框名为clear,然后
<div class="clear"></div>然后在style里面输入清除浮动指令
.clear{clear:both;}这样仅仅是解决外面的框框的浮动问题
浮动以后,就会脱离原来的父box,父box没有东西撑起来,就萎缩了!
所以这里要
<style type="text/css">.box{border:1px solid red;height:100px}</style>用定义高度的方式height:100px;将div撑开,但是这种方式不好,因为高度这个东西是不确定的!!也会导致后台开发出现问题!!会被后台的人骂的!!
文档流
relative依自己原先的位置进行定位,就算没有设置也会有默认位置
Absolute:脱离文档流,不占空间(意思是悬浮在父框之上!!)且相对其包块来定位
保持文档流
float:脱离文档流,不占空间
子框用absolute
父框用relative
display
none
inline
block
div是块级元素,记住了!!有点混xiao
写完代码后,要注释清楚,让别人非常方便阅读,
不写注释,就是没有职业道德
透明度的几种写法!!
opacity:0.6;
??这个是普通写法?#
filter:a;pha(opacity=60)
这是老写法,前两个会把div里面的文字也透明了,所以不好用
background-color: rgba (0,0,0,0.5);
css3的透明写法,SO就用这个.
<div class="t_message" contenteditable="true"></div><!--这个输入框依然用div做一个输入框,用contenteditable这个参数来执行!!-->CSS 伪类用于向某些选择器添加特殊的效果。
CSS 伪类用于向某些选择器添加特殊的效果。07字体样式细讲
学会文字可以精美排版
字体样式细讲(关于设计与使用中的细节)
font类---字体相关属性
font-family 字体样式
微软雅黑
font-size 字体大小
px
系统默认字体大小16px
设计默认规范大小12px(body里面看到文字条件反射的加上相应规范)
%(百分比)...这样设置大小,目的是为了明确与基准字大小的区别!!也有利于后期字体的改动!!
em相对字体大小
意义是用于h1~h6的字体大小(因为标题类大小永远与默认字体等比例的!!)
font-weight 字体粗细
100~900
400(正常大小)
700(等同于粗体)
text类
text-decoration 字体装饰
underline
overline
line-through
blink(没有实现?)
text-transform 英文大小写转换
none
capitalize
uppercase
text-indent
p{text-indent:2em}/*这里自动给文档进行首行缩进*//*用户只负责想要输入的,其余样式自动交给html自动实现*/text-align
left
right
center
justify 公平,每个字都能分到一定的地盘.有意思
杂类
letter spacing 与 word spacing
从英文的角度就好理角,这里的word相当于中文的一个词组,letter相当于一个中文的汉字
line-height
这里字体的默认大小是16px，line-height为2那么就是32px,多出来的16px怎么会在文本的上下各填充8px。
相对单位em与h1标签,h2标签
字体大小的原理机制(默认大小,绝对大小,相对大小)
标准默认字规范
body{font-size:20px}当如此设置时,默认字体大小20px,且将em定义为20px,h1=2em=40px;
body{font-size:12px}这时标准设计的大小,以些为单位,默认字体大小12px,h1=2em=24px;也就是此时的h1的字体大小变为24
08background
:red; background-color:red;两者区别,第二个相对于浏览器来说更精准
js
js是一门完整的语言+.....
<body><div></div><div></div><script type="tect/javascript>//通常放在body结尾处,以便正常运行!!</script> </body>
function myArry()
给a标签设置一个点击执行事件!!
<a href="#" onClick="myClick()">click me!</a><!--myclick后面带一对小括号()-->出现提醒框
<script type="text/javascript">alert("helloworld");</script>利用cookies进行陷式交互
自动登陆保持登陆好几天
qq说说保存输入在文本框的文字.
youku上传末登陆前播放记录!!
cookies也关系到用户隐私,与用户大数据!!
jquery,,, 大企业都在用jquery!!因为很屌,很好用!!
ajax-异步加载
不被搜索引索抓取,不利于seo,有利于速度,与隐私!!
不学java,jquery都是个半残!!操你大爷!!
写代码时,能不用id,尽量不用id,不利于批量操作,不利于做动态效果!!
00问题汇总
-
企业内部是如何规范id与name的使用的？
-
一些图标是以背景导入,还是用img导入?
-
html要学到什么水平才能找工作得到认可?
-
<p style="font-style:inherit;"">继承是什么还是不特别懂</p>
-
<p style="font-style:oblique;"">这个是bolique不知道是什么</p>
-
<p style="text-decoration:overline;">上划线?这个实际用途应该拿来干嘛</p>
-
均匀排布没有效果
HTML学习笔记总结相关推荐
- PyTorch 学习笔记（六）：PyTorch hook 和关于 PyTorch backward 过程的理解 call
您的位置 首页 PyTorch 学习笔记系列 PyTorch 学习笔记(六):PyTorch hook 和关于 PyTorch backward 过程的理解 发布: 2017年8月4日 7,195阅读 ...
- 容器云原生DevOps学习笔记——第三期：从零搭建CI/CD系统标准化交付流程
暑期实习期间,所在的技术中台-效能研发团队规划设计并结合公司开源协同实现符合DevOps理念的研发工具平台,实现研发过程自动化.标准化: 实习期间对DevOps的理解一直懵懵懂懂,最近观看了阿里专家带 ...
- 容器云原生DevOps学习笔记——第二期：如何快速高质量的应用容器化迁移
暑期实习期间,所在的技术中台-效能研发团队规划设计并结合公司开源协同实现符合DevOps理念的研发工具平台,实现研发过程自动化.标准化: 实习期间对DevOps的理解一直懵懵懂懂,最近观看了阿里专家带 ...
- 2020年Yann Lecun深度学习笔记（下）
2020年Yann Lecun深度学习笔记(下)
- 2020年Yann Lecun深度学习笔记（上）
2020年Yann Lecun深度学习笔记(上)
- 知识图谱学习笔记（1）
知识图谱学习笔记第一部分,包含RDF介绍,以及Jena RDF API使用 知识图谱的基石:RDF RDF(Resource Description Framework),即资源描述框架,其本质是一个 ...
- 计算机基础知识第十讲,计算机文化基础（第十讲）学习笔记
计算机文化基础(第十讲)学习笔记 采样和量化PictureElement Pixel(像素)(链接: 采样的实质就是要用多少点(这个点我们叫像素)来描述一张图像,比如,一幅420x570的图像,就表示 ...
- Go 学习推荐 —（Go by example 中文版、Go 构建 Web 应用、Go 学习笔记、Golang常见错误、Go 语言四十二章经、Go 语言高级编程）
Go by example 中文版 Go 构建 Web 应用 Go 学习笔记:无痕 Go 标准库中文文档 Golang开发新手常犯的50个错误 50 Shades of Go: Traps, Gotc ...
- MongoDB学习笔记(入门)
MongoDB学习笔记(入门) 一.文档的注意事项: 1. 键值对是有序的,如:{ "name" : "stephen", "genda" ...
- NuGet学习笔记(3) 搭建属于自己的NuGet服务器
文章导读 创建NuGetServer Web站点 发布站点到IIS 添加本地站点到包包数据源 在上一篇NuGet学习笔记(2) 使用图形化界面打包自己的类库 中讲解了如何打包自己的类库,接下来进行最重 ...
最新文章
- mysql 移植 azure_初码-Azure系列-记一次MySQL数据库向Azure的迁移
- 安装python3.7和PyCharm专业版
- js 定时网页点击_JS的小乐趣：轻松完成打地鼠游戏
- python处理进度条
- HDU2795 Billboard
- 【C语言】不能使用 while(fgetc(fp)!=EOF)进行文件复制
- 在计算机应用领域中媒体是指,在计算机中,媒体是指什么
- redis数据类型-列表(List)
- 使用wininet的InternetReadFile下载文件
- 【Unity Shaders】ShadowGun系列之二——雾和体积光
- 原来可视化还能这么美...
- ios 模拟器沙盒_ios 模拟器沙盒的位置 | 学步园
- 基于C语言实现的汽车牌照的快速查询
- Excel 滚动条动态显示图形
- 360浏览器: 如何以极速模式打开网址
- Matplotlib 实战总结，超全！超长！
- 锂电池电量百分比计算_手机电池容量的百分比显示跟电池的电量“格子”的比例计算...
- 两分钟内教会你如何给视频加配音，快速掌握配音技巧！
- 图片的分辨率大于设备分辨率或者小于设备的分辨率的显示问题
- php 数字 字母组合,PHP生成数字字母组合或纯数字的唯一订单号