HTML入门

已于 2022-09-14 22:04:55 修改
阅读量341 收藏 1
点赞数 4
分类专栏： Wed前端 文章标签： html vscode html5 web development
于 2021-09-14 20:39:33 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_45770232/article/details/120295555
版权

HTML

本笔记属个人笔记，总结于 b站 黑马程序员 pink老师 前端入门教程

一遍过的，些许瑕疵，还请读者仔细分辨。

文章目录

1. 语法规范

1.1基本语法概述

  1. <>
  2. 一般成对出现（<br />不需要成对）

1.2 标签关系

  1. 包含关系
  2. 并列关系

2. 基本结构标签

2.1 第一个HTML网页

<html>
<html>
    <head>
	<title>第一个页面</title>
    </head>
    <body>
 	键盘敲烂，工资过万
    </body>
</html>

文件以 .html 结尾

2.2 其他标签

  1. 声明文章类型

    <!DOCTYPE html>

  2. 标明编码语言（简体中文书写的普通话/国语）

    <html lang = 'zh-cmn-Hans'>

  3. 规定使用的字符编码类型

    <meta charset='UTF-8'>

3. 网页开发工具

VS Code，HBuilder……

3.1 VS Code 使用

  • 新建文件，.html结尾

  • 字体放大 ctrl + +

  • 输入标签，Tab自动补全

  • 输入 ! 自动补全基本框架

3.2 VS Code 插件

推荐安装的插件：

插件作用
Chinese(Simplified) Language Pack for VS Code汉化
Open in Browser右击选择浏览器打开html文件
JS-CSS-HTML Formatter每次保存自动格式化js css 和html 代码
Auto Rename Tag自动重命名配对的HTML/XML标签
CSS Peek追踪至样式

4. HTML 常用标签

4.1 常用标签

标签作用
<h1>-<h6>各级标题
<p></p>段落

break前两字母		换行

4.2 文本格式化标签

标签作用
<strong></strong>加粗
<em></em>倾斜
<del></del>删除线
<ins></ins>下划线
<pre></pre>不会吞掉空格和换行

4.3 盒子标签

标签说明
<div></div>用来布局，一行只能放一个div（大盒子）
<span></span>用来布局，一行能放多个span（小盒子）

4.4 图像标签

  1. 图像标签

<img src="图片的路径" alt="" title="" />

img标签其他属性说明
alt图片显示不出来时的提示文本
title鼠标移动到图片上显示的文本
width宽度(一般修改一个，另一个 就会等比例缩小)
heigth高度
border设置图像的边框粗细

4.5 路径

  1. 相对路径
类型写法
同级路径（同一个目录下）img.jpg
下一级路径images/img.jpg
上一级路径（目标在另一个同级目录里）…/img.jpg
  1. 绝对路径
类型写法
本地绝对地址C:\Users\Desketop\img.jpg
网络绝对地址https://www.baidu.com/images/logo.png

4.6 链接标签

  1. 语法格式

<a href="跳转目标" target="弹出方式">文本或图像</a>

属性作用
href指定链接目标的URL地址
target指定链接页面打开的方式，_self为默认值，_blank为在新窗口中打开的方式
  1. 链接分类
类型写法（主要看href）
外部链接<a href="www.baidu.com" target="_blank">百度</a>
内部链接<a href="本地的自定义HTML文件" target="_blank">内部链接</a>
空链接<a href="#" target="_blank">空链接</a>
下载链接<a href="img.zip" target="_blank">下载文件</a>
网页元素的链接<a href="www.baidu.com" target="_blank"><img src="img.jpg" alt="图片显示失败" title="点击跳转" /></a>
锚点链接1. <h3 id="two">演艺经历</h3>
2. <a href="#two">点击跳转到演艺经历</a>

4.7 注释标签

<!--注释--> 快捷键：ctrl+/

4.8 特殊字符

字符作用
&nbsp; 空格
&lt<
&gt >
…………

4.9 表格标签

用于 显示数据

  1. 表格标签
标签作用
<table></table>表格
<thead></thead>表头部分
<tbody></tbody>主体部分
<tr></tr>行
<th></th>表头单元格
<td></td>普通单元格

代码：

<table><!--最外层-->	
    <thead><!--第二层-->
        <tr><!--第三层-->
            <th>姓名</th><!--第三层-->
            <th>性别</th>
            <th>年龄</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Han Pengxin</td>
            <td>male</td>
            <td>30</td>		
    	</tr>
    </tbody>
