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

2024-03-14 08:20

本文主要是介绍前端零基础入门:页面结构层HTML,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

HTML页面结构层HTML分以下方面学习:HTML基础,HTML表格,HTML表单,搭建网页结构

html基础

学习前端的第一门课程,为HTML基础,HTML标记语言,它是网页制作的第一步。

学习内容:HTML概念,了解HTML发展史,基础语法,常用标签(段落,图片,链接等)结合小例子

什么是HTMLHTML(Hypertext Markup Language)即超文本标记语言

html发展史1993(IETF)HTML1.01995(W3C)HTML2.01996(W3C)HTML4.01997(W3C)HTML4.0.12000(W3C)XHTML1.02001(w3c)xhtml1.1xhtml2.0?2004年(WHATWG)HTML5草案2008年(合并)HTML5正式版2014年HTML5定稿

html特点

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

HTML是一个文本文件file

HTML基础语法

学习内容HTML基本结构HTML标签HTML元素HTML属性注解

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

HTML基本结构

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

file

file

html标签属性

语法: <标签名 属性名1="“属性值”" 属性名2="“属性值”" ...>...

DOCTYPE文档类型声明

声明必须放在html文档第一行

声明不是HTML标签

<!DOCTYPE html>
<html>
<head><!-- 网页头部内容 --><title>标题</title></head><body><!-- 网页主体内容 --></body>
</html>

网页编码设置问题:当网页显示出现乱码时解决:在标签之间添加

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

注:utf-8,GB2312,gbk等编码

file

文字和段落标签

标题标签:

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

file

段落标签:

<p></p>

align对齐属性值:

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

换行标签:

<br/>

<p align="justify"></p>

列表标签

html标签html标记标签通常被称为HTML标签HTML标签是由尖括号包围的关键词HTML标签通常是成对出标签对中的第一个标签是开始标签,第二个标签是结束标签

什么是HTMLHTML是用来描述网页的一种语言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,小写罗马数字iI,大写罗马数字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,显示图像的Urlalt,文字,图像替代文本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>

特殊符号:属性,显示结果,描述

< < 小于号或显示标记
> > 大于号或显示标记
® ® 已注册
@copy; © 版权
™ ™ 商标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基本结构:语法: <标签名>例如:...

规范:1, <和>括起来2,成对出现,开始标签和结束标签,结束标签比开始标签多了一个/

HTML表格

基础表格

学习内容:了解表格应用场景表格基本结构如何操作表格表格属性表格跨行跨列表格嵌套

数据的展示

HTML表格

表格
单元格

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

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

欢迎关注达达的简书!

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

博客

这篇关于前端零基础入门:页面结构层HTML的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/807781

相关文章

HTML5 中的<button>标签用法和特征

《HTML5中的<button>标签用法和特征》在HTML5中,button标签用于定义一个可点击的按钮,它是创建交互式网页的重要元素之一,本文将深入解析HTML5中的button标签,详细介绍其属... 目录引言<button> 标签的基本用法<button> 标签的属性typevaluedisabled

HTML5实现的移动端购物车自动结算功能示例代码

《HTML5实现的移动端购物车自动结算功能示例代码》本文介绍HTML5实现移动端购物车自动结算,通过WebStorage、事件监听、DOM操作等技术,确保实时更新与数据同步,优化性能及无障碍性,提升用... 目录1. 移动端购物车自动结算概述2. 数据存储与状态保存机制2.1 浏览器端的数据存储方式2.1.

基于 HTML5 Canvas 实现图片旋转与下载功能(完整代码展示)

《基于HTML5Canvas实现图片旋转与下载功能(完整代码展示)》本文将深入剖析一段基于HTML5Canvas的代码,该代码实现了图片的旋转(90度和180度)以及旋转后图片的下载... 目录一、引言二、html 结构分析三、css 样式分析四、JavaScript 功能实现一、引言在 Web 开发中,

MySQL DQL从入门到精通

《MySQLDQL从入门到精通》通过DQL,我们可以从数据库中检索出所需的数据,进行各种复杂的数据分析和处理,本文将深入探讨MySQLDQL的各个方面,帮助你全面掌握这一重要技能,感兴趣的朋友跟随小... 目录一、DQL 基础:SELECT 语句入门二、数据过滤:WHERE 子句的使用三、结果排序:ORDE

CSS place-items: center解析与用法详解

《CSSplace-items:center解析与用法详解》place-items:center;是一个强大的CSS简写属性,用于同时控制网格(Grid)和弹性盒(Flexbox)... place-items: center; 是一个强大的 css 简写属性,用于同时控制 网格(Grid) 和 弹性盒(F

CSS实现元素撑满剩余空间的五种方法

《CSS实现元素撑满剩余空间的五种方法》在日常开发中,我们经常需要让某个元素占据容器的剩余空间,本文将介绍5种不同的方法来实现这个需求,并分析各种方法的优缺点,感兴趣的朋友一起看看吧... css实现元素撑满剩余空间的5种方法 在日常开发中,我们经常需要让某个元素占据容器的剩余空间。这是一个常见的布局需求

CSS Anchor Positioning重新定义锚点定位的时代来临(最新推荐)

《CSSAnchorPositioning重新定义锚点定位的时代来临(最新推荐)》CSSAnchorPositioning是一项仍在草案中的新特性,由Chrome125开始提供原生支持需... 目录 css Anchor Positioning:重新定义「锚定定位」的时代来了! 什么是 Anchor Pos

CSS中的Static、Relative、Absolute、Fixed、Sticky的应用与详细对比

《CSS中的Static、Relative、Absolute、Fixed、Sticky的应用与详细对比》CSS中的position属性用于控制元素的定位方式,不同的定位方式会影响元素在页面中的布... css 中的 position 属性用于控制元素的定位方式,不同的定位方式会影响元素在页面中的布局和层叠关

HTML5 getUserMedia API网页录音实现指南示例小结

《HTML5getUserMediaAPI网页录音实现指南示例小结》本教程将指导你如何利用这一API,结合WebAudioAPI,实现网页录音功能,从获取音频流到处理和保存录音,整个过程将逐步... 目录1. html5 getUserMedia API简介1.1 API概念与历史1.2 功能与优势1.3

全面解析HTML5中Checkbox标签

《全面解析HTML5中Checkbox标签》Checkbox是HTML5中非常重要的表单元素之一,通过合理使用其属性和样式自定义方法,可以为用户提供丰富多样的交互体验,这篇文章给大家介绍HTML5中C... 在html5中,Checkbox(复选框)是一种常用的表单元素,允许用户在一组选项中选择多个项目。本