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

时间 2019-11-13

标签前端零基础入门页面结构 html 栏目 HTML 繁體版

原文原文链接

HTML页面结构层HTML
分如下方面学习：
HTML基础，
HTML表格，
HTML表单，
搭建网页结构css

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特色ui

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

HTML是一个文本文件
url

HTML基础语法3d

学习内容
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>

定义标签内能够有多个

对于每个

能够有多个

图像和超连接标签

图像标签
语法：

<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>单元格

若本号内容有作得不到位的地方（好比：涉及版权或其余问题），请及时联系咱们进行整改便可，会在第一时间进行处理。

请点赞！由于大家的赞同/鼓励是我写做的最大动力！

欢迎关注达达的简书！

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