1html笔记1Word文件下载.docx

1html笔记1Word文件下载.docx

《1html笔记1Word文件下载.docx》由会员分享，可在线阅读，更多相关《1html笔记1Word文件下载.docx（17页珍藏版）》请在冰豆网上搜索。

●WHATWG应用程序工作组firefoxieopearsafarichrome查浏览器的特点

html5移动设备（手机端，平板）

html5=html+css+javascript+api

html5的特点:

宽松，标签有语义化后期会讲

4.第一个网页会的

ctrl+s文件下---保存----文件的扩展名.html

●注意，静态网页文件扩展名.html

●动态网页文件扩展名：

.php

5.增强的文本编辑器

一个好的代码编辑器，可以提高工作效率，代码编辑去分成两类

•增强文本编辑器：

小巧，操作简单，文本的颜色，有缩进，没有代码的提示，

editplus

notepad++

•IDE集成环境编译器:

开发软件，功能强大，有代码提示

sublimezendstudiodreamweaver

5.1Editplus编辑器的快捷键

ctrl+c复制

ctrl+v粘贴

ctrl+s保存

5.2Editplus设置：

1）字体字号样式行距的设置

2）代码颜色设置

3）语法代码颜色的设置

4）模板的设置

5）默认测试浏览器设置

把浏览器的路径复制出来

选择浏览器---单击右键---属性----快捷方式里面有一个--目标—把路径复制出来不要“”

二、Html标签详解

1.html标签语法

HTML标签的语法，大致分两类：

双标签：

开始标签和结束标签构成，内容的开始和结束标签之间

语法：

标签属性=”属性值”属性=”属性值”>

内容<

/标签>

属性:

人特征:

体重=”180”身高=”190”性别=”男”

单标签：

只有开始标签，结束用在开始标签的末尾加/符号

标签属性=”属性值”属性=”属性值”/>

link…./>

meta…./>

hr/>

大多数标签都是双标签

2.主体标签

htmlheadtitlebody

保存-----xx.html

案例：

建立一个空页面，页面的标题是论坛-传智云课堂

1）HTML网页文件结构说明

html告诉浏览器如何解析网页的内容

head告诉浏览器网页的汉字设置什么样的字符集，如果使用字符集不正确，出现乱码

gb_2312简体中文utf-8多国语言字符集的由来和设置

在汉字操作，默认的字符集是gb_2312

title优化

body99%写在该body中

3.文字标签

font>

设置文本的字体大小颜色

color文本的颜色color=”red”color=”green”color=”#ff00ff”

size=”大小”号为单位

face=”字体”

b>

strong>

/strong>

语气加强

i>

/i>

em>

/em>

u>

下划线

sup>

上标

sub>

下标

big>

大一号

small>

小一号

需求：

输入一段文字前10个字，文本颜色为蓝色，文本加粗，文本加下划线

中午效果

第一个作业

·

精神障碍是常见病患者过亿

安倍赴美“朝贡”如履薄冰

伊万卡特朗普最大的软实力

第二个作业

4.排版标签

p>

段落

段落的属性

align=”left//center//right”

换行单标签

水平线：

内容和版权进行分割

水平线的属性

●color=”颜色值”『只适用于IE』

●size粗细

●width宽度width=”70%”width=”600”固定

●align=“left//center//right”

●noshade去掉阴影

课间作业

搜狐的

pre>

html使用的不多，PHP里面使用的多

把内容在浏览器中原样输出空格和换行

h1>

/h1>

标题一标题自己会占一行

<

h2>

..

h6>

/h6>

标题六

下面的两个标签会在css样式中用

div>

上网站上使用的最多的标签之一，本身没有意义，自己独占一行，

必须结合css样式构成功能div+css

span>

网上用的最多的标签之一，本身没有意义，不是自己独占一行结合css样式构成功能

5.XHTML标签的书写规则

●Html标记不区分大小写,w3c规定使用小写<

html>

HTML>

●标记可以拥有若干个属性（包括0个），，是由w3c标准制定的

