----------------------html定义和基本结构----------------------

HTML是 HyperText Mark-up Language 的首字母简写，意思是超文本标记语言，超文本指的是超链接，标记指的是标签，是一种用来制作网页的语言，这种语

言由一个个的标签组成，用这种语言制作的文件保存的是一个文本文件，文件的扩展名为html或者htm，一个html文件就是一个网页，html文件用编辑器打开显示

的是文本，可以用文本的方式编辑它，如果用浏览器打开，浏览器会按照标签描述内容将文件渲染成网页，显示的网页可以从一个网页链接跳转到另外一个网页。

一个html的基本结构如下：

<!DOCTYPE html>
<html lang="en">
　　<head>
　　　　<meta charset="UTF-8">
　　　　<title>网页标题</title>
　　</head>
　　<body>
　　网页显示内容
　　</body>
</html>
第一行是文档声明，第二行“<html>”标签和最后一行“</html>”定义html文档的整体，“<html>”标签中的‘lang=“en”’定义网页的语言为英文，定义

成中文是'lang="zh-CN"',不定义也没什么影响，它一般作为分析统计用。 “<head>”标签和“<body>”标签是它的第一层子元素，“<head>”标签里面负责对网

页进行一些设置以及定义标题，设置包括定义网页的编码格式，外链css样式文件和javascript文件等，设置的内容不会显示在网页上，标题的内容会显示在标题

栏，“<body>”内编写网页上显示的内容。

html文档规范
　　1、标签小写
　　2、属性用双引号括起来
　　3、所有的标签闭合
　　　　<div></div> <br />
　　4、图片加alt属性；alt=“”加上属性，可以读图片信息

----------------------常用html标签----------------------
#<h1>、<h2>、<h3>、<h4>、<h5>、<h6>：html标题
#<p>：标签定义一个文本段落
#<br/>：换行
#&lt：<
#&gt：>
#&nbsp：空格
#<img src="data:images/pic.jpg" alt="产品图片" />：标签可以在网页上插入一张图片，它是独立使用的标签，通过“src”属性定义图片的地址，通过“alt”属性

定义图片加载失败时显示的文字，以及对搜索引擎和盲人读屏软件的支持。
#<font></font>：字体标签
#./：当前路径
#../：上一级路径
#<a href="">：标签可以在网页上定义一个链接地址，通过src属性定义跳转的地址，通过title属性定义鼠标悬停时弹出的提示文字框。页面内定义了“id”或者

“name”的元素，可以通过a标签链接到它的页面滚动位置，前提是页面要足够高，有滚动条，且元素不能在页面顶部，否则页面不会滚动。
#<ol></ol>、<li></li>：定义一个有编号的内容列表
#<ul></ul>、<li></li>：定义一个无编号的内容列表
#<dl></dl>、<dt></dt>、<dd></dd>：定义列表通常用于术语的定义。<dl>标签表示列表的整体。<dt>标签定义术语的题目。<dd>标签是术语的解释。
#table标签：声明一个表格
　　1、border： 定义表格的边框
　　2、cellpadding： 定义单元格内内容与边框的距离
　　3、cellspacing： 定义单元格与单元格之间的距离
　　4、align： 设置单元格中内容的水平对齐方式,设置值有：left | center | right
　　5、valign： 设置单元格中内容的垂直对齐方式 top | middle | bottom
　　6、colspan： 设置单元格水平合并
　　7、rowspan： 设置单元格垂直合并
#tr标签：定义表格中的一行

#td和th标签：定义一行中的一个单元格，td代表普通单元格，th表示表头单元格
#<iframe>标签：创建包含另外一个html文件的内联框架（即行内框架），src属性来定义另一个html文件的引用地址，frameborder属性定义边框，scrolling属性

定义是否有滚动条，a标签的target属性可以将链接到的页面直接显示在当前页面的iframe中

