喵宅苑 MewoGarden × 技术宅社区II | Z站 Z Station

正文

本帖最后由

作者:Bboykin
[i=s] 本帖最后由 Bboykin 于 2014-4-24 17:30 编辑 想学网页制作吗?那就要先从HTML开始喔~ 最近整理了一些关于HTML5的入门知识,希望对你有用吧~ 标准HTML入门
Web标准的核心原则:“内容”和“表现”分离,HTML和CSS各司其职。
学习原则
(1) 重视基础,弄清效果背后的原理;
(2) 记熟常用常见的英文单词;
(3) 多上机练习,不懂就问;
(4) 使用Firefox及IE浏览器进行测试
关于网页制作的基础知识
网页构成:结构+表现+行为;
结构:决定网页“是什么”,通过(xHTML实现;
表现:决定网页看起来“怎么样”,通过CSS实现;
行为:决定网页“做什么”,通过JS实现;
网站开发的全过程:策划与定义、设计、开发、测试;
HTML学习
(实际上就是学习如何使用标记)
一、 声明HTML标准
声明HTML标准有利于网页在浏览器的表现;
声明HTML的方法:在HTML文件的最上面加入doctype定义,即加入<!doctype html>
二、 HTML文件结构:
全局标记
<html> </html>标记:HTML必不可少的标记,放在HTML声明下,无实质功能,仅作为形式上的标记;
头部标记
1.<head> </head>标记:HTML必不可少的标记,放在<html>元素内,放置关于此HTML文件的信息(标题,文本表现什么的);
2.<meta>标记:HTML必不可少的标记,放在<head>元素中,为web页面指定Unicode(统一字符编码标准),默认为<meta charset=”utf-8”>;(这是一个void元素!)
3.<title> </title>标记:HTML必不可少的标记,放在<head>元素中,设定网页标题;
躯干标记
4.<body> </body>标记:内联元素,HTML必不可少的标记,放在<html>元素中,地位与<head>平等,用来放置各种HTML标记,显示内容;
2.<p> </p>标记:块元素,HTML必不可少的标记,放置在<body>元素中,显示文本段落;
3.<h1> </h1>~<h6> </h6>标记:块元素,放置在<body>元素中,设置文本的标题,标题大小共有六级,<h1> </h1>中显示的标题最大,以后的依次减小;
4.<q> </q>标记:<q>元素是一个内联元素,放置在<body>元素中,表示在HTML里加段简短的引用;
5.<blockquote> </blockquote>标记:<blockquote>元素是一个块元素,放置在<body>元素中,表示在HTML中加入一段文本的引用;(例如引用一段广告)
内联元素与块元素的分别:
1. 内联元素在页面文本流中总在“行内”出现,而块元素显示时前后各有一个换行;
2. 内联元素通常用来标记小段内容,而块元素常常用作web网页中的主要构建模块;(设计一个网页时,一般先从大的块元素开始,然后再完善页面时再加入内联元素。)
6.<br/>标记:内联元素,void元素,放置在<body>元素中,显示换行;
7.<li> </li>标记:块元素,放置在<body>元素中,用来构建列表;
8.<ol> </ol>标记:块元素,放置在<body>元素中,使用一个<ol>元素包围列表项,则这些列表项将作为一个有序列表显示,同时每个列表项前面会自动标记上数字;
9.<ul> </ul>标记:块元素,放置在<body>元素中,使用一个<ul>元素包围列表项,则这些列表项将显示为一个无序列表,显示的顺序由源代码决定;
10.<img> 标记:内联元素,void元素,放置在<body>元素中,在使用位置插入图片;
使用细则:<imgsrc=“目标文件路径”>
必加属性:alt属性:指定描述这个图像的一些文本,当图像不能显示时,浏览器就会使用这个文本来取代图像;
可加属性:widthheight属性:指定图像大小;(由原图的原宽和原高像素数指定)
目标文件路径的确定方法:
相对路径
(1)向下链接到一个子文件夹:
明确源文件和目标文件;
追踪从源文件到目标文件的一个路径;
创建一个路径;
基本形式:同级文件夹/下级文件夹/再下级文件夹/../目标文件
2)向上链接到一个父文件夹:
步骤同上;
基本形式:../../../目标文件;
绝对路径
一个绝对路径=从根文件夹到一个文件的路径;
HTML属性
基本语法:<标记名称 属性名1=“属性值” 属性名2=“属性值”…>
注:若一个标记使用了多个属性,各个属性之间要用空格隔开;同时,应该只用浏览器支持的那些属性;
11.<a></a>标记:内联元素,用于创建指向另一个页面的链接;<a>元素的内容(可以是图像)就是链接文本;在浏览器中链接文本的下面会显示有下划线,指示这是可单击的;
用法:<a href=“目标文件路径”>
目标文件路径的方法与前面相同;不过还可以指向URL(统一资源定位符);
URL的组成:一个协议(HTTP)+一个网站名+资源的绝对地址;
网站名的组成:服务器名(WWW)+域名(Amazon.com);
好了,到这里为止,HTML里的基本标记就学完了;进一步该学习CSS了。

回复

好东西!!正需要!!!

作者:one262616
好东西!!正需要!!!
查看回复

发现个小错误,<img>标签的使用细则那一

作者:延陵柿子君
发现个小错误,<img>标签的使用细则那一条,正确的写法是<img src="目标文件路径" />; 然后还有<a></a>标签用法写完整的话应该是这样<a href=“目标文件路径”>内容</a>,楼主的写法如果是给零基础初学者看的话可能话产生误解~
查看回复

wjxhust回复给帖子:14307617

作者:wjxhust
不错!mark以下
查看回复

也挺好啊

作者:Bboykin
查看回复

基础知识还是基本都提到了

作者:Bboykin
查看回复

大家知道楼主在说什么吗?可以更通俗点吗?

作者:苹果饺
大家知道楼主在说什么吗?可以更通俗点吗?
查看回复

= =到底是谁

作者:qq912266122
= =到底是谁
查看回复

看一些零碎小知识~~

作者:jsznick
看一些零碎小知识~~
查看回复
上一页
下一页
0%
粤ICP备18082987号-1 浙公网安备 33010902001746号
站点地图友情链接:
喵宅苑
喵空间社区程序
络合兔
技术宅
腕能新趣
小五四博客
莉可POI
Mithril.js
枫の主题社
Project1
午后少年
机智库
七濑胡桃
xiuno
幻想の博客
茶兔社区
乐享社区
魂研社
26云导航
Nothentai
Lanzainc