●属性值用双引号引起“”

●单标记一定要闭合，单标签一般没有内容<

●双标记的内容放到开始标记和结束标记之间<

/u>

●html的标记可以相互嵌套，但是一定要注意是顺序嵌套，不能交叉嵌套

6.超链接标签（重点）

格式

a>

链接的内容<

/a>

属性

href=”链接的地址”

target=”_blank”新的窗口打开目标文件

target=”_self”默认的打开方式，在原来的窗口打开（原有的窗口覆盖）

name链接的名称讲

title说明

1）绝对地址（网络地址）

单击链接可以直接找到目标文件http:

//

2）相对路径

建立文件夹，把页面都放入该文件夹中

在该文件夹下的操作

●同一个目录下的文件,直接输入文件名就可以

ahref=”xx.html”>

内容<

1.html里面内容有搜狐首页---单击搜狐首页，跳转到2.html

2.html里的内容搜狐娱乐新闻

●目标文件在当前文件下级目录

把所有的文件夹一次写出来

xx/xx/xx.html

521文件夹----里面----修正文件夹----里面管理后台文件夹------管理妹妹.html

1.html

把文件夹名写出来后面加/

521/修正/管理后台/管理妹妹.html

●目标文件在当前文件的上级

../表示上一级

../../两级

3）特殊链接

●下载链接：

.rar.exe.zip

.html.jpg.png不用下载

●邮件链接：

ahref=”mailto:

邮箱的地址”>

举报邮箱<

ahref=mailto:

meimei@>

链接内容<

●空链接（#）

有链接的样式，在当前的页面，

●Js链接

ahref=””>

关闭窗口<

如果浏览器无法关闭

4）锚点链接

跳转到页面的某个区域，

跳转到哪

1锚点记号

aname=”top”>

在<

a>

之间不加内容

2跳转到记号

ahref=”#top”>

跳转<

7.图像标签单标签

img

img/>

图片的属性

src=“图片的路径”

width=”宽度”

height=”高度值”

alt=“说明”

8.列表标签（重点）

列表：

就是若干个相似的内容排列出来

1）（项目符号）无序列表:

就是若干个相似的内容排列出来,没有先后顺序

●html代码

●css代码

●js代码

ul>

li>

html代码<

/li>

css代码<

js代码<

/ul>

ul的属性

type=”circle”type=”square”方形

2）（编号列表）有序列表

就是若干个相似的内容排列出来,有先后顺序

1.html代码

2.css代码

3.js代码

ol>

/ol>

ol属性

type=”a/A/i/I”

start=”从第几个开始”

3）定义列表重点

dl>

dt>

标题<

/dt>

dd>

烹饪锅具菜百<

/dd>

/dl>

9.表格

table>

tr>

td>

内容<

/td>

/tr>

/table>

table>

表格的属性

●表格的边框border=”数值”默认是0

●表格的边框颜色bordercolor=”颜色值”

●表格的宽度width=”数值”

●表格水平对齐方式align=”left/center/right”

●表格背景色bgcolor=”颜色”

●表格的背景图片background=”图片的地址”

●注意：

背景图片的优先级高于背景颜色

●单元格边框和内容之间的距离cellpadding=”数值”默认是2

●单元格和单元格之间的距离cellspacing=”数值”默认是2

●合并单元格边框线rules=”all”细线css来设置

效果

的属性

●行的高度height=”数值”

●行的背景色bgcolor=”颜色值”

●行的背景图片background=”图片的地址”

●行水平居中align=”left//center//right”左中右

●行的垂直居中valign=”top//center//bottom”上中下

有背景图片的优先级高于背景颜色

和<

th>

属性

●单元格的宽度width=”数值”

●单元格的高度height=”高度值”

●单元格的背景色bgcolor=”颜色值”

●单元格的背景图片background=”图片的地址”

单元格左右合并

大图片

小图片

colspan=”合并的单元格数”

下面的案例

单元格上下合并

rowspan=”合并的单元格”

合并的单元格属于上方的行

3

2