前端零基础入门:页面结构层HTML

时间:2023-03-09 01:05:43
前端零基础入门:页面结构层HTML

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元素

HTML属性

注解

注解:div标签为块级结构布局元素,因此将在css中结合盒模型进行讲解。

HTML基本结构

<html>
// 头部信息
<head>
<title>标题</title>
</head>
// 网页内容
<body>
网页主体内容
</body>
</html>

前端零基础入门:页面结构层HTML

前端零基础入门:页面结构层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等编码

前端零基础入门:页面结构层HTML

文字和段落标签

标题标签:

<h1></h1> ~ <h6></h6>

前端零基础入门:页面结构层HTML

段落标签:

<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>

定义标签内可以有多个



对于每一个
可以有多个

图像和超链接标签

图像标签

语法:

<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>

特殊符号:

属性,显示结果,描述

&lt; < 小于号或显示标记
&gt; > 大于号或显示标记
&reg; ® 已注册
@copy; © 版权
&trade; ™ 商标
&nbsp; 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>单元格


若本号内容有做得不到位的地方(比如:涉及版权或其他问题),请及时联系我们进行整改即可,会在第一时间进行处理。


请点赞!因为你们的赞同/鼓励是我写作的最大动力!

欢迎关注达达的简书!

这是一个有质量,有态度的博客

前端零基础入门:页面结构层HTML