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>

定义标签内可以有多个



对于每一个
可以有多个

图像和超链接标签

图像标签

语法:

<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的更多相关文章

  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. 封装:简要介绍自定义开发基于WPF的MVC框架

    原文:封装:简要介绍自定义开发基于WPF的MVC框架 一.目的:在使用Asp.net Core时,深感MVC框架作为页面跳转数据处理的方便,但WPF中似乎没有现成的MVC框架,由此自定义开发一套MVC ...

  2. 一.B/S架构和C/S架构

    1.B/S架构 Browser-Server,  浏览器和服务器架构.包含客户端浏览器.web应用服务器.数据库服务器的软件系统.用户只需要一个浏览器就可以访问服务.系统更新的时候,只需要更新服务端, ...

  3. vue--设置cookie

    Vue-CLI项目-vue-cookie与vue-cookies处理cookie vue-cookie 一.模块的安装 npm install vue-cookie --save #--save可以不 ...

  4. 给基于对话框的MFC程序添加状态栏并实时显示时间

    转载自丝雪儿 1.首先在string table 里添加两个字串,ID分别为IDS_INDICATOR_MESSAGE and IDS_INDICATOR_TIME 2.在你的 dlg.h 类里面加个 ...

  5. 45、导航钩子函数中使用next()和next('\指定路径')的区别:

    当在router.beforeEach((to, from, next) 钩子函数中使用: 1.使用next()时,直接跳转到下一页,没有再执行导航钩子函数 2.使用next('指定路径')跳转到指定 ...

  6. jsonserver的安装及启动

    JsonServer 主要的作用就是搭建本地的数据接口,创建json文件,便于调试调用 是一个 Node 模块,运行 Express 服务器,可以指定一个 json 文件作为 api 的数据源 官网: ...

  7. 线下AWD平台搭建以及一些相关问题解决

    线下AWD平台搭建以及一些相关问题解决 一.前言 文章首发于tools,因为发现了一些新问题但是没法改,所以在博客进行补充. 因为很多人可能没有机会参加线下的AWD比赛,导致缺乏这方面经验,比如我参加 ...

  8. android中activity和service是否在同一个进程中

    分两种情况,如果是本地线程,肯定是同一个进程中的, 如果是远程服务,那么activity和service将在不同的进程中的 ----- 非远程服务,和Activity属于同一个进程和线程:而远程服务和 ...

  9. Caused by: com.mysql.jdbc.exceptions.jdbc4.MySQLIntegrityConstraintViolationException: Column 'org_mer_id' in where clause is ambiguous

    ### Error querying database. Cause: com.mysql.jdbc.exceptions.jdbc4.MySQLIntegrityConstraintViolatio ...

  10. python应用-彩票随机码的输出

    """ 双色球-6个红色球(1-33)和一个蓝色球(1-16) """ from random import randint def sel ...