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基本结构

  1. <html>
  2. // 头部信息
  3. <head>
  4.  <title>标题</title>
  5. </head>
  6. // 网页内容
  7. <body>
  8.  网页主体内容
  9. </body>
  10. </html>

html标签属性

语法：

<标签名 属性名1=“属性值” 属性名2=“属性值” ...> ... </标签名>

DOCTYPE文档类型声明

<!DOCTYPE> 声明必须放在html文档第一行

<!DOCTYPE> 声明不是HTML标签

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.  <!-- 网页头部内容 -->
  5.  <title>标题</title>
  6.  </head>
  7.  <body>
  8.  <!-- 网页主体内容 -->
  9.  </body>
  10. </html>

网页编码设置

问题：

当网页显示出现乱码时

解决：

在<head></head>标签之间添加

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

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

文字和段落标签

标题标签：

  1. <h1></h1> ~ <h6></h6>

段落标签:

  1. <p></p>

align对齐属性值：

  1. 值，描述
  2. left 左对齐内容
  3. right 右对齐内容
  4. center 居中对齐内容
  5. justify 对行进伸展，这样每行都可以有相等的长度。

换行标签：

  1. <br/>
  1. <p align="justify"></p>

列表标签

html标签

html标记标签通常被称为HTML标签

HTML标签是由尖括号包围的关键词

HTML标签通常是成对出

标签对中的第一个标签是开始标签，第二个标签是结束标签

什么是HTML

HTML是用来描述网页的一种语言

HTML超文本标记

无序列表

  1. <ul>
  2.  <li>1</li>
  3.  <li>2</li>
  4. </ul>

type属性值：

值，描述

disc：圆点

square：正方形

circle：空心圆

有序列表

语法：

  1. <ol>
  2.  <li>1</li>
  3.  <li>2</li>
  4. </ol>

type属性值：

值，描述：

1，数字1,2，。。。

a，小写字母a，b。。。

A，大写字母A，B。。。

i，小写罗马数字i

I，大写罗马数字I

列表标签

定义列表：

  1. <dl>
  2.  <dt>定义列表项</dt>
  3.   <dd>1</dd>
  4. 	<dd>2</dd>
  6.  <dt>列表</dt>
  7.   <dd>1</dd>
  8. 	<dd>2</dd>
  9. </dl>

定义标签内可以有多个



对于每一个
可以有多个

图像和超链接标签

图像标签

语法：

  1. <img src=" " alt=" " ...>

img属性：

属性，值，描述

src，url，显示图像的Url

alt，文字，图像替代文本

height，数值和百分比，图像的高

width，数值和百分比，图像的宽

HTML路径：

相对路径

绝对路径

超链接标签

语法：

  1. <a href=" ">内容</a>

href:链接地址，可以是内部链接或外部链接

超链接（空链接—target-title属性）

超链接标签

属性，描述

href:链接地址

target:链接的目标窗口

_self, _blank, _top, _parent

title链接提示文字

name链接命令

修饰标签和特殊符号

  1. 文字斜体：<i></i>，<em></em>
  3. 加粗：<b></b>，<strong></strong>
  5. 下标：<sub>
  7. 上标：<sup>

特殊符号：

属性，显示结果，描述

  1. &lt; < 小于号或显示标记
  2. &gt; > 大于号或显示标记
  3. &reg; ® 已注册
  4. @copy; © 版权
  5. &trade; ™ 商标
  6. &nbsp; Space 不断行的空白

列表标签应用场景

锚链接（同一页面）

超链接标签

定义锚：

  1. <a href="#锚名1">目录1</a>
  2. <a href="#锚名2">目录2</a>
  3. <a href="..." name="锚名1" >内容</a>
  4. xxxx
  5. <a href="..." name="锚名2">内容</a>
  6. xxxx

在不同页面如何定义锚点

定义锚（不同页面）：

  1. 网页1：<a href="网页名称#锚名">...</a>
  2. 网页2：<a name="锚名">...</a>

html基本结构：

语法：<标签名></标签名>

例如：<html>...</html>

规范：

1,<和>括起来

2,成对出现，开始标签和结束标签，结束标签比开始标签多了一个/

HTML表格

基础表格

学习内容：

了解表格应用场景

表格基本结构

如何操作表格

表格属性

表格跨行跨列

表格嵌套

数据的展示

HTML表格

<table>表格

<tr>行

<td>单元格

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

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

欢迎关注达达的简书！

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