</table>    
<!--一层一层写，先写框架-->
  1. 表格常用属性
属性名属性值作用
alignleft,center,right相对对齐方式
border1 或 “”边框，默认""，无边框
cellpadding像素值单元边缘与其内容之间的空白，默认1像素
cellspacing像素值单元格之间的空白，默认2像素
width像素值或百分比宽度
  1. 合并单元格
使用方法作用
rowspan=“个数”跨行合并（纵向）
colspan=“个数”跨列合并（横向）

4.10 列表标签

用来 布局

列表类型使用方法使用场景
无序列表<ul><li><li><ul>
注：ul里不允许有其他类型标签		无关系无顺序的盒子等
有序列表<ol><li>listitem1<li><ol>像一个下拉菜单一样，并列关系
自定义列表<dl><dt>大哥<dt><dd>小弟<dd><dl>一个大哥后面好几个小弟

注意：

  1. 各类型列表使用场景
  2. 各列表语法

案例：

<body>
    <ol>
        <li>华中科技大学</li>
        <li>武汉理工大学</li>
        <li>武汉科技大学</li>
    </ol>
    <ul>
        <li>华中科技大学</li>
        <li>武汉理工大学</li>
        <li>武汉科技大学</li>
    </ul>
    <dl>
        <!-- 大哥  -->
        <dt>关注我们</dt>
        <!-- 小弟 -->
        <dd>新浪微博</dd>
        <dd>QQ</dd>
        <dd>微信公众号</dd>
    </dl>
</body>

4.11 表单标签

用于 收集用户信息、数据

表单组成

  • 表单域

  • 表单控件（表单元素）

  • 提示信息

4.11.1 表单域
<form action="url地址" method="提交方式" name="表单域名称"}>
    各种表单元素控件
</form>

常用属性：

属性属性值作用
actionurl地址指定 接收数据 的 服务器程序的URL地址
methodGET/POST设置表单数据的提交方式
name名称表单名称，区分多个表单域
4.11.2 表单元素
元素类型语法
input元素（输入控件）<input type="text" name="" value="">
select元素（下拉控件）<select><option>选线1</option>...</select>
textarea文本域元素（多行文本）<textarea>默认文本</textarea>
  1. <input>元素
<input>表单元素作用
type输入控件类型
name命名，实现单选框的多选一
value规定input元素的值
checked规定input元素首次加载时应当被选中
maxlength规定输入字段的字符的最大长度

type属性

type属性值作用
text文本框，默认宽度20字符
password密码框
radio单选框
checkbox复选框
submit提交按钮，将表单数据发送到服务器
button可点按钮（多数情况，用于通过JavaScript启动脚本）
reset重置按钮，清除表单所有数据
file定义输入字段和“浏览”按钮，仅供文件上传
image定义图形式的提交按钮
hidden定义隐藏的输入字段

name属性

  1. name，value属性是每个表单元素都有的属性值，主要给后台人员使用
  2. name是表单元素的名字，要求 单选按钮和复选框要有相同的name值。

表单练习：

<body>
    <!-- 文本框 -->
    用户名：<input type="text" name="username" value="请输入用户名" /> <br>
    <!-- 密码框 -->
    密码： <input type="password" name="password" value="" /> <br>
    <!-- 单选按钮 -->
    性别：男<input type="radio" name="sex" value="男" selected="selected" /> 女<input type="radio" name="sex" value="女" /><br>
    <!-- 复选框 -->
    爱好：吃饭<input type="checkbox" name="hobby"> 睡觉<input type="checkbox" name="hobby"> 打豆豆<input type="checkbox" name="hobby"><br>
    <!-- 提交按钮 -->
    <input type="submit" value="注册">
    <!-- 重置按钮 -->
    <input type="reset" value="重新填写"> <br>
    <!-- 普通按钮 后期结合js使用-->
    <input type="button" value="获取短信验证码"> <br>
    <!-- 文件域，上传文件 -->
    <input type="file" value="浏览本地文件">
</body>
  1. <select>元素
下拉菜单：
<select>
    <option>选项1</option>
    <option>选项2</option>
    <option>选项3</option>
    <option selected="selected">选项n</option>
</select>
  1. <textarea>元素
