前端小白入门篇1

HTML基础

什么是HTML?
HyperText Markup Language 超文本标记语言

HTML发展史
1993年 IETF 发布HTML1.0
1995年 W3C 发布HTML2.0
1996年 W3C 发布HTML3.2
1997年 W3C 发布HTML4.0
1999年 W3C 发布HTML4.0.1
2000年 W3C 发布XHTML1.0
2001年 W3C 发布XHTML1.1
XHTML2.0?
2004年 WHATWG 发布HTML5草案
2008年合并发布HTML5正式版
2014年HTML5定稿

HTML特点
HTML不需要编译，直接由浏览器执行
HTML文件是一个文本文件
HTML文件必须使用html或htm为文件名后缀
HTML大小写不敏感，HTML与html一样

开发工具:
大佬当然首选记事本，word等等
还有Dreamweaver，Sublime Text，webStorm，Notepad++

1.HTML基础语法
HTML基本结构
HTML标签
HTML元素
HTML属性
注释

基本结构

<html>
<head>  <!-- 头部信息-->
	<title>标题</title>
</head>
<body bgcolor="blue">
	网页主体  
	<hr/> <!-- 水平线-->
</body>
</html>

2.HTML文档段落
DOCTYPE文档类型声明
<! DOCTYPE>声明必须放在HTML文档第一行
<! DOCTYPE>声明不是HTML标签

网页编码设置
问题：当网页乱码时
解决：在head标签之间加：

<meta http-equiv="Content-Type"  content="text/html;charset=utf-8"/>



文字和段落标签
标题标签：<h1></h1>~<h6></h6>由大到小
段落标签<p align="left"></p>
align对齐属性值：
left,right,center,justify
换行标签：<br/>
&nbsp;空格
<pre></pre>预格式标签，在里面输什么就展示什么
水平线标签：<hr width="80%" color="#666" align="left"/>
noshade设置水平线无阴影

文字和段落标签
文字斜体：<i> </i> <em></em>
加粗：<b> </b> <strong></strong>
下标：<sub>上标：<sup>
下划线：<ins>
删除线:<del>

&lt;小于 &gt; 大于
&reg;已注册  &copy;版权
&trade;商标 &nbsp;空白

注：utf-8，GB2312，gbk等编码

3.列表标签

无序列表
<ul type="disc">
	<li></li>
	<li></li>
</ul>
type: disc  square circle
有序列表ol
<ol>
	<li></li>
	<li></li>
</ol>
type: 1  a   A  i  I

定义列表
<dl>
	<dt>定义列表项</dt>
	<dd>列表项描述</dd>
	<dt>定义列表项</dt>
	<dd>列表项描述</dd>
</dl>
dt和dd是同级标签，dt不能放在dd内，同理dd也不能放在dt里
这三个标签要组合使用

列表应用场景新闻，课程列表，商品，排行榜等
查看网页源代码 F12 或右击查看源代码

结构+表现+行为
HTML+CSS+JS

4.图像和超链接标签

图片
<img src="" alt="" />
img属性：
src   URL
alt    图像替换文字
height 高  数值和百分比
width  宽  数值和百分比
title  鼠标移上去显示文字
用百分比会根据浏览器窗口大小进行改变，固定数值则不会变

URL路径
相对路径和绝对路径
创建的文件夹和文件建议使用英文
绝对路径从盘符开始写起
建议用相对路径，从你所在的网页文件找起
同级用src=“1.jpg”
上一级src=“…/1.jpg”
同级下的img文件夹下src=“img/1.jpg”
alt的作用：
由于网速太慢，src属性中的错误，浏览器禁用图像，用户无法查看时，alt属性可以代替图像显示在浏览器中的内容。

超链接标签

<a href=""></a>
href:链接地址，可以是内部链接也可以是外部链接。
属性：
href 	链接地址
target	链接的目标窗口_self,_blank,_top,_parent
title	链接提示文字
name	链接命名，定义锚

定义锚：
<a href = "#mao1"> 1</a>
<a href = "#mao2"> 2</a>
<a name = "mao1"> content1</a>
<a name = "mao2"> content1</a>

定义锚（不同页面）：
first.html <a href = "second.html#mao1"> 1</a>
second.html <a name = "mao1"> content</a>

电子邮件链接：
<a href = "mailto:e-mail_address"> 1</a>

文件下载：
<a href = "download_address"> 1</a>

5.HTML基础总结
先要知道html基础结构
头部信息，网页内容构成html文件
head里面的内容不在网页内显示
语法：<标签名></标签名>
规范：
<和>括起来，标签一般成对出现，结束标签比开始标签多一个/
单标签：没有结束标签例如<hr />
用<!doctype>声明必须放在html文档第一行
网页编码设置为utf-8,gb2312,gbk等
文字和段落标签
特殊符号
列表标签
图像和超链接标签

to be continued…

HTML基础

猜你喜欢