前端零基础入门：页面结构层HTML的更多相关文章

  1. web前端零基础入门学习！前端真不难！

    现在互联网发展迅速,前端也成了很重要的岗位之一,许多人都往前端靠拢,可又无能为力,不知所措,首先我们说为什么在编程里,大家都倾向于往前端靠呢?原因很简单,那就是,在程序员的世界里,前端开发是最最简单的 ...

  2. 前端零基础入门：页面结构层HTML（3）

    搭建网页HTML结构 标签 标签 块级标签 和 行内标签 标签嵌套规则 和 div css 标签是一个区块容器标记, 之间是一个容器,可以包含段落,表格,图片等各种HTML元素. 标签没有实际意义,为 ...

  3. 前端零基础入门：页面结构层HTML（2）

    学习笔记 若本号内容有做得不到位的地方(比如:涉及版权或其他问题),请及时联系我们进行整改即可,会在第一时间进行处理. 请点赞!因为你们的赞同/鼓励是我写作的最大动力! 欢迎关注达达的简书! 这是一个 ...

  4. 2019年最新超级有趣好玩的html+css网页布局课程,前端入门基础,html5+css3零基础入门课程-黑马程序员pink老师精心录制

    大家好,我是黑马程序员pink老师!! 本次视频是前端零基础入门的课程,pink老师采取有趣好玩讲法,带你快乐的学习枯燥的html+css知识,学完之后让你能快速布局pc端页面.代码也可以讲的好玩有趣 ...

  5. 2020年数据库概念与MySQL的安装与配置-从零基础入门MySQL-mysql8版本

    作者 | Jeskson 来源 | 达达前端小酒馆 从零基础入门MySQL数据库基础课 数据的概念,简介,安装与配置,Windows平台下MySQL的安装与配置. 数据库的概念:数据库是一个用来存放数 ...

  6. 从零基础入门JavaScript（1）

    从零基础入门JavaScript(1) 1.1  Javascript的简史 1995年的时候   由网景公司开发的,当时的名字叫livescript    为了推广自己的livescript,搭了j ...

  7. 【JAVA零基础入门系列】Day11 Java中的类和对象

    今天要说的是Java中两个非常重要的概念--类和对象. 什么是类,什么又是对象呢?类是对特定集合的概括描述,比如,人,这个类,外观特征上,有名字,有年龄,能说话,能吃饭等等,这是我们作为人类的相同特征 ...

  8. 零基础入门微信小程序开发

    注:本文来源于:<零基础入门微信小程序开发> 课程介绍 本达人课是一个系列入门教程,目标是从 0 开始带领读者上手实战,课程以微信小程序的核心概念作为主线,介绍配置文件.页面样式文件.Ja ...

  9. [转]小D课堂 - 零基础入门SpringBoot2.X到实战_汇总

    原文地址:https://www.cnblogs.com/wangjunwei/p/11392825.html 第1节零基础快速入门SpringBoot2.0 小D课堂 - 零基础入门SpringBo ...

随机推荐

  1. DES加密 java与.net可以相互加密解密两种方法

    DES加密 java与.net可以相互加密解密两种方法 https://www.cnblogs.com/DrWang/archive/2011/03/30/2000124.html sun.misc. ...

  2. C# LINQ干掉for循环

    public void OldSum() { ; ; i < ; i++) { sum0 += i; } Assert.AreEqual(, sum0); } public void NewSu ...

  3. asp.net core MVC 过滤器之ExceptionFilter过滤器(一)

    简介 异常过滤器,顾名思义,就是当程序发生异常时所使用的过滤器.用于在系统出现未捕获异常时的处理. 实现一个自定义异常过滤器 自定义一个异常过滤器需要实现IExceptionFilter接口 publ ...

  4. uniapp之w-picker使用采坑

    1. uniapp之w-picker使用采坑 1.1. 前言 由于我是先在index页面集合了这个组件,发现该文件内容实在太多了,不好维护,所以打算把内容一个个抽成组件,在抽w-picker时,遇到了 ...

  5. this、对象原型

    this和对象原型 第一章 关于this 1.1 为什么要用this this 提供了一种更优雅的方式来隐式"传递"一个对象引用,因此可以将 API 设计 得更加简洁并且易于复用. ...

  6. vue学习整理

    1.webpack+vue自定义路径别名 vue-cli 用的是webpack,也可以使用webpack自定义别名这个功能,自定义别名这个功能当你在多层文件夹嵌套的时候不必一层一层找路径,直接使用自定 ...

  7. Java 数据类型 & 变量与常量 & 注释

    一.数据类型 1.数据类型分类 Java 的数据类型分为两大类: 基本数据类型:整数.浮点数.字符型.布尔型 引用数据类型(对象类型):类.数组,字符串.接口等. 2.基本数据类型 四类八种基本数据类 ...

  8. 总结HTML5新增的标签及功能

    https://my.oschina.net/chengkuan/blog/422306 标记意义及用法分析/示例 属性/属性值/描述 <article> 定义独立的内容,如论坛帖子.报纸 ...

  9. Android-----WebView加载HTML界面布局并进行数据交互

    注:在做例子之前要先做好准备工作,在app下新建一个名为:assets的目录(不懂怎么创建的可参考:https://blog.csdn.net/Biegral/article/details/4717 ...

  10. 4 Android可执行文件

    APK是Android Package缩写,使用zip解压文件即可打开.每个APK文件中都包含一个class.dex文件(odex过的APK文件除外).class.dex文件就是Android系统Da ...