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

相关文章

Vue3 的 shallowRef 和 shallowReactive:优化性能

大家对 Vue3 的 ref 和 reactive 都很熟悉,那么对 shallowRef 和 shallowReactive 是否了解呢? 在编程和数据结构中,“shallow”(浅层)通常指对数据结构的最外层进行操作,而不递归地处理其内部或嵌套的数据。这种处理方式关注的是数据结构的第一层属性或元素,而忽略更深层次的嵌套内容。 1. 浅层与深层的对比 1.1 浅层(Shallow) 定义

Spring Security 从入门到进阶系列教程

Spring Security 入门系列 《保护 Web 应用的安全》 《Spring-Security-入门(一):登录与退出》 《Spring-Security-入门(二):基于数据库验证》 《Spring-Security-入门(三):密码加密》 《Spring-Security-入门(四):自定义-Filter》 《Spring-Security-入门(五):在 Sprin

这15个Vue指令,让你的项目开发爽到爆

1. V-Hotkey 仓库地址: github.com/Dafrok/v-ho… Demo: 戳这里 https://dafrok.github.io/v-hotkey 安装: npm install --save v-hotkey 这个指令可以给组件绑定一个或多个快捷键。你想要通过按下 Escape 键后隐藏某个组件,按住 Control 和回车键再显示它吗?小菜一碟: <template

【 html+css 绚丽Loading 】000046 三才归元阵

前言:哈喽,大家好,今天给大家分享html+css 绚丽Loading!并提供具体代码帮助大家深入理解,彻底掌握!创作不易,如果能帮助到大家或者给大家一些灵感和启发,欢迎收藏+关注哦 💕 目录 📚一、效果📚二、信息💡1.简介:💡2.外观描述:💡3.使用方式:💡4.战斗方式:💡5.提升:💡6.传说: 📚三、源代码,上代码,可以直接复制使用🎥效果🗂️目录✍️

【前端学习】AntV G6-08 深入图形与图形分组、自定义节点、节点动画(下)

【课程链接】 AntV G6:深入图形与图形分组、自定义节点、节点动画(下)_哔哩哔哩_bilibili 本章十吾老师讲解了一个复杂的自定义节点中,应该怎样去计算和绘制图形,如何给一个图形制作不间断的动画,以及在鼠标事件之后产生动画。(有点难,需要好好理解) <!DOCTYPE html><html><head><meta charset="UTF-8"><title>06

如何在页面调用utility bar并传递参数至lwc组件

1.在app的utility item中添加lwc组件: 2.调用utility bar api的方式有两种: 方法一,通过lwc调用: import {LightningElement,api ,wire } from 'lwc';import { publish, MessageContext } from 'lightning/messageService';import Ca

零基础学习Redis(10) -- zset类型命令使用

zset是有序集合,内部除了存储元素外,还会存储一个score,存储在zset中的元素会按照score的大小升序排列,不同元素的score可以重复,score相同的元素会按照元素的字典序排列。 1. zset常用命令 1.1 zadd  zadd key [NX | XX] [GT | LT]   [CH] [INCR] score member [score member ...]

数论入门整理(updating)

一、gcd lcm 基础中的基础,一般用来处理计算第一步什么的,分数化简之类。 LL gcd(LL a, LL b) { return b ? gcd(b, a % b) : a; } <pre name="code" class="cpp">LL lcm(LL a, LL b){LL c = gcd(a, b);return a / c * b;} 例题:

Java 创建图形用户界面(GUI)入门指南(Swing库 JFrame 类)概述

概述 基本概念 Java Swing 的架构 Java Swing 是一个为 Java 设计的 GUI 工具包,是 JAVA 基础类的一部分,基于 Java AWT 构建,提供了一系列轻量级、可定制的图形用户界面(GUI)组件。 与 AWT 相比,Swing 提供了许多比 AWT 更好的屏幕显示元素,更加灵活和可定制,具有更好的跨平台性能。 组件和容器 Java Swing 提供了许多

【IPV6从入门到起飞】5-1 IPV6+Home Assistant(搭建基本环境)

【IPV6从入门到起飞】5-1 IPV6+Home Assistant #搭建基本环境 1 背景2 docker下载 hass3 创建容器4 浏览器访问 hass5 手机APP远程访问hass6 更多玩法 1 背景 既然电脑可以IPV6入站,手机流量可以访问IPV6网络的服务,为什么不在电脑搭建Home Assistant(hass),来控制你的设备呢?@智能家居 @万物互联