HTML基础

最新推荐文章于 2022-08-31 15:32:35 发布

tnnnnt

最新推荐文章于 2022-08-31 15:32:35 发布

阅读量1.2k

点赞数 1

文章标签： html xhtml 网页设计 dreamweaver

本文链接：https://blog.csdn.net/yongzhouchen/article/details/116565445

版权

认识HTML
- HTML文档基本格式（了解即可）
  - <!DOCTYPE>文档类型声明
    - <!DOCTYPE>标记位于文档的最前面，用于向浏览器说明当前文档使用哪种HTML或XHTML标准规范。
    - 必须在开头处使用<!DOCTYPE>标记为所有的XHTML文档指定XHTML版本和类型，这样浏览器才能将该网页作为有效的XHTML文档，并按指定的文档类型进行解析。
    - <!DOCTYPE>标记和浏览器的兼容性相关，删除<!DOCTYPE>，就是把如何展示HTML页面的权利交给浏览器。
  - <html>根标记
    - <html>标记用于告知浏览器其自身是一个HTML文档。
    - 在<html>之后有一串代码“xmlns=“http://www.w3.org/1999/xhtml””用于声明XHTML统一的默认命名空间。
  - <head>头部标记
    - 主要用来封装其他位于文档头部的标记。
    - 一个HTML文档只能含有一对<head>标记，绝大多数文档头部包含的数据都不会真正作为内容显示在网页中。
  - <body>主体标记
    - 用于定义HTML文档所要显示的内容。
    - 一个HTML文档只能含有一对<body>标记，且<body>标记必须在<html>标记内，位于<head>头部标记之后，与<head>标记是并列关系。
- HTML标记
  - 单标记：<标记名 />
  - 双标记：<标记名>内容</标记名>
  - 注释标记：<!–注释语句–>
- 标记的属性
  - 基本语法格式如下：<标记名属性1=“属性值1” 属性2=“属性值2” …>内容</标记名>
- HTML文档头部相关标记
  - 设置页面标题标记<title>，基本语法格式如下：<title>网页标题名称</title>
  - 定义页面元信息标记<meta />
    - <meta name=“名称” content=“值” />
      - 设置网页关键字：其中name属性的值为keywords，用于定义搜索内容名称为网页关键字，content属性的值用于定义关键字的具体内容，多个关键字内容之间可以用","分隔。
      - 设置网页描述：其中name属性的值为description，用于定义搜索内容名称为网页描述，content属性的值用于定义描述的具体内容。需要注意的是网页描述的文字不必过多。
      - 设置网页作者：其中name属性的值为author，用于定义搜索内容名称为网页作者，content属性的值用于定义具体的作者信息。
    - <meta http-equiv=“名称” content=“值” />
      - 在<meta>标记中使用http-equiv/content属性可以设置服务器发送给浏览器的HTTP头部信息，为浏览器显示该页面提供相关的参数。其中，http-equiv属性提供参数类型，content属性提供对应的参数值。默认会发送<meta http-equiv=“Content-Type” content=“text/html” />，通知浏览器发送的文件类型是HTML。具体应用如下。
        设置字符集,例如传智播客官网字符集的设置:<meta http-equiv=“Content-Type” content=“text/html;charset=utf-8” />,其中http-equiv属性的值为Content-Type,content属性的值为text/html和charset=utf-8,中间用";"隔开,用于说明当前文档类型为HTML,字符集为utf-8(国际化编码,是目前最常用的字符集编码方式,常用的字符集编码方式还有gbk和gb2312)。
        设置页面自动刷新与跳转,例如定义某个页面10秒后跳转至传智播客官网:<meta http-equiv=“refresh” content=“10;url=http://www.itcast.cn” />,其中http-equiv属性的值为refresh,content属性的值为数值和url地址,中间用";"隔开,用于指定在特定的时间后跳转至目标页面,该时间默认以秒为单位。
  - 引用外部文件标记<link>
  - 内嵌样式标记<style>
    - <style>标记用于为HTML文档定义样式信息,位于<head>头部标记中。在HTML中使用style标记时,常常定义其属性为type,相应的属性值为text/css,表示使用内嵌式的CSS样式。

HTML文本控制标记

标题和段落标记

标题标记
- 基本语法格式:<hn align=“对齐方式”>标题文本</hn>
  - n取值为1到6
  - align为可选属性,用于指定标题的对齐方式。
    - left:左对齐(默认)
    - center:居中对齐
    - right:右对齐
- 注意
  - 一个页面中只能有一个<h1>标记,常常用于网站的logo部分
  - h元素拥有确切的语义,初学者禁止仅仅使用h标记设置文字加粗或更改文字的大小
  - XHTML不赞成使用h标记的align对齐属性,可使用style属性或通过CSS设置
段落标记
- 基本语法格式:<p align=“对齐方式”>段落文本</p>

水平线标记<hr />

基本语法格式:<hr 属性=“属性值” />

常用属性

属性名	含义	属性值
align	设置水平线的对齐方式	left、right、center(默认)
size	设置水平线的粗细	以像素为单位,默认为2像素
color	设置水平线的颜色	可用颜色名称、16进制#RGB、rgb(r,g,b)
width	设置水平线的宽度	可以是确定的像素值,也可以是浏览器窗口的百分比,默认为100%

换行标记<br />

