【黑马程序员】第1课:HTML+CSS

<pre>

W3C:World Wide Web Consortium,万维网联盟

HTML

html:Hyper Text Markup Language,超文本标记语言。

书写规范:XHTML

标签要正确关闭,包括呼应关闭与自关闭。

常见自关闭标签有:<hr/>、<br/>、<input/>、<img/>、<area/>,它是不需要修饰和装饰其它的

标签或文本的。

标签名和属性名必须小写

属性值要引号括起来,””或’’

标签要正确嵌套

<marquee behavior=”alternate”></marquee>

标签的作用:说明内容的功能

属性的作用:描述内容的特征

html注释:<!--注释内容 仅此一种-->

下面总结下常见标签,只总结它们的特有属性。

颜色表示方法:单词,6个十六进制字符、rgb(m,n,k)。

排版标签

p:段落标签:如果p标签中包裹了内容,那么p标签内容的上下会各空出1行。

如果P标签没有内容,那p标签就相当于一个空行。

如果是两个p标签连续出现,它们之间也只会空一个空格,而不是两个。

注意与br标签的区别:br只是换行,并不会空出1行。而p标签不但换行而且还空出1行。

hr:水平线标签:

属性

size:粗细

width:宽度

div:块级标签,会自动换行。如p、hr、h1-h6也是块级标签。

span:行级标签,不会自动换行。如br是行级标签,它换行之后不会再换行。

字体标签

h1-h6:从大到小的6个级别的标题文字,没有size属性。注意字体是块级标签。

font:

属性

face:字体类型

size:字体大小(从1-7的数字,默认是3)

图像标签

img:

属性

src:图片路径

title:鼠标悬停在图片上时的提示文字,其实几乎每个标签都有这个功能。

alt:当图片不存在时的提示文字

map:必须要定义name属性,因为它要被图片img引用,在img中定义属性usemap=”#mapname”来引

用。

子标签area:

属性

shape:形状

