本文详细介绍了HTML的学习，包括基础标签、图片处理、CSS样式选择器、盒子模型等内容。从网页标准模板到字体样式，涵盖font、span、p、a等标签的用法，以及img标签的属性和路径知识。还讲解了CSS选择器、列表、表格、框架和字体样式，如行内元素与块级元素的区别、浮动和定位机制。同时，文章还涉及了内联框架iframe、表格table的使用及CSS中的背景设置和定位机制。
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去写的
table
thead
caption
tobody
th
tr
td
tfoot
colspan 列合并
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 标签 超链接 锚点 name marquee 标签 弹弹乐
-
-
复合标签
-
复合标签
列表 ul li ol li dl 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 li
ol li
table
dl
行内
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>
-
均匀排布没有效果
扫一扫
1057
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
