HTML 与CSS

2018-12-02 本文已影响0人 yezi1004

1.HTML是网页内容的载体
2.CSS样式是表现
3.JavaScript是用来实现网页上的特效效果

html文档基本机构

<!DOCTYPE html>
 <html>
 <head>
</head>
<body>
</body>
</html>

head标签内常用元素
<title> 用于定义文档标题
<script>用于包括含javascript脚本
<link>用于链接外部css资源文件
<style>用于定义内部css样式
<meta>用于HTML页面的元数据

使用title标签

<head>
<title>123</title>
</head>

显示：

1.png

<meat>

标签用于定义页面元信息，也就是一些键值对，主要有以下三个属性
1.http-equiv：指定元信息的名称，该属性指定的名称具有特殊意义，它可以向浏览器传回一些有用的信息，帮助浏览器正确地处理网页内容。

2.name ：指定元信息名称，该名称值可以随意指定。

3.content ：指定元信息的值。

举个栗子
描述文档类型和字符编码

<head>
 <meta http -equiv="Content-Type" content="text/html; charst=gbk"/>
</head>

HTML常用标签

常用的块级标签

显示为“块”状，浏览器会在其前后显示折行。常用的块级元素包括：p，h1-h6，div，ul等。

标题标签语法

<body>
<h1>一级标题</h1>
    。。。
<h6>六级标题</h6>
</body>

输出：

1.png

段落标签语法

<body>
<h1>杭州欢迎你</h1>
<p>实现我梦想的地方</p>
<p>有梦想就有奇迹</p>
</body>

输出：

1.png

水平线标签语法

有序标签语法：

<ol>
  <li>列表项</li>
</>

举个栗子：

<ol>
<li>Coffee</li>
<li>Milk</li>
</ol>

输出：

1.png

html列表标签

属性：

1.png

无序标签语法：

<ul>
 <li>列表项</li>
</ul>

举个栗子：

<ul>
<li>Coffee</li>
<li>Milk</li>
</ul>

输出：

1.png

定义描述标签语法：

<dl>
 <dt>标题</dt>
<dd>描述1</dd>
</dl>

输出：

1.png

分区标签

<div>头部内容</div>
<div>导航内容</div>
<div>底部内容</div>
HTML <div> 元素是块级元素，它可用于组合其他 HTML 元素的容器。

<div> 元素没有特定的含义。除此之外，由于它属于块级元素，浏览器会在其前后显示折行。

如果与 CSS 一同使用，<div> 元素可用于对大的内容块设置样式属性。

<div> 元素的另一个常见的用途是文档布局。它取代了使用表格定义布局的老式方法。使用 <table> 元素进行文档布局不是表格的正确用法。<table> 元素的作用是显示表格化的数据。

常用的行级标签

按行逐一显示，前后不会自动换行

<b> 定义粗体文本
<i> 定义斜体文本
<em>定义强调文本，实际效果与斜体文本差不多
<strong>定义粗体文本，与<b>的作用基本一样
<small>定义定义小号文本
_{定义定义下标文本比如水的化学H2O里的2

^{定义定义上标文本比如氧气 O2里的2

<bdo>定义定义文本显示方向，内有dir属性，只能取值ltr或者rtl}}

超链接标签

<a href ="链接地址" target ="目标窗口"> 链接文本或图片</a>

其中

href 指定超链接所关联的另一个资源
2.target 指定框架集中的哪个框架来装载另一个资源，该属性可以是-self 使用自身加载网页，-top 顶层框架,-parent 父框架,-blank 新窗口.

图像标签

<span>标签

<span>文本等行级内容</span>
HTML <span> 元素是内联元素，可用作文本的容器

<span> 元素也没有特定的含义。

当与 CSS 一同使用时，<span> 元素可用于为部分文本设置样式属性。

换行

常用的特殊符号

空格 &nbsp；
大于（>） >
小于（<） <
引号（“） &quot；
版权号 &copy；

frameset框架集

创建框架网页的步骤：
1.创建各个子窗口对应的HTML文件
2.创建整个框架文件，分别引用子窗口文件

创建框架页面的基本语法：

<frameset cols="25%,50%,*" rows=50%,*" border="5">
   <frame src ="top.html">
    </frameset>

注意：<frameset></frameset> 标签不能与<body></body>标签同时使用。除非你<frameset>中使用<noframes>标签

<frameset>框架集标签中的常用属性。

属性： cols 值： pixel、%、* 描述：定义框架集中列的数目和尺寸
属性： rows 值： pixel、%、* 描述：定义框架集中行数目和尺寸

iframe内嵌框架

1.png

