html+css手记

----------------------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="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:定义重置按钮

----------------------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(背景图像的起始位置)

#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 元素定义引号的类型:*/

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

时间: 2024-11-05 13:42:08

html+css手记的相关文章

站点CSS样式不起作用,或仅仅有一部分起作用?随手记

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

HTML+CSS+JS自学手记二

今天学习的标签主要是用于与浏览者交互方面的,复杂性感觉也已经比之前的有所提高,不过学习下来也不算感觉难,就是要记的东西又多了,不过多练练应该问题不大. <a>标签,链接到另一页面.语法结构为: <a href=“目标网址” title=“鼠标滑过时提示的文本”>链接显示的文本</a> 有时候需要在新的浏览器窗口打开链接,可以这样实现: <a href=“目标网址” target=”_blank”> 另外,使用mailto可以在网页链接Email地址,语法示例

HTML+CSS+JS自学手记一

抱着对编程的兴趣,一直想要学习一下编程这方面的东西,苦于并非计软专业并且无人指导,一直没有做到有规划的自学.其实大一曾学过C语言,可惜感觉上课学到的都是皮毛,好像并没有什么卵用,也没能为我继续进一步学习提供一定的兴趣和成就感.于是趁着暑假得空开始关注如何零基础开始自学编程,编程语言众多,没有专业人士指导真的感觉无从入手,决定从较为简单的HTML和CSS开始,先培养和提高自己对编程的兴趣.想要接触编程也并非是说想要以后就入这一行,仅仅是兴趣,不过当然希望自己能学有所成足以有能力进入这一行业.以此记

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

一 基础 要求结尾分号 如果在命令输入期间想要终止其运行,不要Ctrl-C. 要输入\c,并按回车键. sql命令和关键字不区分大小写. 表名在windows中不区分大小写,但是在linux和os x中区分 二 sql语言 创建一个数据库 CREATE DATABASE publication 创建用户 GRANT PRIVILEGES ON database.object TO 'username'@'hostname' IDENTIFIED BY 'password' 添加自增型ID列 AL

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

1. 基础 注释: // 或 /* */ $标示变量 语句末尾加分号 数组: $oxo = array(array('x','','o'), array('p','x',''),array('','x','p')); echo $oxo[1][2] 常量: 之前不能用$符号, 只能用define函数定义 2. 对象复制 clone操作符 $obj2 = clone $obj1; 3. 类 类的构造方法: __construct() 析构方法: __destruct() 静态方法: static

CSS基础学习手记

-------------------------------------------------------------------------------------- 选择器 -------------------------------------------------------------------------------------- 标签选择器 <p>Hello,World!</p> ID选择器 <div id="topDiv">

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

本文想跟大家分享的是Selenium对PageObject模式的支持和自动化测试团队的构建.<Selenium For C#>系列的文章写到这里已经接近尾声了,如果之前的文章你是一篇篇的读下来并动手实践的话,我相信你应该可以模拟日常工作中80%常见的手动测试用例了.请注意:我的用词是模拟用例,而不是书写自动化测试用例.一个企业级的自动化测试的构建不是单靠Selenium一种技术就能Hold住的.所谓模拟指的是只能实现自动化的某个Case,但是不能工程化的使用.在本人所接触过几家公司的自动化测试

[小北De编程手记] : Lesson 04 - Selenium For C# 之 API 上

这一部分,我准备向大家介绍Selenium WebDriver的常用API,学习这部分内容需要大家最好有一些简单的HTML相关知识,本文主要涉及到以下内容: Selenium API:元素检查 Selenium API:事件处理 Selenium API:其他操作 Selenium API:框架扩展 回顾一下我之前讲过的一个概念:所谓自动化测试,可以简单的归结为是一个从被测试程序中识别或是定位元素以及执行操作和验证元素的过程.从框架设计的角度来讲,一个自动化测试框架的驱动程序应该向使用者提供“元

夜空中最亮的星:慕课网新手学习指南_慕课手记

首先标题是为了凑够标准的十个字,如果你这会去数了一下然后想评论说不是十个字,那我佩服你的求知精神...进来的肯定不是看我瞎扯淡的,我们步入正题. 慕课网作为国内不能说是最大,但是起码口碑最好的一个IT学习的网站,受到了很多人的欢迎,但是在推荐给朋友的过程中,我就发现了一些问题,那就是纯小白根本不知道怎么开始学习.这里我要说一下什么叫做纯小白,你以为不知道变量,命令提示符,HTTP协议,这些就是小白了吗?那你就错了,我今天要说的是连怎么设置IP地址,怎么设置百度为首页,连自己的操作系统是winxp