2.web前端开发（一）0226html基础

最新推荐文章于 2022-11-11 17:57:18 发布
最新推荐文章于 2022-11-11 17:57:18 发布
阅读量539 收藏 1
点赞数 2
分类专栏： 2.web前端开发 文章标签： html5
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/guozhuanchen/article/details/114118608
版权
这篇博客介绍了HTML的基础知识，包括HTML的概述，主要标签及其属性。内容涵盖了网页标题、图像、常用标签、列表、超链接、表格、表单、区块和分区标签、音频和视频标签的使用方法和属性详解。
摘要由CSDN通过智能技术生成

一、html概述

1.html是超文本标记语言，主要就是一系列标签组成
2.使用的工具是 Visual Studio Code
如何在vs中运行html
安装插件 https://blog.csdn.net/shirleyqdd/article/details/80816404
3.html是搭建网页的框架、css是把html写的框架进行美化、javaScript是实现数据的交互、react或者vue是前端框架使得开发更简便
4.可以自己学习的网址
W3school
菜鸟教程
https://www.nhooo.com/tags/html-reference.html

二、主要的标签以及其对应的属性

（一）进入工具 写出默认的网页 并认识基本框架

1.进入工具 打出默认的结构

在这里插入图片描述
先按 ！
在按 tab键

在这里插入图片描述

2.对框架的认识
在这里插入图片描述
在这里插入图片描述

<!DOCTYPE html>  //声明文档类型 是html的
<html lang="en"> //作为整个html网页最大的标签 lang代表语言 en英语 lang 就是 language 语言 en 是 english，如果不是写的英文网站,最好是把这段去掉。
<head> //头部 不会在网页中显示 声明一些网页使用的规范
    <meta charset="UTF-8"> //声明语言编码格式
    <meta http-equiv="X-UA-Compatible" content="IE=edge"> //兼容ie浏览器的所有版本 https://www.cnblogs.com/chendc/p/5423337.html
    <meta name="viewport" content="width=device-width, initial-scale=1.0"> //可视区域是设备本身的宽度 没有缩放 https://www.cnblogs.com/yuzhongwusan/p/4184923.html
    <title>Document</title>  //网页标题
</head>
<body>  //写网页主要在这个里面
    
</body>
</html>
（二）开始各大常用标签的使用

小技巧：
1.如何一下把一对儿标签都打出来
以p标签为例
先写 p
再按 tab键
2.如何注释
先按 ctrl
再按键盘上的 /
3.快速复制上一行
shift+alt+↓

1.head里的两个主要的标签

（1）网页标题 title

<title>这是网页标题</title>

在这里插入图片描述
（2）meta标签

2.图像标签 img

001.标签是：

<img src="‪1.jpg" 
    alt="抱歉小主 我找不到图片" 
    title="你悬浮一下哦"
    width="200"
    height="200">

002.属性有：
src="" //图片的位置 可以本地的 也可以是网上的 如下
自己电脑本地的图片地址：‪C:\Users\GUOZHUANCHEN\Desktop\1.jpg
网上的图片：‪https://www.baidu.com/img/flexible/logo/pc/result.png
相对路径的src的写法：http://www.divcss5.com/html5/h54801.shtml
alt=“抱歉小主 我找不到图片” //找不到图片时的话
在这里插入图片描述
title=“你悬浮一下哦” //鼠标悬浮在图片上显示的话
width=“200” //宽
height=“200” //高

003.效果是
在这里插入图片描述

