HTML5

林光虚霁晓

已于 2023-07-18 09:56:24 修改

阅读量77

点赞数

分类专栏：前端文章标签： html5 前端 html windows

于 2023-07-17 20:40:16 首次发布

本文链接：https://blog.csdn.net/weixin_44145338/article/details/131774285

版权

前端专栏收录该内容

17 篇文章 0 订阅

订阅专栏

本文介绍了HTML和CSS的基础知识，包括它们在构建网站中的角色，如何查看网页源代码，以及如何使用VSCode编辑器进行编码。此外，还提到了Chrome浏览器的市场份额和用途，以及HTML的基本结构、标签、属性和注释。文章还涵盖了web开发的三大核心技术，并讲解了表单、图像、链接和列表等元素的使用。

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

1. 什么是HTML、CSS

 是做网站的编程语言。
    浏览器把代码解析后的样子就是我们看到的网站，如何看到网站的原始代码呢？通过鼠标右键选择查看网页源代码。

    如何去写代码？写到哪里呢？

        一个网站是由N多个网页组成的。  每一个网页  .html文件
        电视剧，40集。          .mp4 文件

2. VSCode编辑器

 VS code下载地址：https://code.visualstudio.com/

    如何安装插件？  语言包、 open in browser  view in borwser

    学习编辑器基本使用？

        设置：文件-> 首选项 -> 设置  ( 大小、是否换行 word wrap )

        创建文件、创建文件夹、重命名和删除、搜索

        ctrl + s : 保存
        ctrl + a : 全选
        ctrl + x、ctrl + c、ctrl + v : 剪切、复制、粘贴
        ctrl + z、ctrl + y : 撤销、前进
        shift + end : 从头选中一行
        shift + home : 从尾部选中一行
        shift + alt + ↓ : 快速复制一行
        alt + ↑或↓ : 快速移动一行

        tab : 向后缩进
        tab + shift : 向前缩进

        多光标 : alt + 鼠标左键
        ctrl + d : 选则相同元素的下一个

3. chrome浏览器

 Chrome下载地址： https://www.google.cn/intl/zh-CN/chrome/
    百度统计浏览器市场份额： https://tongji.baidu.com/data/browser    chrome : 68.88%

4. 深入了解网站开发

 UI设计师 : 设计稿
    web前端开发工程师(H5开发)
        设计稿 -> 代码
        数据库里的数据 -> 显示到页面
        HTML + CSS
            HTML : 结构
            CSS : 样式

    web后端开发工程师

5. web三大核心技术？

 HTML
    CSS
    JavaScript

6. HTML基本结构和属性

 HTML ： 超文本 标记 语言

    超文本 : 文本内容 + 非文本内容 ( 图片、视频、音频等 )

    标记 : <单词>

    语言 : 编程语言

    标记也叫做标签：
        <header>
        <footer>
        写法分成两种：
            单标签   <header>
            双标签   <header></header>

        创建标签的快捷键：单词 + tab键 -> <单词>

    标签是可以上下排列，也可以组合嵌套。

    HTML常见标签：http://www.html5star.com/manual/html5label-meaning/

    标签的属性：来修饰标签的，设置当前标签的一些功能。
        <标签 属性="值" 属性2="值2">

7. HTML初始代码

 每个.html文件都有的代码叫做初始代码 ， 要复合html文件的规范写法。

    ! + tab键 : 快速的创建html的初始代码

<!DOCTYPE html>           文档声明 : 告诉浏览器这是一个html文件
<html lang="en"> html文件的最外层标签：包裹着所有html标签代码 lang="en"表示是一个英文网站 lang="zh-CN"表示一个中文网站
    <head>
        <meta charset="UTF-8">    元信息：是编写网页中的一些辅助信息 charset="UTF-8"国际编码，让网页不出现乱码的情况
        <title>Document</title>   设置网页的标题
    </head>
    <body>
        显示网页内容的区域
    </body>
</html>

8. HTML注释？

写法：<!-- 注释的内容 -->  在浏览器中看不到，只能在代码中看到注释的内容。

意义：
    1. 把暂时不用的代码注释起来，方便以后使用。
    2. 对开发人员进行提示。

快捷添加注释与删除注释：
    1. ctrl + /
    2. shift + alt + a

9. 标题与段落？

 标题 -> 双标签 : <h1></h1>   ...  <h6></h6>

    在一个网页中，h1标题最重要，并且一个.html文件中只能出现一次h1标签。

    h5、h6标签在网页中不经常使用。

    段落 -> 双标签 : <p></p>

10. 文本修饰标签？

  强调 -> 双标签 : <strong></strong>、<em></em>

        区别：
            1. 写法和展示效果是有区别的，一个加粗、一个斜体
            2. strong的强调性更强，em的强调性稍弱。

    下标 : <sub></sub>
    上标 : <sup></sup>

    删除文本 : <del></del>
    插入文本 : <ins></ins>
        注：一般情况下，删除文本都是和插入文本配合使用的。

