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>
单元格
若本号内容有做得不到位的地方(比如:涉及版权或其他问题),请及时联系我们进行整改即可,会在第一时间进行处理。
请点赞!因为你们的赞同/鼓励是我写作的最大动力!
欢迎关注达达的简书!
这是一个有质量,有态度的博客