HTML笔记

最新推荐文章于 2019-07-10 22:57:36 发布

Christopher Cheung

最新推荐文章于 2019-07-10 22:57:36 发布

阅读量397

点赞数 1

分类专栏： DIV+CSS 文章标签： html

本文链接：https://blog.youkuaiyun.com/zch19960629/article/details/70984223

版权

DIV+CSS 专栏收录该内容

1 篇文章

订阅专栏

第一章：Hyper Text Markup Language（HTML）
HTML基本结构：标题、段落、列表、表格以及各种嵌入对象

声明文档遵守的W3C标准和规范

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

页面所有的内容都放在HTML标签中：

<html xmlns="http://www.w3.org/1999/xhtml">

HTML标签：
标题标签：

<meta name="keywords" content="插入关键字">

<meta name="description" content="设置页面说明">

<meta name="generator" content="编辑软件的名称">

<meta http-equiv="content-type" content="text/html;charset=gb2312">

<meta http-equiv="refresh" content="20;URL=index1.html">

<title>网页的定时跳转</title>

<meta name="author" content="小溪">

<title>设定作者信息</title>

<title>描述网页的标题，将在浏览器窗口的标题栏显示网页的标题</title>

<pre></pre>预定格式标签

> 网页的主体标签<body></body>  
>  
> **body属性有**： 
>  背景色bgcolor        
>  网页背景图片<body   background="图片的地址">   
> 文字颜色<body text="文字的颜色">   
> 链接文字的颜色<body link="">
> 正在访问链接的文字颜色和访问后链接文字的颜色<body alink=""  vlink=""> 边距margin    
> <body  topmargin=""  leftmargin="">

文字与段落标签：

标题字<h1>~<h6>

标题字的对齐属性align  <h1  align="">有left center right

文本基本标签<font></font> 是最基本的标签之一

字体属性face  、字号属性size    、颜色属性color

文本粗体标签<b></b>或<strong></strong>

文本斜体标签<i></i>或<em></em> 或<cite></cite>

上标标签<sup></sup>  下标标签<sub></sub>

下划线标签<u></u>

段落标签<p></p>  段落对齐属性align

换行标签<br/>

不换行标签<nobr> </nobr>

水平线标签<hr>  水平线宽度width    水平线高度size    水平线颜色color  水平线排列align noshade阴影

插入空格&nbsp

范围标签<span></span>

第四章：使用图像

插入图像标签<img >img属性如下：
src   图像的源文件

路径：
绝对路径：提供目标文档的完整主机名称、路径信息、及文档全称
如果当前文档与目标文档位置平行，则直接书写文档全称
如果当前文档和目标文档所在文件夹位置平行，则书写为文件夹名称/目标文档名称
如果当前文档所在文件夹和目标文档的位置平行，则书写为 ../目标文档全称
（../表示上一级）

alt 提示文字
title 鼠标指针停留在图片上显示的文字
width height 宽度和高度
border 图像边框
vspace 垂直边距
hspace 水平边距
align 排列方式
！！！设置好图片的对齐方式，可以使得图片后的文字有不同的显示效果
例如：align=left时有图文混排的效果

dynsrc 设定avi文件的播放
loop 设定avi文件循环播放的此时
loopdelay 设定avi文件循环播放的延迟
图像的超链接
图像的热区链接直接在图像属性那边设置

第五章：使用列表

有序列表
<ol type="" start="">
    <li>...</li>
</ol>

无序列表
<ul type="">
    <li>...</li>
</ul>

定义列表
<dl>
    <dt>定义条件（可以是图片）</dt>
    <dd>定义描述</dd>
</dl>

菜单列表
<menu>
    <li>...</li>
</menu>

第六章：使用表格

<table   width=""  height="" border="边框的宽度" bordercolor="边框颜色"  cellspacing="内框宽度"    cellpadding="表格内文字与边框间距"  bgcolor=“表格背景颜色” background="表格背景图像">
<caption>设置表格的标题caption</caption>
<th>表头</th>
<th>表头</th>
<th>表头</th>
<tr>
     <td> 单元格的内容</td>
     <td> 单元格的内容</td>
     <td> 单元格的内容</td>
</tr>
<tfoot>表尾</tfoot>
</table>

表尾

设置表格的标题caption
表头	表头	表头
单元格的内容	单元格的内容	单元格的内容

表格的行属性

<tr height=""  bgcolor=""  background="" align="" valign="">

单元格的背景图像

<td background="">

第七章：建立超链接
1.内部链接

<a href=""  target="目标窗口的打开方式"></a>

其中target有4个参数值：self  在当前页面打开超链接
blank  在一个全新的空白窗口中打开链接
top     在顶层框架中打开链接，也可以理解为在跟框架中打开链接
parent    在当前框架的上一层里打开链接

第十章：使用表单

<form>   </form>

1.提交表单

<form action="表单的处理程序></form>

2.表单名称

<form name="" ></form>

3.传送方法

<form method="get"或"post">

4.插入表单对象:

文字字段<input name="" type="text" value="" size ="" maxlength=""/>

密码域 <input name="" type="password" value="*" maxlength=""/>

单选按钮 <input name="" type="radio" value="单选按钮的取值" checked="checked"/>

复选按钮<input name ="" type="checkbox" value="checkbox" checked="checked"/>

提交按钮<input name ="" type ="submit" value="按钮的取值"/>

重置按钮<input name ="" type="reset" />

图像域

<input name="image" type="image" src="path"/>

