HTML+CSS基础

学习web前端开发基础技术需要掌握：HTML、CSS、JavaScript语言。

1. HTML是网页内容的载体。可以包含文字、图片、视频等。

2. CSS样式是表现。就像网页的外衣。比如，标题字体、颜色变化，或为标题加入背景图片、边框等。

3. JavaScript是用来实现网页上的特效效果。有动画的，有交互的一般都是用JavaScript来实现的。

html文件的结构：一个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>等网页内容标签，在这里的标签中的内容会在浏览器中显示出来。

<hx>标签来制作文章的标题。语法：<hx>标题文本</hx> (x为1-6)

<p></p>是段落标签. 语法：<p>段落文本</p>

<em> 默认用斜体表示，<strong> 用粗体表示. 语法：<em>需要强调的文本</em> <strong>需要强调的文本</strong>

<span>标签是没有语义的，它的作用就是为了设置单独的样式用的。语法：<span>文本</span>

<q>标签，短文本引用，浏览器会对q标签自动添加双引号.

<blockquote>标签，长文本引用,浏览器对<blockquote>标签的解析是缩进样式. 语法:<blockquote>引用文本</blockquote>

<br>标签分行显示文本,作用相当于word文档中的回车. 语法：xhtml1.0写法：<br /> html4.01写法：<br> 现在一般使用 xhtml1.0 的版本的写法<br />标签是一个空标签，没有HTML内容的标签就是空标签，空标签只需要写一个开始标签，这样的标签有<br />、<hr />和<img />。

 为你的网页中添加一些空格. 语法： 

<hr>标签，添加水平横线. 语法：html4.01版本 <hr> xhtml1.0版本 <hr /> 现在一般使用 xhtml1.0 的版本（其它标签也是），这种版本比较规范。

<address>标签，为网页加入地址信息,在浏览器上显示的样式为斜体语法：<address>联系地址信息</address>

<code>标签加入一行代码. 语法：<code>代码语言</code>

<pre>标签为你的网页加入大段代码. 语法：<pre>语言代码段</pre>

ul，添加新闻信息列表，ul-li是没有前后顺序的信息列表，每项li前都自带一个圆点

语法：<ul>

<li>语言代码段</li>

<ul>

ol，标签来制作有序列表来展示,<ol>在网页中显示的默认样式一般为：每项<li>前都自带一个序号，序号默认从1开始

语法：

<ol>
   <li>信息</li>
   <li>信息</li>
   ......
</ol>

div在排版中的作用，在网页制作过程过中，可以把一些独立的逻辑部分划分出来，放在一个<div>标签中，这个<div>标签的作用就相当于一个框。

语法：<div>…</div>

用id属性来为<div>提供唯一的名称。语法：<div id="版块名称">…</div>

table标签，认识网页上的表格。创建表格的四个元素：table、tbody、tr、th、td

1、<table>…</table>：整个表格以<table>标记开始、</table>标记结束。

2、<tbody>…</tbody>：如果不加<thead><tbody><tfooter> , table表格加载完后才显示。加上这些表格结构， tbody包含行的内容下载完优先显示，不必等待表格结束后在显示，同时如果表格很长，用tbody分段，可以一部分一部分地显示。（通俗理解table 可以按结构一块块的显示，不在等整个表格加载完后显示。）

3、<tr>…</tr>：表格的一行，所以有几对tr 表格就有几行。

4、<td>…</td>：表格的一个单元格，一行中包含几对<td>...</td>，说明一行中就有几列。

5、<th>…</th>：表格的头部的一个单元格，表格表头。

6、表格中列的个数，取决于一行中数据单元格的个数。

用css样式，为表格加入边框

caption标签，为表格添加标题和摘要

摘要语法：<table summary="表格简介文本">

标题语法：

<table>
    <caption>标题文本</caption>
    <tr>
        <td>…</td>
        <td>…</td>
        …
    </tr>
…
</table>

<head>标签的作用

<head>
    <title>...</title>网页的标题信息，它会出现在浏览器的标题栏中。
    <meta>
    <link>
    <style>...</style>
    <script>...</script>
</head>

HTML的代码注释
语法：

HTML的代码注释

猜你喜欢