html基础知识梳理

来源：互联网发布：未来软件官网编辑：程序博客网时间：2024/06/06 04:04

1 网站制作流程

前台美工设计

页面布局（html加内容 div+css控制样式）

动态html页面（javascript）

后台后台程序

数据库

上线运营

2 WEB前端开发课程和目标

课程 html 语法标签属性

css 语法 div+css布局兼容

辅助课 ps 切片色彩基础 seo优化

目标大型复杂静态前端

3 html

标记语言超文本标记语言浏览器解释执行各种标签 hypertext markup language 一般用版本html4.01 语法要求不严，标签不闭合，大小写不注意，引号运用不严格。 html和htm无区别

三大组成：标签属性元素

标签：标签不能交叉嵌套对标签：包含起始和结束标签

用两个尖括号括起来内容写在对标签中间

不区分大小写属性写在起始标签括号内

每个标签都闭合单标签：只有一个尖括号的标签

一个标签可以有N个属性属性在括号内

属性属性是配合标签来完善功能的属性名='属性值'

元素开始和结束标签和之间的内容，叫做元素

对标签<html>

<head>

</head>

<body>

</body>

</html>

doctype文档声明告知浏览器所使用的超文本或者可扩展超文本规范用dreamweaver创建新页面,会加入一些东西

a标签（对标签）可以打开一个超链接 a+tab <a href=""></a> <a>新浪</a>会显示一个新浪 <a href="http://baidu.com">百度</a>会打开百度

<a href="" target="_blank" title="显示鼠标到那的注释">后盾网</a> target为_blank新窗口打开网址

<a href="#跳转位置的ID">名称</a>对应着 <h3 id="某某">另一个名称</h3>

<span id="top"></span>对应<a href="#top或者body">返回顶部</a>返回顶部功能

img标签（单标签）用来引入图片 <img src="dog.jpg" width="500" height="200" /> weight和height和src和title和usemap属性， alt属性：加载失败文本提示 seo 指定图片内容 a标签包img可以超链接

列表元素无序列表<ul>li*n<ul> 即<ul><li><li><ul>

有序列表<ol>li*n<ol>

自定义列表 dl开始 dt标题 dd列表内容

表格元素 <table>表示表格 table属性里border边框宽度，align内容位置center居中左右方向

<tr>行每行宽度和表格宽度必须相同 bgcolor背景色 align和valign是上下位置top和bottom

<td>列 tr和td属性相同 tr*n>td*n可写n行n列

单元格的合并保留第一个单元格，删掉后面的，加上colspan合并列左右，rowsapn上下合并行

表单元素 Web浏览器和Web服务器通讯的最常用手段，和服务器上传下载数据表单元素form(action为数据发送地址，method为发送方式)实现

QQ截图20150210163655.png

元素有多行/单行文本框单选按钮文件域隐藏域

常用知识 Ctrl +/加注释 /表示标签结束标签嵌套要包含关系，不能交叉 sublime ctrl选择多行前端中单引号和双引号没有区别 <br>换行多项相同修改可以用Ctrl多选后集中修改

4 组成部分 body中的标签放展示的内容，网页主体

字体效果标签如右

h1标签一般只有一个，百度小爬虫怀疑你作弊

head的标签 <meta name="keywords" content="" /> 关键词2到3个

作业提交方法

网页编码指定的字符格式库，加了中文才能用中文的，如GBK兼容GB2312，UTF-8万国码推荐。

方法如<meta ht tp-equiv="Content-Type" content="text/html; charset=utf-8" /> 解决乱码sublime不行了，用emeditor就行，前者只支持 UTF-8的编码格式。 head里设置的和网页文件本身内置的编码格式一样就可以修改网页文件内置编码在保存时选择相应编码就行

html实体用符号表示特殊字符

热点地图图片不同区域加不同地址用Dreamweaver做，图片属性中画形状，加链接和目标

<area shape="circle" coords="185,200,22" href="http://www.baidu.com" target="_blank" /> href和target属性

</map>

图片知识

对于色彩少的图片可以用gif，变的很小了，BMP是矢量图

相对路径：相对路径写的时候一定要找到起点网页引用本路径下的二层或者多层文件用，image/cat.bmp 引用上层的用../image/cat.jpg

0 0