前端入门01--HTML详解

Younglin666

于 2020-09-19 23:47:17 发布

阅读量599

点赞数

本文链接：https://blog.csdn.net/IBM06602/article/details/108687151

版权

这篇博客详细介绍了HTML的基础知识，包括HTML的起源、优势、W3C标准，以及常用的IDE和快捷键。接着，文章深入讲解了HTML的基本结构、网页标签、图像、超链接、网页布局、表单元素、验证等核心概念，是初学者掌握HTML的实用指南。

摘要由CSDN通过智能技术生成

html5+css3+JavaScript

结构+表现+行为（交互）

目录 CONTENTS

初识HTML
网页基本标签
图像，超链接，网页布局
列表，表格，媒体元素
表单及表单应用
表单初级验证

HTML01 ：初识HTML

什么是HTML

在这里插入图片描述

HTML发展史

目前流行（2019.06.15）：HTML5+CSS3

在这里插入图片描述

HTML的优势

在这里插入图片描述

W3C标准

org：开源

标准包括（面试提问）

DOM：文档

ECMAScript：JavaScript遵循的标准

在这里插入图片描述

常见IDE（工具及快捷键）

在这里插入图片描述

这里我们选择IDEA工具：

创建一个网页：

new project–>java–>一直下一步
删掉src文件
新建一个html文件夹
新建我的第一个网页.html

在这里插入图片描述

如何修改浏览器

File–>Settings–>Web Browsers
- 修改对应的浏览器路径
- 如C:\Program Files (x86)\Tencent\QQBrowser\QQBrowser.exe
- 点击Apply–>ok

在这里插入图片描述

常用快捷键

注释 ctrl+/
复制到下一行 ctrl+d
快速生成标签 xx+Tab

HTML02 ：网页基本信息

HTML基本结构

在这里插入图片描述

网页基本信息

<html lang="en">
向搜索引擎表示该页面是[html语言](https://www.baidu.com/s?wd=html语言&tn=SE_PcZhidaonwhc_ngpagmjz&rsv_dl=gh_pc_zhidao)，并且语言为英文网站，其"lang"的意思就是“language”，语言的意思，而“en”即表示english

你的页面如果是中文页面，可将其改为
<html lang="zh">

zh即表示中文

在这里插入图片描述

<!-- DOCTYPE:告诉浏览器，我们要使用什么规范  -->
<!DOCTYPE html>

<html lang="en">
<!-- head标签代表网页的头部 -->
<head>
    <!--meta描述性标签，它用来描述我们网站的一些信息-->
    <!--meta一般用来做SEO-->
    <meta charset="UTF-8">
    <meta name="keyworlds" content="小锅学Java，西部开源">
    <meta name="description" content="在梦想面前，一切都是借口">

    <!-- title网页标题 -->
    <title>我的第一个网页</title>
</head>

<!-- body标签代表网页的主体 -->
<body>
    <h3 style="color: #ff3c2b">骚年你渴望力量吗？</h3>
</body>
</html>

HTML03 : 网页基本标签

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>基本标签学习</title>
</head>
<body>
<!--标题标签-->
<h1>一级标签</h1>
<h2>二级标签</h2>
<h3>三级标签</h3>
<h4>四级标签</h4>
<h5>五级标签</h5>
<h6>六级标签</h6>

<!--段落标签-->
<p>人生最美是黄昏，淡淡生活，慢慢变老。</p>
<p>放下一天的忙碌，忘记一生的疲惫，舍去尘世的烦恼。</p>
<p>爱恨随缘，心静如水，生死无畏，得失坦然。</p>
<p>不负光阴，不负爱情，不负心灵，不负今生。</p>

<!--换行标签-->
一抹夕阳，恰如人生五六十岁的样子，看惯了人生起起落落，知天命，但不颓废；没有波澜，但不懈怠生活；安安静静，但内心低吟浅唱。
</br>
被生活抹去了年少轻狂的棱角，凡事不做作，也不会委屈了自己，恰如渐行渐远的阳光。“走远”，是一种生命的厚度，如黄昏的云彩，叠加了阳光的“红”，才更加绚丽多姿，来去从容，悠悠而过，得失珍惜，失之坦然。
</br>
“任尔东南西北风，我自岿然不动”，几十年的路，不过须臾之间，看过的，听过的，想过的，做过的，都记得清清楚楚，但想起来的时候，都是天边的一抹夕阳，有阳光的金色之美，但没有了烈日炎炎的焦躁不安。
</br>

<!--水平线标签-->
<hr>

<!--字体样式标签-->
粗体： <strong>I Love You</strong>
</br>
斜体： <em>I Love You</em>
</br>

<!--特殊符号-->
空格1：唐&nbsp;&nbsp;&nbsp;&nbsp;李白
</br>
空格2：唐&emsp;李白(相当于4个nbsp)
</br>
大于：&gt;
</br>
小于：&lt;
</br>
&copy;版权所有林小锅

</body>
</html>

HTML04 : 图像标签

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>图像标签学习</title>
</head>
<body>
<!--img学习
src：图片地址（必填）
    相对地址（推荐使用），绝对路径
    ../     --上一级目录

alt：图片文字（必填
-->
<img src="../resources/image/linxiaoguo.jpg" alt="路飞" title="悬停文字" height="643" width="960">
</body>
</html>

HTML05 : 超链接标签及应用

在这里插入图片描述

使用QQ推广工具
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>图像标签学习

最低0.47元/天解锁文章

Younglin666

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
前端入门01--HTML详解

html5+css3+JavaScript结构+表现+行为（交互）目录 CONTENTS初识HTML网页基本标签图像，超链接，网页布局列表，表格，媒体元素表单及表单应用表单初级验证HTML01 ：初识HTML什么是HTMLHTML发展史目前流行（2019.06.15）：HTML5+CSS3HTML的优势W3C标准org：开源标准包括（面试提问）DOM：文档ECMAScript：JavaScript遵循的标准常见IDE（工具及快捷键）这里我们选择IDEA工
复制链接

扫一扫