文件域 <input name="文件域名称" type="file" size="控件的长度" maxlength="最长字符数"/>

菜单和列表：

<select name="下拉菜单名称">
          <option value="选项值"  selected>
         ......
</select>

<div></div>
<span></span>

都是容器，但div是块元素，span标签是内联元素
块级元素独占一行，可以定义宽度和高度常用块级元素有p,div,ul,li
和内联元素a
但块级元素和内联元素是可以相互转换的，display：block（内联元素——>块级元素）
display：inline（块级元素——>内联元素）；

理解web标准的含义——————为什么要采用web标准
web标准不是一个标准，而是由w3c和其他标准化组织制定的一系列标准的集合。包含我们所熟悉的HTML、XHTML、JavaScript以及CSS等。目的是统一一个web表现层
提高页面浏览速度。
缩短排版时间
降低网站流量的费用
更容易被搜寻引擎搜索到
内容能被更广泛的设备所访问。包括屏幕阅读机、手持设备、搜索机器人、打印机、电冰箱、
、
WEB标准的构成？
主要由三部分组成：结构（structure）表现（presentation）和行为（Behavior）

CSS选择器类型：标签选择器、类选择器、ID选择器、并集选择器、和后代选择器。

在HTML中引入CSS的方式：
1.行内式
2.嵌入式
3.导入式与链接式
导入式与链接式目的都是将一个独立的CSS文件引入HTML文件中，二者的区别在于链接式使用HTML标签引入CSS文件，而导入式则使用CSS的规则引用CSS文件
样式的优先级：
基本选择器之间：ID选择器>类选择器>标签选择器
样式表之间：行内样式>内嵌样式>外部样式
CSS样式之间：在同一个选择器中，两条相同的声明，后一条声明会覆盖前一条声明，即显示后一条声明的结果。

CSS属性：网页元素可以修饰的属性很多，常用的样式有文本与字体、背景、列表、浮动等属性
1、文本与字体属性：文本颜色，行高，对齐方式，字符间距，常见的文本属性

CSS语法：
选择器{ h1{
声明1； font-size:12px;

    声明2；                color:red;

    }                       }

基础选择器：标签选择器、类选择器和ID选择器
类样式可以作用于不同的标签
复合选择器：
并集选择器：不同选择器之间用英文逗号隔开
交集选择器：格式为：标签选择器+类选择器或者标签选择器+ID选择器
选择器之间不能用空格或者其他字符隔开
后代选择器：选择器之间可以是多个不同或者相同类型并且具有层级关系
选择器之间用空格隔开!!!

CSS样式的引入方式：行内样式、内部样式表（内嵌）、外部样式表

    外部样式表：链接式:`<link  type="text/CSS" rel="stylesheet" href="path">`

导入式 <

style type="text/CSS">
    @import url=""
    </style>

文本属性：
color 设置文本颜色
line-height：设置行高
text-align:设置对齐方式
letter-spacing:设置字符间距
text-decoration:设置文本修饰，取值有underline、none、overline、line-through,blink,inherit
white-spacing:规定如何处理空白;
text-indent:缩进文本；

字体属性：
font:在一个声明中设置字体的所有样式属性；
font 简写属性在一个声明中设置所有字体属性。
可设置的属性是（按顺序）： “font-style font-variant font-weight font-size/line-height font-family”

font-size和font-family的值是必需的。如果缺少了其他值，默认值将被插入，如果有默认值的话。

font-family：定义字体类型;浏览器自动找到第一个能显示的字体。
font-size：定义字体大小
font-weight:字体他粗细
font-style：字体风格；

背景属性：
background：简写属性，作用是将背景的多个分量属性设置在一个声明中
background-color 设置元素的背景颜色
background-image:把图像设置为背景
background-repeat：设置背景的平铺方式
background-position：设置背景出现的初始位置；

第九章：使用框架结构

框架是网页设计中常用的技术，可以再一个浏览器窗口中显示多个文档。
框架是浏览器窗口中的一个区域，它可以显示与浏览器窗口其余部分所显示的内容无关的HTML文档。框架结构是将两个或两个以上的网页组合起来，在同一个窗口中打开的网页结构。

<frameset rows="40%,60%" frameborder="yes" border="1" framespacing="1">
  <frame src="top.html" name="mainFrame" id="mainFrame" />
  <frame src="foot.html" name="bottomFrame" scrolling="No" noresize="noresize" id="bottomFrame" />
</frameset>

嵌套分割窗口：

<frameset rows="80,*" cols="*" frameborder="yes" border="0" framespacing="0">
  <frame src="top.html" name="topFrame" scrolling="No" noresize="noresize" id="topFrame" />
  <frameset cols="80,*" frameborder="yes" border="0" framespacing="0">
    <frame src="left.html" name="leftFrame" scrolling="No" noresize="noresize" id="leftFrame" />
    <frame src="right.html" name="mainFrame" id="mainFrame" />
  </frameset>
</frameset>

框架的边框颜色：


> <frameset rows="80,*" cols="*" frameborder="yes" border="0"
> framespacing="0">    
> <frame src="top.html" name="topFrame"
> scrolling="No" noresize="noresize" id="topFrame" />  
> 
>  <frameset> cols="80,*" frameborder="yes" border="0" framespacing="0"> 
>  
> <frame src="left.html" name="leftFrame" scrolling="No" noresize="noresize" id="leftFrame" /> 
> 
>   <frame src="right.html" name="mainFrame" id="mainFrame" />   </frameset> </frameset>