第一次网页前端培训笔记（Html基础语法和常用标签）

一.什么是HTML
HTML 是用来描述网页的一种语言。HTML 是一种在 Web 上使用的通用标记语言。HTML 允许你格式化文本，添加图片，创建链接、输入表单、框架和表格等等，并可将之存为文本文件，浏览器即可读取和显示。

HTML 指的是超文本标记语言: HyperText Markup Language
HTML 不是一种编程语言，而是一种标记语言
标记语言是一套标记标签 (markup tag)
HTML 使用标记标签来描述网页
HTML 文档包含了HTML 标签及文本内容
HTML文档也叫做 web 页面

二.安装编译器

HbuilderX

下载地址链接：HBuilderX-高效极客技巧 (dcloud.io)

三.基础操作和了解整体结构

新建普通项目，一般使用基本HTML项目（里面都已经添加好部件），点击创建，如下图所示

创建传建好之后便是如下图所示：

四.HTML学习（基础语法和常用标签）

首先推荐大家一个视频学习的网站（适合新手小白）：【优极限】 HTML+CSS+JavaScript+jQuery前端必学教程，小白教学，前端基础全套完成版_哔哩哔哩_bilibili

然后推荐大家一个网站去学习（里面有详细的语法讲解）：HTML 教程 | 菜鸟教程 (runoob.com)

1.1.单标签

单标签，不设置属性值。如：

<br\>,<hr\>

1.2.单标签属性

单标签（也叫空元素），设置属性值。如：

<hr width="800"\>

1.3.双标签

双标签，不设置属性值，如：

<title>...</title>

1.4.双标签属性

双标签，设置属性值。如：

<body bgcolor="red">...</body><font size="7">...</font>

2.1.标题和水平线

<!DOCTYPE html>
<html><head><meta charset="utf-8" /><title></title></head><body><h1>标题1</h1><h2>标题2</h2><h3>标题3</h3><h4>标题4</h4><h5>标题5</h5><h6>标题6</h6><!--标题h1-h6字数大小逐渐减小块级元素，自动换行--><hr><!--换行常用属性：颜色粗细长度--></body>
</html>

效果如图：

2.2.段落与换行

<p>虎头虎脑</p><p>不会嘴瓢</p><!--标题标签p块级元素，自动换行-->虎年<br>大吉<!--换行标签br-->

效果如图：

2.3.列表（有序列表和无序列表）

<ul><li>刘德华</li><li>张学友</li><li>郭富城</li></ul><ol><li>刘德华</li><li>张学友</li><li>郭富城</li></ol><!--有序列表<ol></ol>无需列表<ul></ul>type更换类型-->

效果如图：

2.4.div和span

        <div>这是一个div？</div>yes<!--块级元素默认占全部的宽度，有多少内容占多少高度可以设置div的高和宽通过align设置内容的对齐方式--><span>这是一个span？</span>yes

效果如图：

2.5.格式化标签

<font color="aqua" size="7" face="楷体">你好</font><pre>hello world</pre><p><b>梅克尔</b><i>属实</i><u>永远</u><del>的神</del></p>H<sub>2</sub>O<hr>2<sup>3</sup>=8<!--格式化标签font标签color 颜色size 字体大小face 字体风格pre预格式化标签，保留空格和换行b 加粗i 倾斜u 下划线del 中划线sub 下标sup 上标-->

效果如图

3.1.a标签

<a href="http://www.baidu.com">百度</a><!--a标签超链接性标签常用属性：href：需要跳转的地址（必须属性）target：窗口打开的方式_self：当前窗口（默认）_blank：在空白窗口作为锚点（回到顶部）-->

效果如图：

3.2.图片

<img src="img/PC_880906d2a4ad95f5fafb2e540c5cdad7.png" width="200" height="100" title="看赛事上百度"/><!--img标签:向网页嵌入一张图片常用属性：src；需要引入的图片的的地址（必须属性）alt：当图片破损或不存在时，显示文本的内容title：当鼠标悬停在图片上时显示的内容width：图片的长度height：图片的高度border：图片边框-->

效果如图：

3.3.表格

<table width="400px" align="center" border="1" style="border-collapse: collapse;"><tr><th>编号</th><th>姓名</th><th>年龄</th><tr align="center"><td>1</td><td>刘德华</td><td>48</td><tr align="center"><td>1</td><td>张学友</td><td>48</td><tr align="center"><td>1</td><td>郭富城</td><td>48</td><!--表格标签table 表格tr 行td 标准单元格th 表头（字体居中，加粗效果）table的属性width 长度border 边框align 对齐方式style="border-collapse: collapse;合并表格的边框tr的属性align 行内容的对齐方式-->

效果如图：

第一次网页前端培训笔记（Html基础语法和常用标签）相关推荐

梅科尔工作室-第一次网页前端培训笔记（HTML常用标签）
学习网址:[优极限] HTML+CSS+JavaScript+jQuery前端必学教程,小白教学,前端基础全套完成版_哔哩哔哩_bilibili 1.安装编译器 vs hBuilder X等等(本人主 ...
第一次网页前端培训笔记
一.编辑软件 HbuilderX HBuilderX 自述文件二.html的第一次学习 1.学习链接:[优极限] HTML+CSS+JavaScript+jQuery前端必学教程,小白教学,前端基础 ...
第五次网页前端培训笔记（js1）
1.js的基本使用 JavaScript(简称"JS") 是一种具有函数优先的轻量级,解释型或即时编译型的编程语言.虽然它是作为开发Web页面的脚本语言而出名,但是它也被用到了很多 ...
第七次网页前端培训笔记
B站视频网址:(本次仅涉及P24-P26)[优极限] HTML+CSS+JavaScript+jQuery前端必学教程,小白教学,前端基础全套完成版_哔哩哔哩_bilibili 菜鸟教程网 ...
第二次网页前端培训笔记
1.学习网址 hbuilder第二次培训笔记 - 幕布 2.基础操作 3.html基本框架 <!DOCTYPE html> <html> <head> ...
网页前端培训笔记（HTML标签）
学习网址:[优极限] HTML+CSS+JavaScript+jQuery前端必学教程,小白教学,前端基础全套完成版_哔哩哔哩_bilibili HTML 教程 | 菜鸟教程 (runoob.com) ...
第五次网页前端培训（JS基础）
1:JS基本用法行内JS:写在标签内部的js代码:内部JS:定义在script标签内部的js代码,script标签可以放在head中或body中(建议放在body标签最后):外部JS:单独的js文件 ...
第七次网页前端培训笔记（JS对象和事件）
一.JavaScript对象 JavaScript 中的所有事物都是对象:字符串.数值.数组.函数 JavaScript 允许自定义对象. 1.所有事物都是对象 JavaScript 提供多个内建对象 ...
第二次网页前端培训笔记（html表单）
学习网址:[优极限] HTML+CSS+JavaScript+jQuery前端必学教程,小白教学,前端基础全套完成版_哔哩哔哩_bilibili 1. 表单标签和表单元素 (1)表单标签:form用于 ...

第一次网页前端培训笔记（Html基础语法和常用标签）

第一次网页前端培训笔记（Html基础语法和常用标签）相关推荐

最新文章

热门文章