HTML与CSS快速入门

最新推荐文章于 2024-06-12 19:53:28 发布

ZTT-Erolii

最新推荐文章于 2024-06-12 19:53:28 发布

阅读量125

点赞数

分类专栏： web

本文链接：https://blog.csdn.net/weixin_46031140/article/details/114847882

版权

web 专栏收录该内容

12 篇文章 0 订阅

订阅专栏

HTML基本结构与基本标签

（一）基本内容

1，网页基本组成元素：logo,登录表单，导航栏，Banner,图像和动画，视频，文本、超链接
2，HTML：（hyper text markup language）超文本标签语言，是网页的 “源码”
3，浏览器：“解释和执行” HTML的源码工具
4，HTML标记的作用：标记内容在浏览器中的显示样式。
5，HTML标记的语法
一般形式：<标记> 文档内容 </标记>
6，标记类型：

标记类型	举例
单标记	不标记任何内容，例如< br >，< hr >
双标记	例如： < p> 段落内容< /p >

7，标记属性：
分类：一般属性，事件属性
< 标记属性1=“属性值” 属性2=“属性值” 属性3=“属性值”… >
例如：< hr size=“3” align=“center” width=“50%”>

（二）基本结构

1，事件：可能是内容上的点击、鼠标经过某个特定元素、按下键盘上的某些按键等动作。还可能是 Web 浏览器中发生的事情，比如说某个 Web 页面加载完成，或者是用户滚动窗口或改变窗口大小。
2，响应事件：事件属性的值往往是一个JavaScript函数，通过使用 JavaScript ，可以监听特定事件的发生，并对这些事件做出响应。
3，HTML文档的的基本结构：
在这里插入图片描述
4，< body >…< /body >标签：这部分包含文本、图像和链接
5，< head >…< /head >标签：标记对之间的部分称为文件头，作用是告诉浏览器如何显示页面，例如字符集，有效期等并为搜索引擎提供支持。
6，子标记：

标记	解释
< title >< /title >标记	编辑网页的摘要信息
< meta >标记	单标记，提供两类元数据描述；（1）描述文档类型和字符编码（2）描述搜索关键字和描述
< base >标记	为页面上的所有相对URL 指定默认值href和target属性
< link >标记	定义文档与外部资源的关系
< style >…< /style > 标记	标签用于为 HTML 文档定义样式信息。

< meta > 两类元数据的解释：
1.一类是关于HTTP头的描述，向浏览器传回信息，以正确显示网页内容；
< meta http-equiv=“头名” content=“头值" >
2.一类是关于页面内容的描述，用于搜索引擎。
< meta name=“内容名称” content=“内容的值" >
举例：

<head> 
   <meta name= "keywords" content= "淘宝,网上购物,在线交易,交易市场" />
   <meta name= "description" content= "淘宝网-亚洲最大、最安全的网上交易平台，提供各类服饰、美容、家居、数码、……" />
</head>

7，HTML页面中的块和行：为了方便布局，HTML标签分类可分为：块级标签，显示为“块”状，前后换行；行级标签，按行逐一显示。分类好处：方便后续的布局设计。

（三）块级标签

根据使用场合，块级标签又细分为：基本块级标签
，常用于布局的块级标签。
1，标题标签：
语法:
< h1 >标题< /h1 >
……
< h6 >标题< /h6 >

<body>
  <h1>一级标题</h1>
  <h2>二级标题</h2>
  <h3>三级标题</h3>
  <h4>四级标题</h4>
  <h5>五级标题</h5>
  <h6>六级标题</h6>
</body>

2，段落标签：
语法:< p >……< /p >

<body>
  <h1>北京欢迎你</h1>
  <p>北京欢迎你，有梦想谁都了不起！</p>
  <p>有勇气就会有奇迹。</p>
</body>

3，水平线标签：
语法：< hr / >

<body>
  <h1>北京欢迎你</h1>
  <hr />
  <p>北京欢迎你，有梦想谁都了不起！/p>
  <p>有勇气就会有奇迹。</p>
</body>

4，有序列表标签：
语法:
< ol >
< li >列表项1< /li >
… …
< /ol >

<body>
<h3>注册步骤：</h3>
<ol>
  <li>填写信息</li> 
  <li>收电子邮件</li>
  <li>注册成功</li>  
</ol>
</body>

5，无序列表标签：
语法：
< ul >
< li >列表项1< /li >
……
< /ul >

<body>
<h3>新人上路指南 </h3> 
<ul>
  <li>如何激活会员名？</li>
  <li>如何注册贵美会员？</li>
  <li>注册时密码设置有什么要求？</li>
  <li>贵美认证</li>
</ul>
</body>

6，定义描述标签：
语法:
< dl >
< dt >标题</ dt >
< dd >描述1< /dd >
……
< /dl >

<body>
<dl>
    <dt>咖啡</dt>
    <dd>一种黑色的热饮料，原料据说是咖啡豆，非洲盛产这类原料。</dd>
    <dd>可以提神，刺激神经。</dd>
<dl>
</body>

7，表格：
语法：
< table >：表格
< tr > ：行
< td > ：列（单元格）

<table>
  <tr>  
     <td>百度</td> 
     <td>新浪</td>
 </tr> 
……
</table>

8，表单：
语法:
< form >
< table >
< tr >
< td >…< /td >
< td >…</ td >
< /tr >
…
< /table >
< /form >
在这里插入图片描述
9，分区标签< div >:
作用：div标签可内嵌到< p >等标签内，作为普通块状元素使用。一般当作结构化块状元素使用，即容器来使用。

<div style="width:400px; height:300px; background:#9FF">
    <p>……</p>
    <h3>新人上路</h3>
    <ul>
    ……
    </ul>
    div其实就是一个......
  </div>

10，实际开发常用的4种块状结构：

1、div-ul(ol)-li ：常用于分类导航或菜单等
2、div-dl-dt-dd ：常用于图文混编的场合
3、table-tr-td ：常用于图文布局或显示数据
4、form-table-tr-td：常用于布局表单

（四）行级标签

1，图像标签：
语法：
< img src= “图片地址” alt=“提示文字” title=“提示文字” / >

示例：

<img src="images/drink.jpg" alt="精品热卖：高清晰，30寸等离子电视" 
    title="精品热卖：高清晰，30寸等离子电视" />

2，范围标签 < span >：显示某行内的独特样式
语法：< span >文本等行级内容< /span >
示例：

<p>商品价格:仅售<span style="color:red;font-size:70px;">10</span>元</p>

3，换行标签< br/ >:
示例：

<p>
  北京欢迎你，有梦想谁都了不起！<br />
  有勇气就会有奇迹。<br />
  北京欢迎你，为你开天辟地<br />
  流动中的魅力充满朝气。<br />
  北京欢迎你，在太阳下分享呼吸<br />
  在黄土地刷新成绩。<br />
  北京欢迎你，像音乐感动你<br />
  让我们都加油去超越自己。<br />
  </p>

（五）W3C标准和XHTML 1.0基本规范

1，W3C(World Wide Web Consortium)万维网联盟 :负责制定和维护web行业标准
2，W3C标准包括：
HTML内容方面：XHTML；
样式美化方面：CSS ；
结构文档访问方面：DOM；
页面交互方面：ECMAScript；
3，XHTML 1.0基本规范：
标签名和属性名称必须小写；
HTML标签必须关闭；
属性值必须用引号括起来；
标签必须正确嵌套；
必须添加文档类型声明；
例子：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"   
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
……
</head>
……body部分内容……
</html>