web前端入门学习 html5（1）

web前端入门基础教程，最适合零基础前端小白的视频教程html5+css3

文章目录

html
浏览器内核
web标注
语法规范
html基本结构标签
web常用开发工具
vscode基本使用
文档类型声明标签DOCTYPE
lang语言种类
字符集charset
标题标签【h】
段落和换行标签【p】段落标签【br】换行标签
文本格式化标签
div和span标签布局标签
img图像标签
图像属性 src图片路径 alt替换文本 title提示文本 width图像宽度 height图像高度 border设置图像边框
图像标签属性的注意点
目录文件夹和根目录 vscode打开目录文件夹
文件的相对路径和绝对路径
超链接标签 a标签 href _self _blank 外部链接内部链接空链接 href="#" 下载链接图片添加超链接
锚点链接
代码注释
特殊字符空格大于号小于号等
表格的主要作用
表格基本语法表格标签table 表格行标签tr 表格单元格标签td
表头单元格标签th
表格属性 align border cellpadding cellspacing width height
表格标签
表格结构标签 thead tbody
合并单元格跨行合并和跨列合并
- 合并单元格目标单元格：写合并代码的位置
- 合并单元格的步骤
列表标签（无序列表，有序列表，自定义列表）
- 无序列表标签`
  - `（Unordered list）列表项`
  - `
- 有序列表标签 `
  1. ` Ordered list 只需理解
- 自定义列表标签 `
  
  ` definition list 重点（大佬dl、带头dt、弟弟dd）
- 三种列表标签总结

html

浏览器内核

web标注

语法规范

html基本结构标签

web常用开发工具

vscode基本使用

文档类型声明标签DOCTYPE

lang语言种类

像谷歌浏览器如果检测到网站跟本地语言不一样，就会提示翻译

字符集charset

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>我利用vscode创建的第一个页面</title>
</head>
<body>写代码是一件非常快乐的事情！
</body>
</html>

标题标签【h】

段落和换行标签【p】段落标签【br】换行标签

文本格式化标签

div和span标签布局标签

<!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>Document</title>
</head>
<body><div>这是头部</div><span>今日价格</span><span>今日价格</span><span>今日价格</span>
</body>
</html>

img图像标签

图像属性 src图片路径 alt替换文本 title提示文本 width图像宽度 height图像高度 border设置图像边框

图像标签属性的注意点

目录文件夹和根目录 vscode打开目录文件夹

文件的相对路径和绝对路径

超链接标签 a标签 href _self _blank 外部链接内部链接空链接 href="#" 下载链接图片添加超链接

锚点链接

代码注释

特殊字符空格大于号小于号等

表格的主要作用

表格基本语法表格标签table 表格行标签tr 表格单元格标签td

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><table><tr><td>姓名</td> <td>年龄</td> <td>性别</td></tr><tr><td>姓名</td> <td>年龄</td> <td>性别</td></tr><tr><td>姓名</td> <td>年龄</td> <td>性别</td></tr></table>
</body>
</html>

表头单元格标签th

表格属性 align border cellpadding cellspacing width height

align在vscode里显示白色表示不推荐这样写，以后要可以在css里写

<!doctype html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport"content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title>
</head>
<body><table align="center" border="20" cellpadding="20" cellspacing='20' width='1000' height='250'><tr><td>姓名</td> <td>性别</td> <td>年龄</td></tr><tr><td>刘德华</td> <td>男</td> <td>56</td></tr><tr><td>张学友</td> <td>男</td> <td>56</td></tr></table>
</body>
</html>

表格标签

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><table align="center" width='500' height='249' border="1" cellspacing="0"><tr><th>排名</th> <th>关键词</th> <th>趋势</th><th>进入搜索</th><th>最近七日</th><th>相关链接</th></tr><tr><td>1</td><td>鬼吹灯</td><td><img src='me.jpg'></td><td>345</td><td>123</td><td><a href="#">贴吧</a> <a href="#">头条</a> <a href="#">微博</a></td></tr></table>
</body>
</html>

https://www.bilibili.com/video/BV1pE411q7FU?p=35

表格结构标签 thead tbody

标签可折叠，阅读更方便

<!doctype html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport"content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title>
</head>
<body><table align="center" border="20" cellpadding="20" cellspacing='20' width='1000' height='250'><thead><tr><th>姓名</th> <th>性别</th> <th>年龄</th></tr></thead><tbody><tr><td>刘德华</td> <td>男</td> <td>56</td></tr><tr><td>张学友</td> <td>男</td> <td>56</td></tr></tbody></table>
</body>
</html>

