前端零基础入门:页面结构层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属性
注解

注解: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>单元格



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


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

欢迎关注达达的简书!

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

原文地址:https://www.cnblogs.com/dashucoding/p/11832661.html

时间: 2025-01-09 18:43:46

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

前端零基础入门

前言 首先,任何技术实际都是从零基础开始的,不管是直接学习还是通过相近经历转行.所以不需要因零基础担心. 其次,一定要做好准备:一项技术的学习,意味着你各方面资源不同程度的消耗——时间.工具.资金,甚至融入相关交流圈子的准备.在这个准备过程中,最好是带有一个强硬的规划:“我要在一个月内达到能够实现XXX的水平”或者“我一定要在2周内把XXX项目完成”.如果没有这个规划,一般人都会越来越懒惰. 然后,选准一个或多个老师.这个老师,可以是一个页面,一本书,也可以是一个真实的人. 学习内容 主要有ht

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

搭建网页HTML结构 <div>标签 <span>标签 块级标签 和 行内标签 标签嵌套规则 <div>和<span> div+css <div>标签 是一个区块容器标记,<div></div>之间是一个容器,可以包含段落,表格,图片等各种HTML元素. <span>标签 没有实际意义,为了应用样式 块级标签:占据一行,换行 行内标签:在一行,不换行 <div>,<ul>,<ol&

零基础入门jQuery视频教程

零基础入门jQuery最新版开发.NET富客户端应用(选择器.DOM操作.事件和动画.Ajax应用.插件.Mobile)课程分类:.NET+Jquery适合人群:初级课时数量:35课时用到技术:javascript,ajax,jquery,handler涉及项目:各知识点的项目案例和名为JaneShop的品牌服装和包包的购物网站咨询qq:1840215592 零基础入门jQuery视频教程详细查看:http://www.ibeifeng.com/goods-425.html 零基础入门jQuer

零基础入门学习java,应该如何快速打好Java基础?

零基础入门学习java,应该如何快速打好Java基础?从大学到现在,我使用Java已经将近20年,日常也带实习生,还在公司内部做training,所以可以分享下我的经验,希望对你有用. 创一个小群,供大家学习交流聊天如果有对学java方面有什么疑惑问题的,或者有什么想说的想聊的大家可以一起交流学习一起进步呀.也希望大家对学java能够持之以恒java爱好群,如果你想要学好java最好加入一个组织,这样大家学习的话就比较方便,还能够共同交流和分享资料,给你推荐一个学习的组织:快乐学习java组织

2019刘老师教你用springboot2.x开发整合微信支付的线上教育平台带源码送springboot2.x零基础入门到高级实战教程

第一部分:springboot2.x零基础入门到高级实战教程一.零基础快速入门SpringBoot2.0 1.SpringBoot2.x课程全套介绍和高手系列知识点 简介:介绍SpringBoot2.x课程大纲章节 java基础,jdk环境,maven基础 2.SpringBoot2.x依赖环境和版本新特性说明 简介:讲解新版本依赖环境和springboot2新特性概述 3.快速创建SpringBoot2.x应用之手工创建web应用 简介:使用Maven手工创建SpringBoot2.x应用 4

从零基础入门JavaScript(1)

从零基础入门JavaScript(1) 1.1  Javascript的简史 1995年的时候   由网景公司开发的,当时的名字叫livescript    为了推广自己的livescript,搭了java顺风车,改名为javascript 与此同时,     微软因此在自身的浏览器里,也推出了自己的脚本语言 jscript 1997年时候,  由ECMA(欧洲计算机制造商协会)出面,推出了一套javascript的规范,Ecmascript ,规范提出js由三部分组成 JS的组成: ECMAS

功能测试转型必备课程 零基础入门Web自动化测试

第1章 课程介绍本章主要对整个课程简单介绍,并且把学习过程中会经常遇见的问题进行讲解. 第2章 手工测试转型自动化测试必备技能本章讲解从手工测试转型自动化测试必须掌握的一些知识,学会的技能点,以及从思想的转变到框架的了解,让初级学者对自动化测试不再迷茫,轻松学习起来. 第3章 从功能测试角度出发讲解自动化测试selenium基础本章通过功能测试分析到自动化测试的转变,从功能角度出发,讲解自动化selenium的基本知识,让你真的把浏览器操作起来,进一步的了解自动化测试. 第4章 HTML基础定位

鱼C《零基础入门学习Python》10-17节课时知识点总结

第10讲:列表:一个打了激素的数组 1. 列表都可以存放一些什么东西?  我们说 Python 的列表是一个打了激素的数组,如果把数组比喻成集装箱,那么 Python 的列表就是一个大仓库,Ta 可以存放我们已经学习过的任何数据类型. 2. 向列表增加元素有哪些方法?  三种方法想列表增加元素,分别是:append().extend() 和 insert().    3. append() 方法和 extend() 方法都是向列表的末尾增加元素,请问他们有什么区别?  append() 方法是将

Linux及Arm-Linux程序开发笔记(零基础入门篇)

Linux及Arm-Linux程序开发笔记(零基础入门篇)  作者:一点一滴的Beer http://beer.cnblogs.com/ 本文地址:http://www.cnblogs.com/beer/archive/2011/05/05/2037449.html 目录 一.Arm-Linux程序开发平台简要介绍... 3 1.1程序开发所需系统及开发语言... 3 1.2系统平台搭建方式... 4 二.Linux开发平台搭建... 5 2.1安装虚拟工作站... 5 2.2安装Linux虚拟