11. 图片标签？

 img -> 单标签 
        src : 引入图片的地址。
        alt : 当图片出现问题的时候，可以显示一段友好的提示文字。
        title : 提示信息
        width、height : 图片的大小

12. 路径的引入？

相对路径
绝对路径

13. 链接标签？

  a -> 双标签  <a></a>
        href属性 : 链接的地址
        target属性 : 可以改变链接打开的方式，默认情况下：在当前页面打开 _self  新窗口打开 _blank

    base -> 单标签 ：作用就是改变链接的默认行为的。
    
    href属性指定目标网页地址。该地址可以有几种类型：
	● 绝对URL - 指向另一个站点（比如 href="http://www.jd.com）
	● 相对URL - 指当前站点中确切的路径（href="index.htm"）
	● 锚URL - 指向页面中的锚（href="#top"）
	
	target：
	● _blank表示在新标签页中打开目标网页
	● _self表示在当前标签页中打开目标网页

14. 锚点？

两种做法
    1. #号 + id属性
    2. #号 + name属性（注意name属性加给的是a标签）

15. 特殊字符？

1. & + 字符
2. 解决冲突啊 左右尖括号、添加多个空格的实现
3. &lt; &gt; &nbsp;

在这里插入图片描述

16. 列表标签？

1. 无序列表 -> ul li 符合嵌套的规范
	type属性：
	● disc（实心圆点，默认值）
	● circle（空心圆圈）
	● square（实心方块）
	● none（无样式）
2. 有序列表 -> ol li 一般用的比较少，可以用无序列表来实现
	type属性：
	● 1 数字列表，默认值
	● A 大写字母
	● a 小写字母
	● Ⅰ大写罗马
	● ⅰ小写罗马
3. 定义列表 -> dl dt dd 列表项需要添加标题和对标题进行描述的内容
	属性:
	● border: 表格边框.
	● cellpadding: 内边距
	● cellspacing: 外边距.
	● width: 像素 百分比.（最好通过css来设置长宽）
	● rowspan: 单元格竖跨多少行
	● colspan: 单元格横跨多少列（即合并单元格）
	
注：列表之间可以互相嵌套，形成多层级的列表。

17. 表格标签

table、tr、th、td、caption 等

注：之前是有嵌套关系的，要符合嵌套规范。

语义化标签：tHead、tBody、tFood

注：在一个table中，tBody是可以出现多次的，但是tHead、tFood只能出现一次。

align : left、center、right
valign : top、middle、bottom


	属性	                描述
accept-charset	规定在被提交表单中使用的字符集（默认：页面字符集）。
action	        规定向何处提交表单的地址（URL）（提交页面）。
autocomplete	规定浏览器应该自动完成表单（默认：开启）。
enctype	      	规定被提交数据的编码（默认：url-encoded）。
method			规定在提交表单时所用的 HTTP 方法（默认：GET）。
name			规定识别表单的名称（对于 DOM 使用：document.forms.name）。
novalidate		规定浏览器不验证表单。
target			规定 action 属性中地址的目标（默认：_self）。

18. 表单标签

  form、input、textarea、select、label ..
        input(单标签)标签有一个type属性，决定是什么控件。
        还有一些常见的属性：
            checked、disabled、name、for ...

<input> 元素会根据不同的 type 属性，变化为多种形态。

属性说明:
● name：表单提交时的“键”，注意和id的区别
● value：表单提交时对应项的值
  ○ type="button", "reset", "submit"时，为按钮上显示的文本年内容
  ○ type="text","password","hidden"时，为输入框的初始值
  ○ type="checkbox", "radio", "file"，为输入相关联的值
● checked：radio和checkbox默认被选中的项
● readonly：text和password设置只读
● disabled：所有input均适用

在这里插入图片描述

19. div和span？

div : 做一个区域划分的块
span : 对文字进行修饰的内联

20.select标签

<form action="" method="post">
  <select name="city" id="city">
    <option value="1">北京</option>
    <option selected="selected" value="2">上海</option>
    <option value="3">广州</option>
    <option value="4">深圳</option>
  </select>
</form>

属性说明：
● multiple：布尔属性，设置后为多选，否则默认单选
● disabled：禁用
● selected：默认选中该项
● value：定义提交时的选项值

21.label标签

<form action="">
  <label for="username">用户名</label>
  <input type="text" id="username" name="username">
</form>

定义：<label> 标签为 input 元素定义标注（标记）。
说明：
1. label 元素不会向用户呈现任何特殊效果。
2. <label> 标签的 for 属性值应当与相关元素的 id 属性值相同。

22.textarea多行文本

<textarea name="memo" id="memo" cols="30" rows="10">
  默认内容
</textarea>
属性说明：
● name：名称
● rows：行数
● cols：列数
● disabled：禁用

林光虚霁晓

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
HTML5

【代码】HTML5。
复制链接

扫一扫

专栏目录