HTML页面结构层HTML
分以下方面学习:
HTML基础,
HTML表格,
HTML表单,
搭建网页结构
html基础
学习前端的第一门课程,为HTML基础,HTML标记语言,它是网页制作的第一步。
学习内容:
HTML概念,了解HTML发展史,基础语法,常用标签(段落,图片,链接等)
结合小例子
什么是HTML
HTML(Hypertext Markup Language)即超文本标记语言
html发展史
1993(IETF)HTML1.0
1995(W3C)HTML2.0
1996(W3C)HTML4.0
1997(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一样
HTML是一个文本文件
HTML基础语法
学习内容
HTML基本结构
HTML标签
HTML元素
HTML属性
注解
注解:div标签为块级结构布局元素,因此将在css中结合盒模型进行讲解。
HTML基本结构
<html>
// 头部信息
<head>
<title>标题</title>
</head>
// 网页内容
<body>
网页主体内容
</body>
</html>
html标签属性
语法:
<标签名 属性名1=“属性值” 属性名2=“属性值” ...> ... </标签名>
DOCTYPE文档类型声明
<!DOCTYPE>
声明必须放在html文档第一行
<!DOCTYPE>
声明不是HTML标签
<!DOCTYPE html>
<html>
<head>
<!-- 网页头部内容 -->
<title>标题</title>
</head>
<body>
<!-- 网页主体内容 -->
</body>
</html>
网页编码设置
问题:
当网页显示出现乱码时
解决:
在<head></head>
标签之间添加
<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
注:utf-8,GB2312,gbk等编码
文字和段落标签
标题标签:
<h1></h1> ~ <h6></h6>
段落标签:
<p></p>
align对齐属性值:
值,描述
left 左对齐内容
right 右对齐内容
center 居中对齐内容
justify 对行进伸展,这样每行都可以有相等的长度。
换行标签:
<br/>
<p align="justify"></p>
列表标签
html标签
html标记标签通常被称为HTML标签
HTML标签是由尖括号包围的关键词
HTML标签通常是成对出
标签对中的第一个标签是开始标签,第二个标签是结束标签
什么是HTML
HTML是用来描述网页的一种语言
HTML超文本标记
无序列表
<ul>
<li>1</li>
<li>2</li>
</ul>
type属性值:
值,描述
disc:圆点
square:正方形
circle:空心圆
有序列表
语法:
<ol>
<li>1</li>
<li>2</li>
</ol>
type属性值:
值,描述:
1,数字1,2,。。。
a,小写字母a,b。。。
A,大写字母A,B。。。
i,小写罗马数字i
I,大写罗马数字I
列表标签
定义列表:
<dl>
<dt>定义列表项</dt>
<dd>1</dd>
<dd>2</dd>
<dt>列表</dt>
<dd>1</dd>
<dd>2</dd>
</dl>
定义标签内可以有多个<dt>
对于每一个<dt>可以有多个<dd>
图像和超链接标签
图像标签
语法:
<img src=" " alt=" " ...>
img属性:
属性,值,描述
src,url,显示图像的Url
alt,文字,图像替代文本
height,数值和百分比,图像的高
width,数值和百分比,图像的宽
HTML路径:
相对路径
绝对路径
超链接标签
语法:
<a href=" ">内容</a>
href:链接地址,可以是内部链接或外部链接
超链接(空链接—target-title属性)
超链接标签
属性,描述
href:链接地址
target:链接的目标窗口
_self, _blank, _top, _parent
title链接提示文字
name链接命令
修饰标签和特殊符号
文字斜体:<i></i>,<em></em>
加粗:<b></b>,<strong></strong>
下标:<sub>
上标:<sup>
特殊符号:
属性,显示结果,描述
< < 小于号或显示标记
> > 大于号或显示标记
® ® 已注册
@copy; © 版权
™ ™ 商标
Space 不断行的空白
列表标签应用场景
锚链接(同一页面)
超链接标签
定义锚:
<a href="#锚名1">目录1</a>
<a href="#锚名2">目录2</a>
<a href="..." name="锚名1" >内容</a>
xxxx
<a href="..." name="锚名2">内容</a>
xxxx
在不同页面如何定义锚点
定义锚(不同页面):
网页1:<a href="网页名称#锚名">...</a>
网页2:<a name="锚名">...</a>
html基本结构:
语法:<标签名></标签名>
例如:<html>...</html>
规范:
1,<和>
括起来
2,成对出现,开始标签和结束标签,结束标签比开始标签多了一个/
HTML表格
基础表格
学习内容:
了解表格应用场景
表格基本结构
如何操作表格
表格属性
表格跨行跨列
表格嵌套
数据的展示
HTML表格<table>
表格<tr>
行<td>
单元格
若本号内容有做得不到位的地方(比如:涉及版权或其他问题),请及时联系我们进行整改即可,会在第一时间进行处理。
请点赞!因为你们的赞同/鼓励是我写作的最大动力!
欢迎关注达达的简书!
这是一个有质量,有态度的博客