<iframe>语法：

<body>
  <iframe src ="引用页面地址" name="框架标识名" frameborder="边框" scrolling="yes"/>
</body>

iframe设置高度和宽度

举个栗子

<body>
<iframe src="demo_iframe.htm" width="200" height="200"></iframe>
</body>

输出：

1.png

html表格标签使用

特点：通常情况下，同行高度一致，同列宽度一致
相关元素：

1.png

表格由 <table> 标签来定义。每个表格均有若干行（由 <tr> 标签定义），每行被分割为若干单元格（由 <td> 标签定义）。字母 td 指表格数据（table data），即数据单元格的内容。数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等。

表格标签特点：
1.主要用于规则的数据显示
2.适当的可以再表单页面中使用

缺点：
1.代码量比较大，页面浏览速度比较慢
2.层次结构复杂，不易于维护和改版
3.不利于搜索引擎搜索，查找数据

举个栗子

<table border="1">
    <tr>
        <td>row 1, cell 1</td>
        <td>row 1, cell 2</td>
    </tr>
    <tr>
        <td>row 2, cell 1</td>
        <td>row 2, cell 2</td>
    </tr>
</table>

输出：

1.png

html图像标签

<img src="url" alt="some_text">

举个栗子

<body>

<h2>美丽的山</h2>
<img border="0" src="/images/pulpit.jpg" alt="Pulpit rock" width="304" height="228">

</body>

输出；

1.png

html表单标签

属性：

1.png

表单是一个包含表单元素的区域。

表单元素是允许用户在表单中输入内容,比如：文本域(textarea)、下拉列表、单选框(radio-buttons)、复选框(checkboxes)等等。

表单使用表单标签 <form> 来设置:
语法：

<form action="服务器文件" method="传送方式">
   。。。文本框、按钮等表单元素。。。
</form>

form的常用属性：
1.action：指定表单提交后由服务器上的哪个处理程序进行处理
2.enctype：用于指定表单数据的编码方式
*application/x-www-form-urlencoded:默认编码方式，将表单控件中的值处理成rul
编码方式

*mutipart/form-data：以二进制流的方式来处理表单数据

*text/plain: 当表单的action属性值为mailto：URL的形式时使用

3.method：指定向服务器提交的方式一般为get和post两种方式
*get方式的请求会将请求参数的名和值转换成字符串，并附加在原URL之后，
因此可以在地址栏中看到的请求参数的名和值。且get求传送的数据量比较小，一般不能大于2KB。

post方式安全性相对较高、 post方式的请求参数是放在HTML的HEADER中传输，用户在地址栏中看不到参数。

html表单输入元素 <input>

大多数情况下被用到的表单标签是输入标签（<input>）
输入类型是由类型属性（type）定义的。

单行文本框：

指定<input..../>元素的type属性为text即可
举个栗子

<form>
第一个名字: <input type="text" name="firstname"><br>
最后一个名字: <input type="text" name="lastname">
</form>

输出：

1.png

密码输入框：

密码输入框通过标签<input type="password"> 来定义:
举个栗子

<form>
password:<input type="password" name="pwd">
</form>

输出：

1.png

单选框（Radio Buttons）

指定<input.../>元素的type属性为radio即可

举个栗子

<form>
<input type="radio" name="sex" value="male">香蕉<br>
<input type="radio" name="sex" value="female">苹果
</form>

输出：

1.png

复选框（Checkboxes）

指定<input.../>元素的type属性为checkbox即可
举个栗子

<form>
<input type="checkbox" name="vehicle" value="自行车">我有一辆自行车<br>
<input type="checkbox" name="vehicle" value="汽车">我有一辆小轿车 
</form>

输出：

1.png

提交按钮(Submit Button)

指定<input.../>元素的type属性为submit
当用户单击确认按钮时，表单的内容会被传送到另一个文件
举个栗子

<form name="input" action="html_form_action.php" method="get">
名字: <input type="text" name="user">
<input type="submit" value="Submit">
</form>

输出：

1.png

input元素常用的几个属性

checked：设置单选框，复选框初始状态是否处于选中状态，只有当type属性值为
checkbox或radio时才可指定。
disabled：设置首次加载时禁用此元素。当type="hidden"时不能被指定该属性。

maxlength：该属性是一个数字，指定文本框中所允许输入的最大字符数。

readonly：指定该文本框内的值不允许修改（可使用javascript脚本修改）

size：是一个数字，指定该元素的长度，当type=“hidden” 时不能指定该属性

src：指定图像域所显示的图像URL，当type="image"时才可以指定该元素

列表框和下拉菜单 select对象