coords:参数,相对于图片(如果shape是circle的话,是x,y,r;如果是矩形的话,

是两个点的坐标。

href:点击了area之后跳转的链接,可以是网页,也可以是图片。

title:当鼠标移动到坐标限定的范围时提示的文字。

清单标签(ol、ul、极其子标签li

共有属性

type:对于ol,取值可以是Aa和及罗马数字I、i以及阿拉伯数字,共有5种。默认是阿拉伯数

字。如果不想从第一字母或数字开始,可以再加个start属性,指定偏移量。

对于ul,取值可以是disc(实心点)、square(实心矩形)、circle(空心点),但实

际发现ul也可以使用ol的type属性值。默认的是实心点

超链接标签a

属性

href:跳转目标路径,一定要这个路径,如果不想跳转用#。否则文本不会有这个标签的特有

显示效果。

target:跳转方式,取值_self(默认)  :在本窗口打开。                                                               _blank :在新窗口打开

_parent

_top

表单标签

form标签:收集用户信息,将信息传递到指定的服务器

属性:

action:表单数据提交的目标位置。

method:提交方式

get:(默认)明文提交,不安全。数据量有限制,不超过1k。

post:暗访提交,安全。可以提交大的数据,数据量没有限制。

input子标签:真正地采集用户信息

语法:<inputtype=”” name=”” value=”” />

type:input标签的类型(一共有10种)

text:文本框

password:密码框

radio:单选按钮

checkbox:复选框

checked=”checked”默认被选中

submit:提交按钮

button:普通按钮

reset:重置按钮

image:图片按钮 作用同submit

file:文件上传

hidden:隐藏域:既不想让用户看到,又要将数据提交到服务去。

value:标签中的内容,供服务器接收数据的。

name:

》供服务器接收数据的。

》给相同类型的标签分组,如radio。

下拉列表标签select

option:下拉列表项

selected=”selected”默认被选中

语法:<select>

<option>一般第1个option写标题</option>

<optionvalue=””>一般与value值一样</option>

<optionvalue=””>一般与value值一样</option>

</select>

文本域标签textarea

属性

cols:显示的列数

rows:显示的行数

readonly:标记文本只读,取值readonly。防止用户修改内容。

表格标签table

       属性

           cellspacing:单元格之间的距离

cellpadding:单元格与内容的距离

caption标签:表格标题,写在table标签的首行。

thead:页眉

tbody:主体

tfoot:页脚

可以用这些标签在操作多个tr。

子标签tr:行

子标签td:列

属性

colspan:跨列,从左往右合并。

rowsapn:跨行,从上往下合并。

th:列头,与td同级别。

CSS

CSS:Cascade Style Sheet,层叠样式表。

CSS的好处:

1.网页内容和样式分离,有利于团队开发。

2.提高代码的复用性,有利于后期维护。

3.功能强大,实现更美观的效果。

CSS基本语法:

    1.行内样式,定义在标签内,作用于当前标签。

<p style=”color:red”><p>

2.内嵌样式,作用于当前页面。

<style type=”text/css”>           表示标签内容为样式代码

/*CSS注释,仅此一中*/

选择器{

属性名:属性值;

属性名:属性值;

...

}

</style>

注意格式:属性名与属性值用:分隔,属性值没有引号,每个规则以;结束。

3.外部样式,作用于多个页面。

        <link rel="stylesheet" type="text/css" href="theme.css" />

CSS选择器:

标签选择器:标签名,同类标签具有相同风格时使用。

类选择器:.类名,同类标签中部分标签有其它的风格时。

ID选择器:#ID名,通常与div结合使用。

CSS常见属性:

字体:font属性

font-xxx:子类属性

文本:

text-xxx系列

text-decoration:可以设置下中下划线或无线。

列表属性:list-style属性

list-style-xxx:子类属性

list-style-image:url(“图片路径”);        //自定义列表符号

背景属性:background属性

background-xxx:子类属性

background-attachment:设置背景是否随着页面的其余部分滚动。

background-color:

background-image:url(“图片路径”);

background-repeat:属性设置是否及如何重复背景图像。

background-position:设置背景图片的起始位置,相对于父容器的x和y

距离。

定位属性:

浮动定位

float:流式布局(浮动),取值left  right 2种

clear:清除浮动,取值 left rightboth none 4种

position

absolute:绝对定位,一般和top、left属性配合使用。

relative:相对定位

z-index:取值是整数,默认0。越大越靠近上面。

CSS盒子模型:

       任何一个标签都是一个盒子模型,所以每个标签都有下面这些属性。

内边距padding

padding-left

padding-right

padding-top

padding-bottom

padding:10px  30px  50px 30px  表示上   右   下   左(从上开始顺时针旋转)

padding:30px   80px   //  30表示上下          80表示左右

外边距margin

margin-left

margin-right

margin-top

margin-bottom

margin:0  auto       //水平居中

margin:auto    0     //垂直居中

外边距合并:取较大者。

边框border

border-style

border-width

border-color

border-left

border-left-color

border-left-style

border-left-width

border-right

...

CSS:通过属性即使给标签设置了什么东西,如图片,它是属于这个标签的,并没有创建一个新的

对象。

假如想给div设置一张图片,图片距离div的上边距是10px,那么应该设置div的padding-top

为10px,且应在div中嵌套一个<img/>标签。不能投机取巧,使用CSS中的

background:url()no-repeat来设置,这个属性只是给div设置了背景图片,但是这个图片并不

是它的子元素,仅仅只是一个属性,所以padding对它无效。

伪类:

    a:link {color: #FF0000}               /* 未访问的链*/

a:visited {color: #00FF00}     /*已访问的链接 */

a:hover {color: #FF00FF}       /*鼠标移动到链接上 */

a:active {color: #0000FF}      /*选定的链接 */

当然,在选择器还可以定义其它的属性,而且属性是会反弹的。比如在

hover中设置了一个字体大小属性,当鼠标移到链接上时字体会改变,

但当鼠标挪走之后又会恢复原来的大小。

注意:定义是有顺序的。

-----------------------------------------------------------------------------------------

最后,作一下总结,HTML就是用来显示内容的,而CSS用来定义样式,就是美化内容的显示。

HTML标签和CSS样式非常多,怎么学?

抓住重点,特性,记忆重点,其它的就去查API文档。

</pre>

时间: 2024-12-11 23:02:35

【黑马程序员】第1课:HTML+CSS的相关文章

应试教育之后,我在黑马程序员找到突破口

正在上高三的弟弟前几天打电话告诉我说"姐姐,我们现在晚自习要上到晚上十一点,今年6月的高考把班级每个学生都弄得人心惶惶--"我突然想起自己当年的高考来-- 高考,于我而言已经是六年前的事情了.但每每提及高考,我仍然会从心底升起一层压力,偶尔在工作或生活中遇到难题,晚上做梦都会梦到自己坐在考场里答题的场景,由此可见高考成了我挥之不去的梦魇.再加之最近应试教育的负面新闻频出,我在搜索引擎中键入"应试教育"四个字,出现的新闻都是:"应试教育还在消磨孩子的个性&q

【黑马程序员】第12课:文件上传&文件下载&注解

<pre> day12 上节内容回顾 1.jstl的标签 *if  choose *forEach <c:forEachvar="l" items="${list}"> 2.jsp开发模式 *模型一 *模型二(mvc模式) **mvc模式 ***m:模型,使用javabean ***v:视图,使用jsp ***c:控制器,使用servlet *dao模式:数据访问对象,专注于对数据库的操作 **首先创建接口,在接口里面定义操作数据库的方法 *

黑马程序员:从零基础到精通的前端学习路线

随着互联网的深入发展,前端开发工程师一跃成为市场上非常抢手的人才.很多同学,包括以前做UI的.Java的.或者对于IT完全零基础的同学都想学习前端.下图是网上流传甚广的一张前端学习思维导图,很多初学者表示看到这些密密麻麻的知识点就已经晕了.确实,前端是一门涵盖面很广的学科.但是想学前端的你也不用慌张,内容虽多但有迹可循,只要循序渐进就不怕学不好前端! 那么前端开发到底需要学什么?应该怎么学?接下来黑马程序员前端学院教你如何从零基础学习前端. 一.前端开发入门 在入门阶段,你首先要学会最基本的技能

黑马程序员:2016互联网大会告诉你前端开发的前景

  6月21日,由中国互联网协会主办的第十五届中国互联网大会在北京国际会议中心举行,黑马程序员在现场开设线上直播,揭开互联网大会的神秘面纱.我们从主播带回的信息分析一下前端开发的前景究竟如何: 先来看看相关数据(数据统计截至到2015年底) 1.互联网普及过半.我国网民规模达6.8826亿,普及率为50.3% .专家预测2020年全民普及率将达76%. 2.手机网民规模达6.1981亿,占网民90.1%. 3.移动上网设备比例进一步增长. 4.互联网行业位居创投案例第一位,IT行业紧随其后.  

【黑马程序员】重新开始

因自学能力较差.自制力不强等原因,还有半年多就毕业找工作了实在不能让自己淡定下来. 7月初,决定报名参加了辅导班.刚开始想直接上就业班,结果基础测试不过关,很很的打击了我,决定从基础班开始学,重新开始系统性的学Java SE,学完后再上Android就业班. 开始报名参加黑马程序员--深圳双元课堂9期(0714)基础班.因为是校招,所以也要参加入学基础测试,就是视频前5天的视频内容. 写完自荐信,并获得分数的当天,就预约了入学电话面试及入学基础测试,这两项顺利通过.准备开班. 7.14开班了,一

黑马程序员-入学笔试题

笔试结束,列一下笔试题和我的解答,最后得分29.7. 1. 编写一个类,在main方法中定义一个Map对象(采用泛型),加入若干个对象,然后遍历并打印出各元素的key和value. package com.itheima; import java.util.Iterator; import java.util.Map; import java.util.Set; import java.util.TreeMap; public class Test1 { public static void m

黑马程序员-JAVA学习日记-数组YNPB

黑马程序员学习笔记黑马程序员编程基础数组培训.培训.期待与您交流!数组:是存储同一种数据类型的的集合,也叫容器:特点:是数组中每个元素都有索引从开始:数组的定义式:数据类型数组名数据类型元素个数:数据类型数组名数据类型元素个数:如:数据类型数组名数据类型元素数据类型数组名元素如:如果元素确定就用这一种:数组中有一个属性:获取数组中的元素个数,即数组的长度:中的内存机制:栈:存储局部变量,一般定义在函数内的变量成为局部变量:特点:当内存中数据操作完成后,所占空间会自动释放栈内存堆:是通过创建的实体

黑马程序员——网络编程篇

------- android培训.java培训.期待与您交流! ---------- 概述   1.网络模型        (1).OSI参考模型        (2).TCP/IP参考模型   2.网络通讯要素         (1).IP地址        (2).端口号         (3).传输协议    3.过程        1,找到对方IP. 2,数据要发送到对方指定的应用程序上.为了标识这些应用程序,所以给这些网络应用程序都用数字进行标识. 为了方便称呼这个数据,叫做端口(逻

黑马程序员------IO(五)

黑马程序员------IO(五) 1.1  操作对象(示例1)ObjectInputStream与ObjectOutputStream 被操作的对象需要实现Serializable. Serializable:用于给被序列化的类加入ID号,用于判断类和对象是否是同一个版本 类通过实现java.io.Serializable接口以启用序列化功能,Serializable只是一个标记接口. 1 示例1: 2 import java.io.*; 3 4 class ObjectStreamDemo 5

黑马程序员——Java基础---IO(下)

黑马程序员——Java基础---IO(下) ------<a href="http://www.itheima.com" target="blank">Java培训.Android培训.iOS培训..Net培训</a>.期待与您交流! ------ 一.概述 Java除了基本的字节流.字符流之外,还提供了File类.properties类.打印流.序列流等和输入输出相关的类,它们能够帮助我们更好的处理信息.下面将对它们进行简单的介绍. 一.正