Html基础知识

来源：互联网发布：nfc软件读取银行卡编辑：程序博客网时间：2024/06/07 04:59

Web三要素：

(1) Server：服务器

(2) Client/Browser：客户端/浏览器

(3) HTTP/HTTPS：协议

格式：

http://IP/path/xx.html

HTML语法

双标签：<b>hello</b>

单标签：<br/>

斜体字：<i>...</i>

字体样式：<font color=’red’ id=”” class=”” style=”” title=””>

HTML文档的基本结构

<!DOCTYPE html>

<html>

<head>

</head>

<body>

</body>

</html>

1.HTML转义字符

基本格式： &xxxx;

<<>>空格 &&©©®®™™

HTML注释：不需要浏览器处理或显示，可用于以后调试或源码读取方便。注意：注释不能嵌套

2.HTML元素的类型：

(1)区块元素(block)：必须处于独立的一行中

(2)内联元素(inline)：可以与其他内容处在一行中

3.Web开发用到的图片格式

bmp：未经压缩的bit图，一般不用于Web开发

psd：photoshop doc原始文档，支持层，页面中不直接使用

tiff：出版印刷

raw：太大

jpeg：经过压缩的图片，保真度高，色彩丰富，适用于Web中的照片，1024*768大压缩到100k甚至更小完全可以接受

png：色彩没有jpg丰富，但透明度支持的好，压缩比例大，适合于图标

gif：色彩比较丰富，支持动画效果，也在一定程度支持透明度。

4.页面中使用的资源的路径

HTML页面中可能用到资源：

"图片"、"CSS"、“JS”、“另一个页面”

要使用这些资源必须指定资源URL，URL有如下三种：

(1) 绝对路径：已协议名开头的路径，如http://www.baidu.com/logo.png

(2) 相对路径：不以协议名开头，如g.jpg ./g.jpg images/g.jpg ../g.jpg ../../../images/g.jpg

(3) 根相对路径：以/开头的路径，相对于当前站点的根路径，而与当前页面所在路径无关

补充：<head><base href=”http://www.baidu.com/”/></head>

base标签用于指定当前页面的相对地址的资源的URL基准值

5.TABLE的使用——重点

(1)显示批量的数据

(2)作页面布局——过时(Deprecated)

<table>

<tr>

</tr>

</table>

表格的最完整形式

<table>

<caption>2016学子社内部门绩效表</caption>

<thead>

</thead>

<tbody>

....

</tbody>

<tfoot>

</tfoot>

</table>

6.页面布局

(1) TABLE作布局：表格嵌套可能导致页面很复杂不易编辑，浏览体验不好(要么一片空白，要么一次性全部出来)

(2) DIV+CSS：当前主流

(3) HTML5布局标签：未来趋势

重要的所过的HTML标签

标签名

含义

常用属性

类型

html

开始

head

页面头

title

标题(页面名字）

定义网页的元数据

http-equiv="content-type" content="text/html;charset=UTF-8"

body

页面身体

<b></b>

bold文本加粗，描述样式

XHTML中已废弃

inline

文本加粗，描述语义

XHTML中推荐代替<b>

inline

<i></i>

italic文本斜体显示，描述样式

XHTML中已废弃

inline

文本斜体显示，描述语义

XHTML中推荐代替<i>

inline

<u></u>

underline下划线，描述样式

inline

<s></s>

strike删除线，描述样式

inline

下标字，描述样式

inline

上标字，描述样式

inline

h1,h2...h6

header，标题字，描述语义

注意：标题字在不同浏览器中的默认字体高度、间距都是不一样的

block

<p></p>

paragraph文章的段落，描述语义

block

<br/>

HTML4:斜杠可以省略

XHTML:不允许省略

HTML5:允许

行内分区工具，跨距，是一个最简单的inline元素

必须配合CSS或JS才能有效果

inline

元素分组工具，层，常用于内容分层、页面布局，是一个最简单的block

配合CSS使用（DIV+CSS布局）

block

<hr/>

horizontal rule水平分割线

width

color

align

block

使用源代码中的效果呈现内容

block

<img />

通知浏览器此刻应该向服务器发起一个图片请求

src指定图片的URL

width:像素、百分比

height

alt:若图片无法显示则显示此替代文字

title

inline

anchor锚

href指定要跳转的url、邮箱、要执行的js函数

target指定在你哪个页面中打开(_self/_blank)

name指定可供停靠的锚点名称

inline

table

表格

block

行

列

align:left/center/right

valign:top/middle/bottom

rowspan:跨越的行数

colspan:跨越的列数

meta data：元数据—描述数据的数据

BookName Pricepagetom & Jary3865

这里bookName、price、page就是元数据。

Tom&jary，38，65，是数据

例如：常在head标签下描述页面的编码格式：

这样就不会出现乱码问题了

0 0