留言：<textarea cols="50" rows="5">多行文本</textarea><br />

注：cols,rows样式一般在CSS文件中定义

4.11.3 label标签

label 标签为 input 元素定义标注（标签），增强用户体验

label 绑定表单元素，当点击label标签里的文本时，浏览器就会自动将焦点（光标）转到对应的表单框里。

<label for="female">女</label>
<input type="radio" name="sex" value="female" id="female">

核心：

欢迎白嫖
制作不易，点个赞呗亲~❤❤

LiYikou
关注
专栏目录
HTML速成教程
ChangingWay的专栏
01-21 2785
1. HTML速成教程 1.1. 基本标签 1.1.1. HTML标签 1.1.2. 头部标签 1.1.3. 标题标签 1.1.4. 概要标签 1.2. 正文标签 1.3. Character字符，Paragraph 段落和Position位置 1.1.5. 标题标签 1.1.6. 段落标签 1.1.7. Align对齐属
HTML速成
我的笔记
07-13 281
1.HTML是用来干嘛的 HTML是用来写界面的语言，比如一个网页就是一个界面，HTML可以写网页界面，其形成的文件为.html，每一个html都有一个网址对应。在IDEA中编写HTML形如这么个网址http://localhost:8080/dem05/my_file/h04.html 2.语法规则 包含头head与身子body，其中heah用于链接与修饰，body内容用于显示 &lt...
HTML速成1
lianxiangbus
07-16 117
1、学习HTML的目的 ．作为一个Web开发人员．不可避免的要接触和使用HTML, .JSP实际上是一种动态网页开发的技术．我们经常要在HTML文档中嵌入Java代码．或者动态愉出HTML文档，作为JSP的开发人员，当然应该掌握一些常用的HTML标记，知道在什么位置嵌入Java代码，以及如何将动态内容和标记结合在一起。 .HTML与XML有很多相似的地方．通过和XML的对比学习．将会非...
HTML入门与进阶以及HTML5
热门推荐
wuyxinu的博客
12-12 38万+
目录 一、简介 1、前端开发最核心技术 （1）HTML是什么？ （2）CSS （3）JavaScript 2、前端开发其他技术 二、基础内容 1.基础总结 2.HTML的基本标签 (1)HTML标签 (2)head标签 (3)body标签 3、段落与文字 (一)、段落标签 (二)、网页特殊符号 (三)、自闭合标签 (四)、块元素和行内元素 (五)、练...
html入门学习.zip
01-01
html入门学习html入门学习html入门学习 html入门学习html入门学习html入门学习html入门学习 html入门学习html入门学习html入门学习html入门学习html入门学习 html入门学习html入门学习html入门学习 html入门学习html...
HTML入门学习及笔记.zip
最新发布
01-01
HTML入门学习及笔记HTML入门学习及笔记HTML入门学习及笔记HTML入门学习及笔记 HTML入门学习及笔记HTML入门学习及笔记HTML入门学习及笔记HTML入门学习及笔记 HTML入门学习及笔记HTML入门学习及笔记HTML入门学习及笔记...
HTML入门学习的源代码.zip
01-01
HTML入门学习的源代码HTML入门学习的源代码HTML入门学习的源代码 HTML入门学习的源代码HTML入门学习的源代码HTML入门学习的源代码 HTML入门学习的源代码HTML入门学习的源代码HTML入门学习的源代码 HTML入门学习的源...
HTML入门标签
10-11
比较详细的HTML标签，常用到的标签都包括在内了。新手可以看看
HTML速成教材，html初学者教程
04-15
HTML速成教材，初学者教程，初学者教程。HTML速成教材，初学者教程，初学者教程
html新手3分钟速成秒杀一切教程
09-11
基础教程: 1.Html的结构组成 2.Body的常用属性 3.字体 4.图像 5.表格表项对齐方式 6.表格 7.框架 8.序列卷标 9.表单 10.排版卷标 11.背景标志 12.链接标志 其他实例教程 13.关于Iframe标记 14.关于播放音乐 HTML是网页主要的组成部分，基本上一个网页都是由HTML语言组成的，所以要学习网站怎样建设，必须从网页的基本语言学起。 先简单的介绍一下HTML语言（我们在这灌输大家的是能够实际操作），HTML是网络的通用语言,一种简单、通用的全置标记语言。它允许网页制作人建立文本与图片相结合的复杂页面，这些页面可以被网上任何其他人浏览到，无论使用的是什么类型的电脑或浏览器。神奇吗?一点都不神奇,因为现在你看到的就是这种语言写的页面。 是呀，HTML并不是很神奇，只是因为你不是很了解它，现在咱们就开始接她的面纱： 一、HTML的组成结构（头部、眼睛、身体----好像一个人一样是不是？） 1、头部。只要你学过英语，你应该知道头怎么用英文写吧！yes，HEAD就是了；所以，头部的HTML写法就是头部的内容，简单不，大家注意一下，这两个非常相似，只是后一个比前一个多了“/”符号。类似这样的以后会经常用到。 2、眼睛。就好像人的眼睛一样，它是心灵的窗口，而一个网页的眼睛应该就是它的页面的标题了，标题怎么说呢？title,yes！大家知道眼睛是长在头上的，所以啦:标题这些应放在和之间。也就是 标题 3、身体。身体是网页最主要的部分了，因为前面讲的都不是页面所显现出来的，而大家所看到的页面页就是他的身体部分了（当然它的TITLE可以在浏览器的最左上角可以看到），身体----BODY，他的写法也就是：页面内容 最后，别忘了把这些部分组成一体----网页，所以咱们就用把他们给包起来。 好了，咱们来大体看看网页的结构： 标题 页面内容
html入门之—一天快速掌握
jishublog
08-12 206
编外话 如果你对html一无所知，还苦恼与html如何入门，笔者很建议你学习下这篇文章，可以让你快速掌握html，如果你已经是html的高手，那么也希望您给我以更好的建议。 概要 HTML俗称超文本标记语言，是Hyper TextMarkup Language的缩写，是用于描述网页文档的一种标记语言。网页文件本身只是一种文本文件，我们通过在文本文件中添加标记符号，可以告诉浏览器如何显...
HTML入门速成
weixin_54787921的博客
05-05 390
HTML入门速成前言一. 最常见的网页结构二. HTML元素1. **基本元素** （文字粗细，斜体，上/下标，链接，加载图片，删除线，下划线）2.列表(有序列表/无序列表/嵌套列表)（1）有序列表（2）无序列表（3）嵌套列表3. < style >和 < script > 前言 在学习或者工作之中，经常需要自己写一些简单的网页，那么，就需要有一定的前端代码能力。HTML，CSS,JavaScript等皆是最常用的前端代码，本小节即学习笔记，帮助各位初学者快速找到自己想要的网页制作
html速成项目,HTML速成
weixin_30846347的博客
06-23 256
看了HTML孙鑫视频后，对HTML有了基本明确的掌握，梳理知识点对其进行一下总结。首先我们要了解我们为什么要学习HTML，我们搞Web开发，不可避免要接触HTML。JSP也是要学习到的知识，先来简单认识一下，它是一种动态网页开发的技术。我们经常要在HTML中嵌入Java代码，作为JSP开发人员，必须掌握一些常用的HTML标记。认识一下HTML，全称：Hypertext Markup Languag...
HTML基础知识速成(学完可基本看懂网页结构)
Yushiba972的博客
04-25 3213
前端基础学习，适合了解HTML基本组成以及编程老手快速入门HTML
为初学者准备的：HTML 速成
一方的博客
03-15 715
本文来自视频B站视频。时长1h。 看完能大致了解html的内容。 HTML basics - Learn web development | MDN (mozilla.org)
前端基础之HTML入门速成（简单的标签学习）
Java小萧博客
03-11 635
昨天有粉丝私信我，说我分享的哪些教程好多都比较抽象，代码也看不懂，还有电子书，也不知道从哪个开始看起，觉得很迷茫。 那么今天工作之余，我自己整理了一些比较简单的前端入门代码，主要是HTML的标签，希望帮助各位初学者快速找到自己想要的网页制作所需要的HTML代码。 一. 最常见的网页结构 <!DOCTYPE html> <html> <head> <meta charset='utf-8'> <title>开始HTML</ti
HTML入门：从基础到实践
"这是一份由浅入深的HTML入门教材，旨在帮助初学者掌握HTML的基础知识，包括HTML文档的基本结构和字符实体的使用。" 在Web程序开发中，HTML（超文本标记语言）是构建网页内容的核心语言。HTML文件本质上是包含一...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

LiYikou

您的支持是我最大的动力~♥

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值