3.其他简单且常用的标签 p b strong i em u s hr h1-h6 br mark特殊符号（>< " & ®© ）

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>这是网页标题</title>
</head>
<body>
    <!-- <img src="‪1.jpg" 
    alt="抱歉小主 我找不到图片" 
    title="你悬浮一下哦"
    width="200"
    height="200">

    <img src="‪https://www.baidu.com/img/flexible/logo/pc/result.png" 
    alt="抱歉小主 我找不到图片" 
    title="你悬浮一下哦" 
    width="200" 
    height="200"> -->

    <p>我是第1段</p>
    <p>我是第2段</p>
    <p>我是第3段</p>

    <b>我是加粗标签</b>
    <strong>我是强调加粗标签</strong>
    <i>我是倾斜标签</i>
    <em>我是强调倾斜标签</em>
    <u>我是下划线标签</u>
    <s>我是删除线标签</s>

    <!-- 这是水平线标签 长400 宽5 颜色红色 -->
    <hr width="400" size="5" color="red" >  

    <h1>我是一级标题标签</h1>
    <h6>我是六级标题标签</h6>

    &gt;
    &lt;
    &quot;
    &amp;
    &reg;
    &copy;
    &nbsp; <!-- 这是空格 如果你写了普通的空格  会自动转义后变成一个 故以此符号代表空格 -->



</body>
</html>

补充：
mark标签 是标注的
br标签是换行的

如下
在这里插入图片描述

4.列表

列表分为有序列表、无序列表、自定义列表三种

（1）有序列表
001.标签是

<ol>
        <li>我是第一个列表元素</li>
        <li>我是第二个列表元素</li>
        <li>我是第三个列表元素</li>
        <li>我是第四个列表元素</li>
    </ol>

002.属性有
属性1：type：
排序的类型
数字的1 2 3
字母的a b c或者A B C
I或者i

<!-- 默认是以1 2 3 4 排序的 -->
    <p>默认</p>
    <ol>
        <li>我是第一个列表元素</li>
        <li>我是第二个列表元素</li>
        <li>我是第三个列表元素
