HTML与CSS基础教程-优快云博客

本文链接：https://blog.youkuaiyun.com/Protractor/article/details/52824033

basic day01

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

HTML 代码运行在浏览器当中.

HTML语言基础

<html>

<html>

html基本语法

后缀.html (或.htm)

html常用标签

标题标记:

换行标记与段落标记

<br/>

<p></p>段落标记

在段落标记中的文本被称为一个段落,在段落结束的时候自动换行.

分割线标记

<hr/>

width:300px

80%:代表占用父标签宽度的80%

align:对齐方式 center|left|right

文本标记:

<b></b> 加粗

<strong></strong>加粗

<i></i>

<s></s>删除线

<u></u>下划线

<big></big>大字号

X<sub>2</sub>

X<sup>2</sup>

html实体:

<user>

<name>zhangsan</name>

</user>

<user>

    <name >zhangsan>/name >

</user>

连接:

连接文本:显示在界面中用户点击的文本

href:点击连接后跳转到的目标地址.

路径的写法:

绝对路径:

操作系统绝对路径:

windows 以盘符开头的路径

linux 以/(根目录)开头

unix 以/(根目录)开头

MacOS 以/(根目录)开头

网络端绝对路径:

以http://开头

相对路径:

相对于当前目录的路径

图片标记:用于在页面中显示一张图片

<img/>:

src:目标图片的路径

width:宽

height:高

二者同时设置会出现失真现象,只需设置其中一个,浏览器会按照图片原来的宽高比自适应,等比例缩放.

浏览器常用图片格式

jpeg/jpg 失真2M~200~300k 压缩图片算法

图片大小较小,使用面广泛,支持色彩多

png:

支持透明色2M :700~800k支持色彩多,图片保存较好

gif:

支持动态图片,图片大小非常小.支持的色彩较少.255(255*255*255)(rgb)

支持透明色.

.9.png点角矩形

图片链接

点击图片跳转页面

</a>

图片热点链接:....

<map>

<area>

表格标签:

表格的基本结构:

<table>

<tr>

</tr>

<tr>

</tr>

</table>

table:

width:

height;

align:对齐方式center|left|right

border:边框宽度

cellpadding: 单元格的内边距

cellspacing: 单元格的外边距

td:代表一个单元格

有合并单元格的属性:

浏览器渲染图片是从上到下,从左到右合并的标记也要按顺序

rowspan:合并行

colspan:合并列

第二套表格标准:

<table>

<caption></caption> 表格标题

<thead></thead> 表头

<tbody></tbody> 表体

<tfoot></tfoot> 表脚

</table>

表单标签:

用于搜集用户输入的数据,并且把这些数据发送到服务器.

input表单组件

文本框

提交按钮:

非input表单组件

下拉列表框

</select>

多行文本域:

</textarea>

要提交必须要name属性

表单控件外面需要form标签才能提交

列表标签:

<ul>

</ul>

CSS

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

基本结构:

css选择器{样式属性}

2.在head标签中引入:

CSS选择器:

作用:通过样式选择器选出页面中的一个或多个标签,从而对这些标签添加样式属性

通配符选择器:

*{}:可以选出所有的标签.

标签选择器:

标签名{}:可以选出符合标签名称的所有标签

p{}

h3{}

id选择器

#id{}通过标签的id属性选出一个标签 ,优先级最高.

类选择器{class选择器}

1,定义一类样式

2,html页面引用该类样式

.block{ }

分组选择器:

selector1,selector2,selector3{}

可以选出多组标签一般情况下用来初始化页面

h1,h2,h3,p,img,#a,ul,li {

marging 0px

padding 0px

}

派生选择器:涉及到父子标签关系

div p{}

.div p{}

Css样式属性:

Box模型

布局属性

width:内容区域宽度

height内容区域高度

外边距:margin:

margin-left:

margin-right:

margin-bottom:

margin-top:

background-repeat:背景图片的平铺方式

repeat:默认:横纵向平铺

background-position:图片定位.

绘图坐标系:左上角是零点.

一张大图减少服务器的访问次数.

字体属性:font

color:

font-size: 字号

font-style:

font-weight:磅值(粗细)100~900越来越粗

font_family:字体:黑体宋体....

文本属性:text

text-align:对齐方式(控制左右居中)

text-decoration:文本装饰none去a标签的下划线

line-height:行高(控制垂直居中)要和容器的高度一样.

边框属性:border

border:1px solid black;

border-width:

border-style:

border-color:

border-left-color:.....对每个边设置

列表属性:

list-style:列表样式.

css复杂属性:

display:

block:显示

block:把行级标记当做块级标记来显示.

inline:把块级标记按行级显示(不常用)

行级标记:多个标记暂用一行

a i b strong .....span....

块级标记:一个标记占用一行

div p h1 h3...

为什么?

只有块级标记可以设置宽高.

<a href="javascript:;">首页</a>点击之后什么都不做执行一段js

noen:隐藏

可以控制组件的显示与隐藏

float:浮动

left:

right:

clear:清除浮动

right

left

both两边都不允许有浮动

Html day01