合并单元格跨行合并和跨列合并

合并单元格目标单元格：写合并代码的位置

合并单元格的步骤

<!doctype html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport"content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title>
</head>
<body><table align="center" border="20" cellpadding="20" cellspacing='20' width='1000' height='250'><thead><tr><th>姓名</th> <th>性别</th> <th>年龄</th></tr></thead><tbody><tr><td rowspan="2">刘德华&张学友</td> <td colspan="2">男 56</td> </tr><tr> <td>男</td> <td>56</td></tr></tbody></table>
</body>
</html>

如果是合并多行多列就同时加上colspan和rowspan?

列表标签（无序列表，有序列表，自定义列表）

无序列表标签`<ul>`（Unordered list）列表项`<li>`

https://www.bilibili.com/video/BV1pE411q7FU?p=38&spm_id_from=pageDriver

<!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>Document</title>
</head>
<body><h4>你最喜欢吃的食物？</h4><ul><li>榴莲</li><li>鲱鱼</li><li>葡萄</li><li><p>123</p></li></ul>
</body>
</html>

有序列表标签 `<ol>` Ordered list 只需理解

自定义列表标签 `<dl>` definition list 重点（大佬dl、带头dt、弟弟dd）

<!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>Document</title>
</head>
<body><h4>你最喜欢吃的食物？</h4><dl><dt>大哥</dt><dd>甄嬛</dd><dd>小燕子</dd><dd>五阿哥</dd><dt>小弟</dt><dd>甄嬛</dd><dd>小燕子</dd><dd>五阿哥</dd></dl>
</body>
</html>

三种列表标签总结

用自定义列表：

用无序列表：

web前端入门学习 html5（1）相关推荐

web前端入门学习 html5（2）
https://www.bilibili.com/video/BV1pE411q7FU?p=50&spm_id_from=pageDriver 文章目录表单标签为什么需要表单? 表单的组成 ...
Web前端入门学习（5）——浮动原理及清除浮动
浮动原理及清除浮动上节回顾在上节的<Web前端入门学习(4)-- 块级元素和行内元素之特征与转换>中(http://cherry360.blog.51cto.com/12176744/ ...
web前端入门学习 css（1）
黑马程序员Web前端入门教程,零基础前端视频教程pink老师_html5+css3 文章目录 html局限性 css简介(层叠样式表.级联样式表.css样式表) css语法规范 css代码样式风格(推 ...
【css教程】web前端入门学习 css（1）
黑马程序员Web前端入门教程,零基础前端视频教程pink老师_html5+css3 文章目录 html局限性 css简介(层叠样式表.级联样式表.css样式表) css语法规范 css代码样式风格(推 ...
web前端入门学习（纯干货）
web前端怎么样才能入门,首先我们要从什么是初级web前端工程师说起: 按照我的想法,我把前端工程师分为了入门.初级.中级.高级这四个级别, 入门级别指的是了解什么是前端(前端到底是什么其实很多人还是 ...
Web前端入门学习之JS基础知识梳理汇总
Web前端工程师是当前各大企业都比较稀缺的人才,薪资待遇和就业前景都很不错.不论是专业还是非专业,有基础亦或是无基础,都想通过学习Web前端实现高薪就业. 不过,学习要一步一个脚印,不能一口吃一个胖子 ...
web前端入门学习 css（9）广义的html5 品优购项目（html+css基础完结，js开始，移动端布局开始）
文章目录广义的html5 品优购项目导读网站制作流程原型图项目规划项目整体介绍项目规划项目搭建网站favicon图标网站TDK三大标签SEO优化品优购首页制作常用模块类名命名快 ...
web前端入门学习 css（5）（浮动）（ps切图）（css属性书写顺序）（学成在线网站案例）
文章目录传统网页布局的三种方式标准流(普通流.文档流) 浮动(为什么需要浮动?) 浮动特性浮动元素会脱离标准流,可以与普通流的元素相重叠如果多个盒子都设置了浮动,则它们会按照属性值一行内显示并 ...
web前端入门学习 css（8）（新增语义化标签、video/audio、新增input类型、新增表单属性、属性选择器、结构伪类选择器、伪元素选择器、css3盒子模型、模糊、calc函数、过渡
https://www.bilibili.com/video/BV1pE411q7FU?p=276 文章目录 html5新特性 html5新增语义化标签 header头部 nav导航 article内 ...