最低0.47元/天 解锁文章
转辰
关注
专栏目录
Web前端开发【三】HTML总结
Whitney
06-04 388
1. HTML是网页的结构，CSS是网页的外观，JavaScript是网页的行为。 2. 前端的学习路线： HTML——CSS——JavaScript——jQuery——CSS3——HTML5——Vue.js 3. 什么是HTML？ HTML全称是Hyper Text Markup Language（超文本标记语言），它是网页的标准语言。HTML并不是一门编程语言，而是一门描述性的标记语言。 4. HTML结构 一个页面是由四个部分组成的，一个文档声明、一个html标签对、一个head标签对、一个body
web前端开发——HTML学习
Crusies的博客
01-15 228
WEB前端开发 W3C学习网站 MDN学习网站 HTML 从语义角度，描述页面结构 语言不区分大小写，特殊字符要求全小写 html5文件结构 快速编辑：Tab键 <!DOCTYPE html> 文档类型：符合HTML5标准 <htmml lang="en"> lang属性：搜索引擎 en英文 zh中文 <head> <meta charset="UTF-8"/> <meta>:元数据 charset属性：字符集编码方式
HTML编码问题导致的乱码
Alex
09-01 1384
今天一个学弟问了一个问题，它写的HTML代码打开显示的是乱码。 然后就给我发来了代码。 就一个HTML文件和一个文件夹，打开一看，很简单的代码。 <!DOCTYPE html> <html lang=""> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport"
web---HTML基础知识
Allure泽宇的博客
06-11 5523
HTML基础知识内容总结
[36]javascript入门
周小董
06-10 1610
入门程序 &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="utf-8"&gt; &lt;meta http-equiv="X-UA-Compatible" content="IE=edge"&gt; &lt;title&gt;JS入门——
阿里web前端开发手册.pdf
11-03
阿里web前端开发手册是一份详细的前端开发规范，涵盖了项目命名、目录命名、JS、CSS、SCSS、HTML、PNG 文件命名等多个方面的命名规范。下面是本手册中的一些重要知识点： 1. 命名规范： 在项目开发中，命名规范是...
web前端开发基础作业考核试题大全.pdf
07-14
Web 前端开发基础知识点总结 本资源摘要信息将对《web 前端开发基础》作业考核试题题库大全进行...本资源摘要信息涵盖了《web 前端开发基础》作业考核试题题库大全中的大部分知识点，为读者提供了一个系统的学习导航。
web前端开发-html5基础（含代码）
qq_48109675的博客
07-18 3541
适合小白的Web前端开发入门教程
Web前端开发基础入门,书上示例
最新发布
09-09
Web前端开发基础入门,书上示例.
网络安全——HTML基础
W981113的博客
12-04 3184
1.漏洞 通用型：第三方软件、应用、系统对应的漏洞，每个使用这个软件或者应用系统的用户都存在这个漏洞，发现一个 漏洞可以封杀n多个网站 事件型：非通用型漏洞，主要指互联网上一个应用的具体漏洞，如具体到某个站点 2.同源 协议 主机 端口都相同 3.提交方式method 两种方法 Get ：url中直接显示，可直接看到 Post ：表单方式提交，嵌套在页面内，起到保密作用 4.windows系统日志中 4624 登陆成功 4625 审核失败 5.Linux日志 最后一次登录的日志 ┌──
HTML 基本开发方式，学会常用的 HTML 标签
1226
04-28 1万+
一、HTML 基本开发方式 1、如何编写 HTML 代码 本身的语法比较简单，语法风格和 Java 之类的差别很大，(并不能表达一些逻辑，而只是能表达 “有哪些东西" 一种信息)， 使用记事本创建一个文件，后缀名改成 .html 即可，运行 html 也不需要额外的编译器，直接有浏览器就行 hello world! 虽然这个代码能运行，但是其实并不算是一个合法的 HTML 语法，那为什么浏览器还能正常运行呢?? 鲁棒性：“容错能力” 强 <html> <head> &
HTML5 入门：一个最简单的HTML页面（doctype、meta、Head、标签的使用)
weixin_34402408的博客
01-23 621
HTML5的&lt;!doctype&gt;声明怎么写 这是HTML 4.01的doctype： &lt;!DOCTYPE html PUBLIC "-//W3C/DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"&gt; XHTML 1.0的doctype。它的长度跟HTML 4.01的差不太多： &lt;!...
【Web笔记】Html学习手册
qq_37443884的博客
11-26 1608
HTML简介 HTML是**超文本标记语言（HyperText Markup Language）**的简称 HTML的前世今生 从初期的网络诞生后，已经出现了许多HTML版本: 版本 发布时间 HTML 1991 HTML+ 1993 HTML 2.0 1995 HTML 3.2 1997 HTML 4.01 1999 XHTML 1.0 2000 HTML...
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <sty
热门推荐
u014497548的博客
06-03 57万+
Title img,div,body{margin: 0;padding: 0;} .orgindiv {width: 200px;height: 200px;position: relative;float: left;margin-left: 100px;} .orgindiv img{width: 100%;height: 100%;}
字符串用法大全（源码解析，建议收藏！）
...
08-25 161
字符串用法大全 字符串的不可变性 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge">
Web学习（一） html基础标签
May the Force be with you
03-05 3227
Web学习（一） html基础标签 1.1 文档结构 文档结构 html的所有标签为树形结构，例如： <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Web应用课</ti
jQuery学习教程，写更少的代码,做更多的事情（六）
探索技术与实践的旅程，分享编程经验与工具使用心得，助力开发者提升技能。
05-14 1029
文章目录1.jQuery DOM的CSS属性1.css()方法2.height()和width()方法3.innerHeight()和innerWidth()方法4.offset()方法5.outerHeight()和outerWidth()方法6.position()方法7.srollLeft()和scrollTop()方法 1.jQuery DOM的CSS属性 1.css()方法 例如：给元素添加css的一些样式,看注释！！ <!DOCTYPE html> <html> <
爱心代码李峋同款爱心 python html
CL_Young的博客
11-11 7万+
最近那个电视剧很火，就是搞爱心代码的，本人兴趣使然，在网上搜集了一些代码，经过一定修改，做一个小总结。本文简单介绍了几种爱心代码，希望对大家有所帮助，求赞欧~~~另外，python想送给你的那个 TA的话可以打包为exe的，我后期再补一下教程，然后运行有问题的可以在评论区说明~
Vue.js Web前端开发课程标准与实践
"《Web前端开发》课程标准旨在教授Vue.js等前端开发技术，适合计算机专业...《Web前端开发》课程通过系统的教学安排和实践训练，旨在将学生培养成为具备现代Web开发技能的专业人才，为他们的未来职业生涯奠定坚实基础。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值