HTML+CSS学习笔记（一）_html,css实习笔记日记-优快云博客

本文介绍了HTML和CSS的基础知识，包括两者的定义、作用及相互间的关系。解释了HTML如何承载网页内容，CSS如何控制内容的表现形式，同时涵盖了常用HTML标签及其用法。

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 中是忽略回车和空格的，你输入的再多回车和空格也是显示不出来的，所以要想实现换行需要使用此标签。

&nbsp;(添加空格) 不间断空格(no-breaking space)，记得加分号。

<hr />(添加水平横线)空标签，标签在浏览器中的默认样式线条比较粗，颜色为灰色

<address>联系地址信息 </address> (特别用于地址的明显显示)在浏览器上显示的样式为斜体，另起一段，块级元素。

<code> 代码语言 </code> 加入一行代码，作用是防止浏览器误认为是要执行代码，而没显示代码。加了标签浏览器就不会执行了，而是像文本一样显示出来。

<pre> 语言代码段 </pre> 加入多行代码，被包围在 pre 元素中的文本通常会保留空格和换行符。在网页中预显示格式时都可以使用它。