html和CSS的关系
- HTML是网页内容的载体。内容就是网页制作者放在页面上想要让用户浏览的信息,可以包含文字、图片、视频等。
- CSS样式是表现。就像网页的外衣。比如,标题字体、颜色变化,或为标题加入背景图片、边框等。所有这些用来改变内容外观的东西称之为表现。
- JavaScript是用来实现网页上的特效效果。如:鼠标滑过弹出下拉菜单。或鼠标滑过表格的背景颜色改变。还有焦点新闻(新闻图片)的轮换。可以这么理解,有动画的,有交互的一般都是用JavaScript来实现的。
认识html标签
网页中每一个内容在浏览器中的显示,都要存放在各种标签中。到现在为止几乎每一个 html 文件都有一条这样的语句 :
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
这个是写在 html 文件的头部中,主要是告诉浏览器这个的内容类型是 html 文档,里面的内容是使用文本和 html,字符集是UTF-8。因为没有标注字符集的话,有可能在网页中默认选择GB的,这样你在编译时一般都是使用的是UTF-8的国际字符集进行编码,但是到了网页中就会出现乱码。简而言之,在html文档中,这句话可以直接照抄的,不会出错。
标签的基本语法:
- 标签由英文尖括号<和>括起来,如
<html>
就是一个标签。 - html 中的标签一般都是成对出现的,分开始标签和结束标签。结束标签比开始标签多了一个/。
- 标签与标签之间是可以嵌套的,但先后顺序必须保持一致,如:
<div>
里嵌套<p>
,那么</p>
必须放在</div>
的前面。 - html 标签不区分大小写,
<h1>
和<H1>
是一样的,建议小写。
html 文件的基本结构
<html>
<head>...</head>
<body>...</body>
</html>
1. <html></html> 称为根标签,所有的网页标签都在 <html></html> 中。
2. <head> 标签用于定义文档的头部,它是所有头部元素的容器。头部元素有<title>、<script>、<style>、<link>、<meta>等标签。
3. 在<body></body> 标签之间的内容是网页的主要内容,如 <h1>、<p>、<a>、<img> 等网页内容标签,在这里的标签中的内容会在浏览器中显示出来。
认识head标签
head标签描述了文档的各种属性和信息,绝大部分内容不会作为内容显示出来
<head>
<title> 网页的标题信息,出现在浏览器的标题栏中,每个网页应该有自己独一无二的标题 </title>
<meta>
<link>
<style>...</style>
<script>...</script>
</head>
html代码注释
<!--注释文字-->
css代码注释
/*注释文字*/
<h></h>(为网页添加标题) 是标题标签,一共有六个分为六级 h1、h2、h3、h4、h5、h6 ,其中 h1 的等级最高,字号最大;
<p></p>(添加段落)是段落标签,默认样式段前段后都有空白;
<img src=""> 是图片标签;
<em> 标签表示强调,并且在浏览器中 <em> 默认用斜体表示。
<strong> 标签表示更强烈的强调,<strong> 用粗体表示。
<span> 文本 </span> 标签是没有语义的,它的作用就是为了设置单独的样式用的。
<q> 引用文本 </q>(短文本引用),它的语义是应用别人的话,引用的文本不用加双引号
<blockquote> 引用文本 </blockquote>(长文本引用),浏览器对<blockquote> 标签的解析是缩进样式的,不会自动添加双引号,也不用自己加。
<br/>(实现换行) 是一个空标签,没有 html 内容的标签就是空标签,只需要写一个开始标签就可以了,这样的标签有 <br />、<hr />和<img />。在html 中是忽略回车和空格的,你输入的再多回车和空格也是显示不出来的,所以要想实现换行需要使用此标签。
(添加空格) 不间断空格(no-breaking space),记得加分号。
<hr />(添加水平横线)空标签,标签在浏览器中的默认样式线条比较粗,颜色为灰色
<address>联系地址信息 </address> (特别用于地址的明显显示)在浏览器上显示的样式为斜体,另起一段,块级元素。
<code> 代码语言 </code> 加入一行代码,作用是防止浏览器误认为是要执行代码,而没显示代码。加了标签浏览器就不会执行了,而是像文本一样显示出来。
<pre> 语言代码段 </pre> 加入多行代码,被包围在 pre 元素中的文本通常会保留空格和换行符。在网页中预显示格式时都可以使用它。