您的位置：首页 > Web前端 > CSS

HTML和CSS简介重点总结

2018-08-16 16:34 197 查看
版权声明：作者原创，转载请附上文章链接。 https://blog.csdn.net/baidu_29343517/article/details/81744290

HTML入门：

什么是HTML？

HTML：超文本标记语言( Hyper Text Markup Language )。

  1. HTML不是一种编程语言,而是一种标记语言，描述网页的语言。
  2. HTML使用标签描述网页中图片、文本、音乐、视频、超链接等。

 

HTML5是什么？

Hyper Text Markup Language（超文本标记语言）

超文本包括：文字、图片、音频、视频、动画等。

 

HTML5的优点：

  1. 结构清晰，简单
  2. 引入了标签可以方便的实现之前很复杂的操作
  3. 可以适用于移动端的开发
  4. 支持很多大型网站和客户端

 

W3C：

World Wide Web Consortium（万维网联盟）

成立于1994年，Web技术领域最权威和具影响力的国际中立性技术标准机构

http://www.w3.org/

http://www.chinaw3c.org/

 

W3C标准包括：

结构化标准语言（XHTML 、XML）

表现标准语言（CSS）

行为标准（DOM、ECMAScript ）

规范意识：

  1. 标签名称、属性名称必须小写
  2. 标签必须严格嵌套，并且必须闭合，即使空元素标签也必须闭合
  3. 属性值必须用引号引起来

 

开发环境及开发工具：

开发环境: windows、Linux、Mac OSX

开发工具: Dreamweaver、Eclipse、FrontPage、WebStorm……

我们选择WebStorm，它的优点有：智能的代码补全、代码提示、自动保存……

我们使用WebStorm 10。

新建的方法：

  1. 点击File中的New Project【创建一个新的工程】
  2. 创建一个Empty Project，选择Location【路径】，点击create
  3. 创建好工程之后，右键选择创建一个新的HTML File
  4. 创建好的项目是HTML 5类型的，起一个名字，点击OK

<!DOCTYPE html>     【间接的文档类型声明，表示是一个HTML 5类型的文档】

<html>              【标签是成对出现的，有开始就有结束】

<head lang="en">   

<meta charset="UTF-8">       【head中设置文件的编码格式】

gb2312包含全部中文字符

utf-8 则包含全世界所有国家需要用到的字符

页面编码应与页面文件保存时的编码一致

    <title>我的第一个网页</title>  【head中的title就是网页的标题】

</head>

<body>

hello world !!!        【body中写的是网页的主要内容】

</body>

</html>

写好之后，鼠标在窗口右侧晃一晃就会出现可以用来打开写好的网页

<meta>标签：

<title>标签

<title>家用电器排行榜</title>

HTML基本标签：

名称

标签

示例

标题标签

<h1>～<h6>

【只有1到6】

并且字体会逐渐减小

<h1>静夜思</h1>

段落和换行标签

<ｐ>…</p>、<br/>

【<br/>没有开始，他是一个单标记】

<p>床前明月光<br/>疑是地上霜</p>

水平线标签

<hr/>【<hr/>也是一个单标记】

<hr/>

斜体

<em>…</em>

<em>举头望明月</em>

字体加粗

<strong>…</strong>

<strong>低头思故乡</strong>

 

注释和特殊符号：

特殊符号

字符实体

示例

空格

&nbsp;

<a href="#">百度</a>&nbsp;|&nbsp;

<a href="#">新浪</a>

大于号(>)

&gt;

如果时间&gt;晚上6点，就坐车回家

小于号(<)

&lt;

如果时间&lt;早上7点，就走路去上学

引号(")

&quot;

W3C规范中，HTML的属性值必须用成对的&quot;引起来

版权符号@

&copy;

&copy; 2003-2013北大青鸟

注释

<!--注释内容-->

增加可读性，方便团队合作

 

学习方法：

w3cSchool：帮助文档。

图片标签：

常见图片格式：jpg、gif、bmp、png

网页中常用的是jpg和gif；bmp代表的是位图，清晰度和使用都不方便；png有限制，有些浏览器不支持。

 

尖括号里面的字母叫做这个标签的属性：

src：代表这个图片的路径属性；

alt：代表如果这个图片不能正常显示时;替换的东西的属性；

width：代表宽度的属性

height：代表高度的属性

 

路径的问题：

  1. 相对路径

从当前位置出发

  1. 绝对路径

从根源出发

例如：

c:\1\2\3\4.txt

c:\1\2\3\5.txt

3.txt中如何定位5.txt

方法一：5.txt   这就是相对路径

方法二：c:\1\2\3\5.txt   这就是绝对路径

正常网络开发一般都用相对路径

../ 【作用是返回上一级目录】

../../ 【作用是返回上一级的上一级目录】

超链接：

 

超链接的应用：

1. 页面间链接：A页到B页，网上常见链接。

<a  href="detail.html" target="_blank">姑娘，欢迎降落在这残酷的世界</a>

<a  href="detail.html" target="_self"><img src="image/img1.png" alt="姑娘，欢迎降落在这残酷的世界"title="姑娘，欢迎降落在这残酷的世界" /></a>

 

2. 锚链接：

跳至自身固定位置：

从A页面的甲位置跳转到本页中的乙位置

从A页面的甲位置跳转到B页面中的乙位置

需要锚标记

超链接部分要<a href="#XXX">……</a>

要跳转到的部分要<a name="XXX"></a>

例如：

跳到同一个页面的固定位置：

[<a href="#register">新用户注册帮助</a>]

中括号[ ]只是显示出来的没有实际意义。

<a name="register">新用户注册</a>

[<a href="#login">用户登录帮助</a>]

<a name="login">登录</a>

 

跳到不同页面的固定位置：

1. HTML

<a href="2. HTML#login">用户登录帮助</a>

2. HTML

<a name="login">登录</a>

 

3. 功能性链接：电子邮件、QQ、MSN等链接。

<a href="mailto：邮箱地址">给站长写信</a>

超链接伪类：标签名:伪类名{声明;}

例如：

a:hover {

       color:#B46210;

       text-decoration:underline;

}

使用CSS设置超链接：

伪类名称

含义

示例

a:link

未单击访问时超链接样式

a:link{color:#9ef5f9;}

a:visited

单击访问后超链接样式

a:visited {color:#333;}

a:hover

鼠标悬浮其上的超链接样式

a:hover{color:#ff7300;}

a:active

鼠标单击未释放的超链接样式

a:active {color:#999;}

设置伪类的顺序：a:link->a:visited->a:hover->a:active

总结：

 

 

阅读更多
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航