文本样式标记(font)
- 基本语法格式:<font 属性=“属性值”>文本内容</font>
- 常用属性
  
  属性名含义
  face 设置文字的字体
  size 设置文字的大小,可以取1到7之间的整数值
  color 设置文字的颜色
- 注意:XHTML不赞成使用<font>标记,可使用CSS样式来定义文本的字体、大小和颜色

属性名	含义
face	设置文字的字体
size	设置文字的大小,可以取1到7之间的整数值
color	设置文字的颜色

文本格式化标记

常用文本格式化标记

标记	显示效果
<b></b>和<strong></strong>	文字以粗体方式显示(XHTML推荐使用strong)
<i></i>和<em></em>	文字以斜体方式显示(XHTML推荐使用em)
<s></s>和<del></del>	文字以加删除线方式显示(XHTML推荐使用del)
<u></u>和<ins></ins>	文字以加下划线方式显示(XHTML不赞成使用u)

特殊字符标记
- 常用特殊字符的表示
  
  特殊字符字符的代码
   
  < <
  > >
  & &
  ¥ ¥
  © ©
  ® ®
  ° °
  ± ±
  × ×
  ÷ ÷
  ² ²
  ³ ³
- 注意:浏览器对空格符的解析是有差异的,导致了使用空格符的页面在各个浏览器中显示效果的不同,因此不推荐使用,可使用CSS样式替代
<div>标记(之后细讲)

特殊字符	字符的代码

<	<
>	>
&	&
¥	¥
©	©
®	®
°	°
±	±
×	×
÷	÷
²	²
³	³

HTML图像标记

常用图像格式
- GIF:GIF支持动画,是一种无损的图像格式.支持透明(全透明或全不透明),因此很适合在互联网上使用.但GIF只能处理256种颜色.在网页制作中,GIF格式常常用于logo,小图标及其他颜色相对单一的图像.
- PNG:PNG包括PNG-8和真色彩PNG(PNG-24和PNG-32).相当于GIF,PNG最大的优势是体积更小,支持alpha透明(全透明,半透明,全不透明),并且颜色过滤更平滑,但PNG不支持动画.其中PNG-8和GIF类似,只能支持256种颜色,如果做静态图可以取代GIF,而真色彩PNG可以支持更多的颜色,同时真色彩PNG(PNG-32)支持半透明效果的处理.
- JPG:JPG所能显示的颜色比GIF和PNG要多很多,可以用来保存超过256种颜色的图像,但是JPG是一种有损压缩的图像格式.JPG是特别为照片图像设计的文件格式,网页制作过程中类似于照片的图像都可以保存为JPG格式.
- 简而言之,在网页中小图片或网页基本元素(如图标,按钮等)考虑GIF或PNG-8,半透明图像考虑PNG,类似照片的图像则考虑JPG.

图像标记

基本语法格式：<img src=“图像URL”/>

<img />标记的属性

属性	属性值	描述
src	URL	图像的路径
alt	文本	图像不能显示时的替换文本（各浏览器对alt属性的解析不同）
title	文本	鼠标悬停时显示的内容
width	像素	设置图像的宽度
height	像素	设置图像的高度
border	数字	设置图像边框的宽度
vspace	像素	设置图像顶部和底部的空白（垂直边距）
hspace	像素	设置图像左侧和右侧的空白（水平边距）
align	left	将图像对齐到左边
align	right	将图像对齐到右边
align	top	将图像的顶端和文本的第一行文字对齐，其他文字居图像下方
align	middle	将图像的水平中线和文本的第一行文字对齐，其他文字居图像下方
align	bottom	将图像的底部和文本的第一行文字对齐，其他文字居图像下方

注意
- XHTML不赞成图像标记<img />使用border、vspace、hspace及align属性，可用CSS样式代替。
- 网页制作中，装饰性的图像一般不直接适应<img />标记，而是通过CSS设置背景图像来实现。

相对路径与绝对路径
- 绝对路径
  - 绝对路径就是网页上的文件或目录在硬盘上的真正路径，或完整的网络地址。
- 相对路径
  - 相对路径就是相对于当前文件的路径，相对路径不带有盘符，通常是以HTML网页文件为起点，通过层级关系描述目标图像的位置。总结起来，相对路径的设置分为以下3种。
    - 图像文件和html文件位于同一文件夹：只需输入图像文件的名称即可，如：<img src=“logo.gif” />。
    - 图像文件位于html文件的下一级文件夹：输入文件夹名和文件名，之间用“/”隔开，如<img src=“img/img01/logo.gif” />。
    - 图像文件位于html文件的上一级文件夹：在文件名之前加入“…/”，如果是上两级，则需要使用“…/…/”，以此类推，如<img src="…/logo.gif" />。

tnnnnt

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
HTML基础

认识HTMLHTML文档基本格式（了解即可）<!DOCTYPE>文档类型声明<!DOCTYPE>标记位于文档的最前面，用于向浏览器说明当前文档使用哪种HTML或XHTML标准规范。必须在开头处使用<!DOCTYPE>标记为所有的XHTML文档指定XHTML版本和类型，这样浏览器才能将该网页作为有效的XHTML文档，并按指定的文档类型进行解析。<!DOCTYPE>标记和浏览器的兼容性相关，删除<!DOCTYPE>...
复制链接

扫一扫