-----------------------常用表单----------------------
#form：定义一个表单区域,action属性定义表单数据提交的地址，method属性定义提交的方式。
#label：定义表单控件的文字标注
#input类型为text：定义了一个单行文本输入框
#input类型为password：定义了一个密码输入框
#input类型为radio：定义了单选框
#input类型为checkbox：定义了单选框
#textarea：定义多行文本输入
#select：定义下拉列表选择
#input类型为submit：定义提交按钮
#input类型为reset：定义重置按钮

-----------------------html存在的语义化的标签----------------------
语义化的标签，就是在布局的时候多使用语义化的标签，搜索引擎在爬网的时候能认识这些标签，理解文档的结构，方便网站的收录。比如：h1标签是表示标题，p标签是表示段落，ul、li标签是表示列表，a标签表示链接，dl、dt、dd表示定义列表等，语义化的标签不多。

1、div标签 块元素，表示一块内容，没有具体的语义
2、em标签 行内元素，表示语气中的强调词
3、i标签 行内元素，原本没有语义，w3c强加了语义，表示专业词汇
4、b标签 行内元素，原本没有语义，w3c强加了语义，表示文档中的关键字或者产品名
5、strong标签 行内元素，表示非常重要的内容

----------------------css基本语法及页面引用----------------------

#css页面引入方法：
　　1、外联式：通过link标签，链接到外部样式表到页面中。
　　2、嵌入式：通过style标签，在网页上创建嵌入的样式表。
　　3、内联式：通过标签的style属性，在标签上直接写样式。

#常用的应用文本的css样式：

　　1、color 设置文字的颜色，如： color:red;
　　2、font-size 设置文字的大小，如：font-size:12px;
　　3、font-family 设置文字的字体，如：font-family:'微软雅黑';
　　4、font-style 设置字体是否倾斜，如：font-style:'normal'; 设置不倾斜，font-style:'italic';设置文字倾斜
　　5、font-weight 设置文字是否加粗，如：font-weight:bold; 设置加粗 font-weight:normal 设置不加粗
　　6、font 同时设置文字的几个属性，写的顺序有兼容问题，建议按照如下顺序写： font：是否加粗 字号/行高 字体；如：font:normal 12px/36px '微软雅黑';
　　7、line-height 设置文字的行高，如：line-height:24px;
　　8、text-decoration 设置文字的下划线，如：text-decoration:none; 将文字下划线去掉
　　9、text-indent 设置文字首行缩进，如：text-indent:24px; 设置文字首行缩进24px
　　10、text-align 设置文字水平对齐方式，如text-align:center 设置文字水平居中
　　11、margin:30 auto;盒子水平居中
　　12、margin-top:-1px 进行边线的合并
　　13、margin合并问题：两个盒子margin重叠去相对比较大的值作为之间的margin值
　　14、Object.style.background=background-color(图片背景颜色) background-image(背景图片路径) background-repeat(背景图片是否及如何重复) background-attachment(背景图片是否固定) background-position(背景图像的起始位置)
　　15、position:relative;：元素框偏移某个距离。元素仍保持其未定位前的形状，它原本所占的空间仍保留。
　　16、position:absolute;：元素框从文档流完全删除，并相对于其包含块定位。包含块可能是文档中的另一个元素或者是初始包含块。元素原先在正常文档流中所占的空间会关闭，就好像元素原来不存在一样。元素定位后生成一个块级框，而不论原来它在正常流中生成何种类型的框。
　　17、overflow:auto;：如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。
　　18、overflow:hidden;：内容会被修剪，并且其余内容是不可见的。
　　19、overflow-x:hidden;横向内容被修剪
　　20、overflow-y:hidden;纵向内容被修剪
　　21、opacity:0.6;：透明度的设置，60%

background-repeat(背景图片是否及如何重复)

background-attachment(背景图片是否固定) background-position(背景图像的起始位置)

/*清空指定标签样式*/
/* 去掉标签默认的内边距和外边距 */
body,ul,li,dl,dd,input,select,h1,h2,h3,h4,h5,h6,p{margin:0px;padding:0px;}

/* 去掉列表的项目符号 */
ul{list-style: none;}

em{font-style: normal;}

/* 去掉默认的下划线 */
a{text-decoration: none;}