语法：

<select name="指定列表名称" size="行数">
<option value="选项值" selected="selected"> ...</option>
</select>

列表框常用属性

disabled: 是否禁用该元素
mutiple：设置该列表框是否允许多选
size：指定该列表内同时显示多少个列表项

在<select.../>元素李，只能包含如下两种子元素

<option>:用于定义列表框选项或者菜单项，它的常用属性如下：
- disable:指定是否禁用该元素
- selected：指定该列表初始状态是否处于被选中状态，值只能是selected
- value：指定该选项对应的请求参数值
<optgroup> 用于定义列表项或菜单项组，它的常用属性如下，
- label：指定该选项组的标签。这个属性必须填。
- disabled: 禁用该选项组里的所有选项，该属性值只能是disabled或者省略

多行文本框

属性：

1.png

语法：

<textarea rows="行数" cols="列数">
   文本内容
</textarea>

多行文本常用属性

1.<textarea>标签是成对出现的，以<textarea>开始，以</textarea>结束。

2、cols ：多行输入域的列数。

3、rows ：多行输入域的行数。

4、在<textarea></textarea>标签之间可以输入默认值。

举个栗子

<form  method="post" action="save.php">
        <label>请联系我们</label>
        <textarea cols="50" rows="10" >输入您的简介...</textarea>
</form>

输出：

1.png

CSS的作用与发展

css称之为层叠样式单。
css可以控制HTML文档的显示，但在控制文档显示之前，首先应在需要显示的HTML文档中引入css样式单，html提供了以下四种方式：

使用内联样式：这种方式样式内联定义到具体的HTML元素上，通常用于精确控制一个HTML元素的表现。
使用内部样式表：这种方式是通过在html文档头定义样式单部分来实现，在这种方式下，每批css样式只控制一份html文档
链接外部样式文件：这种方式将样式文件彻底与html文档分离
导入外部样式文件：这种方式与第三种方式类似，只是使用@import 来引入外部样式表文件

内联式css样式

列子：

<p style="color:yellow">黄色的</p>

嵌入式css样式

列子：

<style type="text/css">
span{
color:red;
}
</style>

外部式css样式

例子：

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

标签选择器

就是html代码中的标签。比如<html >、<h1>、<body>、<p>、<img>

 p{font-size:10px; line-height:1.5em;}

id选择器

id 选择器可以为标有特定 id 的 HTML 元素指定特定的样式。

HTML元素以id属性来设置id选择器,CSS 中 id 选择器以 "#" 来定义。

以下的样式规则应用于元素属性 id="para1":

#para1
{
   text-align:center;
   color:red;
}

输出：

1.png

class选择器

class 选择器用于描述一组元素的样式，class 选择器有别于id选择器，class可以在多个元素中使用。

class 选择器在HTML中以class属性表示, 在 CSS 中，类选择器以一个点"."号显示

语法：

. 类选择器{css样式代码;}

需要注意的是：

英文的园点
2.其中类选择器名称可以任意起名

CSS字体

css字体属性定义文本的字体系列大小，加粗，风格和变形。
属性描述
font-family 设置字体系列，比如：“serif”、“sans-serif”等
font-size 设置字体的尺寸
font-style 设置字体风格。主要有noraml、italic、oblique
font-variant 以小型大写字体或正常字体显示文本
font-weight 设置字体的粗细。主要有normal、bold、自定义粗细

css为控制文本提供了大量的属性，这些属性主要用于控制文本的颜色，修饰，字符间距等外观。
color ：设置文本颜色
letter-spacing：设置字符间距
line-height：设置文本行高
text-align：设置文本的对齐方式，只要有left，right，center
text-decoration：设置文本的装饰效果，主要有overline，underline，line-through
text-indent：设置文本块首行缩进
text-transform：控制文本的大小写，主要有uppercase，lowercase，capitalize
word-spacing：设置单词间距

CSS定位与DIV布局-盒子模型

css盒模型边框

盒子模型的边框就是围绕着内容及补白的线，这条线你可以设置它的粗细、样式和颜色(边框三个属性)。

css常用边框属性如下：

border：在一个声明中设置所有边框属性

border-width：设置四条边框的宽度

border-style：设置四条边框的样式，主要有dotted（点线）、soild（实线）、
double、dashed（虚线）

border-color：设置四条边框的颜色

border-left：再一个声明中设置所有左边框属性，对应还有border-right等

border-left-color：设置左边框颜色，对应还有border-right-color-style

border-left-style：设置左边框样式，对应还有border-right-style

border-left-width：控制左边框宽度，对应还有border-right-width

除了border属性可以将各个属性写在一起，CSS的很多其他属性也可以进行类似的操作，
举个栗子

 div{
      border: 3px   solid  red;    //边框粗细3px，样式为实心，颜色为红色的边框
}

CSS背景

网页背景除了使用颜色同样可以使用图片，css提供了相关属性来对背景图片进行精确的控制

属性：
background ：在一个声明中设置所有的背景属性

background-attachment：设置背景图像是否固定或者都随着页面的其余部分滚
动。主要有fixed和scroll两个值。

background-color：设置元素的背景颜色

background-image：设置元素的背景图像，主要有url和none两个属性

background-position：设置背景图像的开始位置，可以指定top left 等，也可以指
定具体的像素位置

background-repeat：设置是否及如何重复背景图像。主要有repeat、repeat-x、
repeat-y、no-repeat。

举个栗子

<style>
body
{
    background-color:#f90；
}
</style>
</head>

<body>

<h1>我的 CSS </h1>
<p>你好杭州！</p>

</body>

输出：

1.png

CSS列表

属性：

1.png

盒子模型

CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：边距，边框，填充，和实际内容。

1.png

Margin(外边距) - 清除边框外的区域，外边距是透明的。
Border(边框) - 围绕在内边距和内容外的边框。
Padding(内边距) - 清除内容周围的区域，内边距是透明的。
Content(内容) - 盒子的内容，显示文本和图像。

元素的宽度和高度

一个元素实际宽度（盒子的宽度）=左边界+左边框+左填充+内容宽度+右填充+右边框+右边界

1.png

元素浮动 float

float定位是css排版中重要的手段。属性float的值很简单，可以设置为left、right、或者默认值none，当设置了元素向左或向右浮动时，元素会向其父元素的左侧或右侧靠紧。
强调：float属性在文字排版和布局排版中经常使用到。
举个栗子

div{
    width:200px;
    height:200px;
    border:2px red solid;
    float:left;
}
<div id="div1"></div>
<div id="div2"></div>

输出：

1.png

position绝对定位(absolute)

绝对定位的元素的位置相对于最近的已定位父元素，如果元素没有已定位的父元素，那么它的位置相对于<html>
举个栗子

<style>
h2
{
    position:absolute;
    left:100px;
    top:150px;
}
</style>
</head>

<body>
<h2>这是一个绝对定位了的标题</h2>
<p>用绝对定位,一个元素可以放在页面上的任何位置。标题下面放置距离左边的页面100 px和距离页面的顶部150 px的元素。.</p>
</body>

输出：

1.png

position相对定位(relative)

相对定位元素的定位是相对其正常位置。
举个栗子

#div1{
    width:200px;
    height:200px;
    border:2px red solid;
    position:relative;
    left:100px;
    top:50px;
}

<div id="div1"></div>

输出：

1.png

position固定定位(fixed)

元素的位置相对于浏览器窗口是固定位置。

css布局-水平&垂直对齐

文本居中对齐

如果仅仅是为了文本在元素内居中对齐，可以使用 text-align: center;
举个栗子

<style>
.center {
    text-align: center;
    border: 3px solid green;
}
</style>
</head>
<body>

<h2>文本居中对齐</h2>

<div class="center">
  <p>文本居中对齐。</p>
</div>

</body>

输出：

1.png

HTML 与CSS

html文档基本机构

使用title标签

<meat>

HTML常用标签

常用的块级标签

标题标签语法

段落标签语法

水平线标签语法

有序标签语法：

html列表标签

无序标签语法：

定义描述标签语法：

** 分区标签**

常用的行级标签

超链接标签

图像标签

<span>标签

常用的特殊符号

frameset框架集

iframe内嵌框架

iframe设置高度和宽度

html表格标签使用

举个栗子

html图像标签

html表单标签

html表单 输入元素 <input>

单行文本框：

密码输入框：

单选框（Radio Buttons）

复选框（Checkboxes）

提交按钮(Submit Button)

input元素常用的几个属性

列表框和下拉菜单 select对象

列表框常用属性

多行文本框

多行文本常用属性

CSS的作用与发展

内联式css样式

嵌入式css样式

外部式css样式

标签选择器

id选择器

class选择器

CSS字体

CSS定位与DIV布局-盒子模型

css盒模型边框

css常用边框属性如下：

CSS背景

CSS列表

盒子模型

元素的宽度和高度

元素浮动 float

position绝对定位(absolute)

position相对定位(relative)

position固定定位(fixed)

css布局-水平&垂直对齐

文本居中对齐

猜你喜欢

热点阅读

分区标签

html表单输入元素 <input>