/* 去掉图片在加链接时的边框 */
img{border:0;}

/* 让h标签继承body设置的文字大小 */
h1,h2,h3,h4,h5,h6{font-size:100%;}

.fl{float: left;}
.fr{float: right;}

.clearfix:before,.clearfix:after{
content:'';
display: table;
}

.clearfix:after{
clear:both;
}

.clearfix{zoom:1;}

#css选择器：
1、标签选择器：
2、id选择器：
3、类选择器：
4、属性选择器：
　　1、[attribute] 用于选取带有指定属性的元素。
　　2、[attribute=value] 用于选取带有指定属性和值的元素。
　　3、[attribute~=value] 用于选取属性值中包含指定词汇的元素。
　　4、[attribute|=value] 用于选取带有以指定值开头的属性值的元素，该值必须是整个单词。
　　5、[attribute^=value] 匹配属性值以指定值开头的每个元素。
　　6、[attribute$=value] 匹配属性值以指定值结尾的每个元素。
　　7、[attribute*=value] 匹配属性值中包含指定值的每个元素。
5、派生选择器：
　　1、后代选择器：'空格'，h1 em 选择器可以解释为 “作为 h1 元素后代的任何 em 元素
　　2、子元素选择器：'>'
　　3、相邻兄弟选择器：'+'
6、组选择器：','
7、伪类及伪元素选择器：一般称为黑魔法解决一些html中的bug
　　.box2:before：
　　.box2:before{
　　content："前面的文字"；
　　　　color：red ；
　　}
　　a:link {color: #FF0000} /* 未访问的链接 */
　　a:visited {color: #00FF00} /* 已访问的链接 */
　　a:hover {color: #FF00FF} /* 鼠标移动到链接上 */
　　a:active {color: #0000FF} /* 选定的链接 */

　　p:first-child {color: red; } /*匹配第一个p元素*/
　　q:lang(no){ quotes: "~" "~" }/*为属性值为 no 的 q 元素定义引号的类型：*/

8、css选择器对应权重计算：

　　1、!important 放在对应样式的后面，权重值为10000；
　　2、style内联样式，权重值为1000；
　　3、ID选择器，权重值为100；
　　4、类、伪类和属性选择器，权重值为10；
　　5、标签和伪元素选择器，权重值为1；
　　6、通用选择器（*）、子选择器（>）、相邻选择器（+）、同胞选择器（~）等权重值为0；

#css盒子模型
margin：
　　4值，顺时针方向：分别设置上 右 下 左 的margin的值
　　3个值，顺时针方向：分别设置上 左右 下 的margin的值
　　2个值，分别设置：上下 和 左右 的margin的值
　　1个值，同时设置四个边的margin
border
padding：
　　4值，顺时针方向：分别设置上 右 下 左 的padding的值
　　3个值，顺时针方向：分别设置上 左右 下 的padding的值
　　2个值，分别设置：上下 和 左右 的padding的值
　　1个值，同时设置四个边的padding

html+css手记的更多相关文章

  1. Matplotlib数据可视化（3）：文本与轴

      在一幅图表中,文本.坐标轴和图像的是信息传递的核心,对着三者的设置是作图这最为关心的内容,在上一篇博客中虽然列举了一些设置方法,但没有进行深入介绍,本文以围绕如何对文本和坐标轴进行设置展开(对图像 ...

  2. CSS随手记

    html5模板 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <t ...

  3. 站点CSS样式不起作用，或仅仅有一部分起作用？随手记

    事件:网页中使用了相同的样式,下半部分正常显示,上半部分样式所有丢失不能显示. 解决:改动了相应的CSS样式文件的编码 这个是最没有想到的解决的方法. 怎样调试:通过右键页面查看编码为UTF-8 或 ...

  4. 《PHP, MySQL, Javascript和CSS》读书随手记----MySQL篇

    一 基础 要求结尾分号 如果在命令输入期间想要终止其运行,不要Ctrl-C. 要输入\c,并按回车键. sql命令和关键字不区分大小写. 表名在windows中不区分大小写,但是在linux和os x ...

  5. 《PHP, MySQL, Javascript和CSS》读书随手记----php篇

    1. 基础 注释: // 或 /* */ $标示变量 语句末尾加分号 数组: $oxo = array(array('x','','o'), array('p','x',''),array('','x ...

  6. Linux.NET实战手记—自己动手改泥鳅（上）

    各位读者大家好,不知各位读者有否阅读在下的前一个系列<Linux.NET 学习手记>,在前一个系列中,我们从Linux中Mono的编译安装开始,到Jexus服务器的介绍,以及如何在Linu ...

  7. 2. web前端开发分享-css,js进阶篇

    一,css进阶篇: 等css哪些事儿看了两三遍之后,需要对看过的知识综合应用,这时候需要大量的实践经验, 简单的想法:把qq首页全屏另存为jpg然后通过ps工具切图结合css转换成html,有无从下手 ...

  8. [小北De编程手记] : Lesson 08 - Selenium For C# 之 PageFactory & 团队构建

    本文想跟大家分享的是Selenium对PageObject模式的支持和自动化测试团队的构建.<Selenium For C#>系列的文章写到这里已经接近尾声了,如果之前的文章你是一篇篇的读 ...

  9. web前端开发分享-css,js进阶篇

    一,css进阶篇: 等css哪些事儿看了两三遍之后,需要对看过的知识综合应用,这时候需要大量的实践 经验, 简单的想法:把qq首页全屏另存为jpg然后通过ps工具切图结合css转换成html,有无 从 ...

随机推荐

  1. swift3.0 CoreGraphics绘图-实现画板

    swift3.0对绘图的API进行了优化,看起来更swift了. 看下UI的构造.设置画笔粗细.清空面板和保存到本地 下面直接看画板文件 这里我做的比较复杂,记录触摸到的每个点,再连成路径,其实直接用 ...

  2. 百度地图api将可视区域定位到当前所在位置

    1.前言 开头不说点什么,总是有点不习惯.还是说点什么吧,关于百度地图,我用的次数还是比较多的,没办法,需求呀.好吧,在用百度地图的时候,确实有过很多需求,不过好在百度地图很强大,每次需求在探索后都能 ...

  3. html5图片上传时IOS和Android均显示摄像头拍照和图片选择

    最近在做信开发时,发现<input type="file" />在IOS中可以拍照或从照片图库选择,而Android系统则显示资源管理器,无拍照选项,网上查找资料,改为 ...

  4. echarts_部分图表配置简介_横向柱状图

    横向柱状图主要配置x位置x轴类型y轴类型(轴的类型分两种 1.category(类别)2.value(值)),代码简单(里面有注释)效果如下: var myChart = echarts.init(d ...

  5. 基于NFS实现WordPress

    实验内容: (1)主机IP nfs server IP :192.168.29.120 nfs server IP: 192.168.29.110 (2)要求 nfs server共享/data/we ...

  6. SSD的传输总线、传输协议、传输接口

    前言:关于SSD,有众多总线类型.协议类型.接口类型,每个接口还包括不同型号,在这里花点时间全部整理一下,整理日期2017-08-08. 1.传输总线 总线就像一条公路,公路上的车好比总线上的电信号: ...

  7. Zabbix监控nginx性能

    编辑nginx的配置文件nging #配置ngx_status location /nginx_status{ stub_status on; access_log off; } #重启nginx # ...

  8. 1.初入GitHub

    进入github官网,点击右上角注册按钮.  填写账号名,邮箱和密码    选择免费的公开仓库,点击完成就提示注册成功了.   ps:付费一般是给企业用户使用的,用来存放一些不公开的代码.所以是付费的 ...

  9. hdu--1072--Nightmare（bfs回溯）

    Nightmare Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others)Total S ...

  10. Android 开发中常见的注意点

    这里总结了Android开发中常用的注意点.只有总结,没有展开举例讲解,展开的话,一个点都可以写一篇文章了..... 这类问题都一定不要犯. 重要的事情说三遍!!! 说三遍!!! 遍!!! 资源 不允 ...