前端——基础认知（1）_前端页面的认识-程序员宅基地

构成	语言	说明
结构	HTML	页面元素和内容
表现	CSS	网页元素的外观和位置等页面样式（如：颜色、大小等）
行为	JavaScript	网页模型的定义与网页交互

1.3.3 Web标准的记忆方法

Web标准要求页面实现：结构、表现、行

2.HTML初体验

2.1 HTML的感知

2.1.1 HTML的概念

HTML（Hyper Text Markup Language）中文译为：超文本标记语言

专门用于网页开发的语言，主要通过 HTML标签 对网页中的文本、图片、音频、视频等内容进行描述。

2.1.2 网页体验-构建基本网页的步骤

1. 在代码文件夹中点击鼠标右击 → 新建文本文档 → 命名为： 文字变粗案例.txt

2. 双击这个文件，输入代码等内容 → 记得保存！

3. 在文件上点击鼠标右键 → 重命名 → 修改文件后缀为为 .html

4. 双击 文字变粗案例.html ，浏览器会自动打开文件并显示之前输入的内容

2.2 HTML骨架结构

2.2.1 HTML页面固定结构

网页类似于一篇文章：

每一页文章内容是有固定的结构的，如：开头、正文、落款等……

网页中也是存在固定的结构的，如：整体、头部、标题、主体

网页中的固定结构是要通过特点的 HTML标签进行描述的

<!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>
    网页的主体内容
</body>
</html>

2.3 开发工具的使用

2.3.1 为什么要使用 VS Code？

刚刚通过文本编辑器，如：记事本，完全可以编写网页源代码

但是效率……不忍直视

实际开发中，注重开发的效率和便捷性，因此我们会使用一些开发工具

开发工具有很多： Visual Studio Code 、 Webstorm 、 Sublime 、Dreamweaver、 Hbuilder

前端开发神器：VS Code → 速度快、体积小、插件多

2.3.2 VS Code使用前要求

1. VSCode 软件安装完毕

2. Chinese (Simplified) Language Pack for Visual Studio Code 简体中文插件安装完毕

3. open in browser 直接打开浏览器插件安装完毕

2.3.3 VS Code创建网页的步骤

1. 双击打开VS Code软件

2. 将 day01代码 文件夹用鼠标左键按住不放，拖拽到VS Code窗口中，文件夹会显示在左侧目录上

3. 点击目录上的 +新建文件按钮 创建页面，注意： 文件后缀名需要是.html

2.3.4 VS Code的基本快捷键

1. 快速生成标签：英文 + tab

2. 保存文件：ctrl + s

注意1：写完文件之后务必需要保存文件，否则网页无变化

注意2：可以设置自动保存省去每次保存的麻烦

3. 快速查看网页效果：右击 → Open in Default Browser

快捷键：alt + b

注意： 必须安装了open in browser 插件

4. 快速生成结构标签：! + tab

注意1： !必须是英文的 ，中文!无效

注意2： 必须保证当前文件后缀名是.html ，否则无效

VS Code自动生成的骨架多了其他标签，之后会介绍

2.3.5 VS Code的其他快捷键

1. 快速复制一整行：ctrl + c

2. 快速粘贴一整行：ctrl + v

3. 快速删除（剪切）一整行：ctrl + x

3.语法规范

3.1 HTML的注释

3.1.1 什么是注释

问题：程序员在代码中添加的注释，是为了给谁看的？

下次的阅读代码者（自己或者其他程序员）

3.1.2 注释的作用和写法

注释的作用：

为代码添加的具有解释性、描述性的信息，主要用来帮助开发人员理解代码

浏览器执行代码时会忽略所有的注释

注释的快捷键：

在VS Code中：ctrl + /

3.2 HTML标签的构成

3.2.1 HTML标签的结构

标签的结构图：

结构说明：

1.标签由<、>、/、英文单词或字母组成。并且把标签中<>包括起来的英文单词或字母称为标签名。

2.常见标签由两部分组成，我们称之为：双标签。前部分叫开始标签，后部分叫结束标签，两部分之间包裹内容。

3.少数标签由一部分组成，我们称之为：单标签。自成一体，无法包裹内容。

3.3 HTML标签的关系

3.3.1 HTML标签与标签之间的关系可分为

父子关系（嵌套关系）

兄弟关系（并列关系）

二.HTML标签学习

本文链接：https://blog.csdn.net/Joy_jyx/article/details/127095842

原作者删帖不实内容删帖广告或垃圾文章投诉

智能推荐

Python报错ModuleNotFoundError: No module named 'numpy'-程序员宅基地

文章浏览阅读10w+次，点赞108次，收藏197次。Python报错ModuleNotFoundError: No module named ‘numpy’这种情况一般是缺少numpy所致，需要安装numpy。安装numpy的时候需要先更新pip，使用最新版的pip来安装：python -m pip install --upgrade pip然后pip install numpy接下来在命令行窗口运行python然后运行fr..._modulenotfounderror: no module named 'numpy

Python手记-9：Python LXML库XPath的爬取晋江书目_authorid=1322620-程序员宅基地

文章浏览阅读3w次。1. lxml库lxml是功能最丰富且易于使用的库，用于处理Python语言中的XML和HTML，还可实现WEB爬取，官文参考：https://lxml.de/，完整的PDF文档下载链接https://lxml.de/lxmldoc-4.5.0.pdf，但是阅读起来……em……怪自己不够聪明的样子。Linux下安装lxml库：[root@chengyu ~]# pip3 instal..._authorid=1322620

left join查询可能出现重复数据（主表中一条变两条）_a left join b a有两条数据-程序员宅基地

文章浏览阅读6.7w次，点赞5次，收藏17次。创建两个表执行下列查询语句SELECT * from person a LEFT JOIN people b on a.action_id = b.action_id显然 person表中的数据出现了两次，left join 以主表为主，我们在今后的开发要注意类似的问题执行下面的语句也是同样的效果SELECT * from person_a left join b a有两条数据

redis客户端RedisDesktopManager连接常见问题_redis desktop manager 新建连接点击不了ok-程序员宅基地

文章浏览阅读1.9k次。RedisDesktopManager是一款连接redis数据库的客户端。背景：我是在自己机器上装的redis，使用的是虚拟机，系统是linux 版本是centeros-6.4在使用这个连接redis的时候，发现连接不上。第一步：在自己的本机外面试下能不能连接上虚拟机，打开cmd，使用 ping 192.168.232.132 （192.168.232.132这个为虚拟机的ip地址..._redis desktop manager 新建连接点击不了ok

无法安装此app,因为无法验证其完整性，解决方案_无法验证完整性的app怎么安装苹果-程序员宅基地

文章浏览阅读3.4k次。(╯□╰)o一群小币崽子没看我资源介绍直接点下载地址一顿操作。证书及描述文件过期（没有签名或者不完整）_无法验证完整性的app怎么安装苹果

pringMVC-程序员宅基地

文章浏览阅读109次。http://elim.iteye.com/category/175984

随便推点

新型高强度铝合金焊条_变形铝合金焊条-程序员宅基地

文章浏览阅读404次。1.2mm)的Al-12.7Si-0.7Mg成分铝合金焊丝,自制焊丝表面质量良好,内部组织与成分均匀。这种铝合金焊条的焊芯由铝合金组成，它的成分质量分数如下SC钪0.05%～0.8%,Er铒0.05%～0.6%,硼铬稀土0.01%～0.8%,B硼0.01%～0.5%,Ti钛0.1%～0.3%,Cr铬0.05%～0.4%,Zr锆0.05%.:铁0.15%,硅0.12%,铜0.1%,锰0.02%,镁4.5% ,锌5.5%，TiC碳化钛0.05%，TiB硼化钛0.05%，石墨0.22%其余为6061铝合金。_变形铝合金焊条

python输出二进制数_Python: 二进制、八进制、十六进制转换或者输出-程序员宅基地

文章浏览阅读4.6k次，点赞6次，收藏21次。为了将整数转换为二进制、八进制或十六进制的文本串，可以分别使用bin() ,oct() 或hex() 函数：>>> x = 1234>>> bin(x)'0b10011010010'>>> oct(x)'0o2322'>>> hex(x)'0x4d2'如果你不想输出0b , 0o 或者0x 的前缀的话，可以使用format() 函数>>> format(x, 'b')'10011010010'>>..._python怎么输出a的二进制，八进制，十六进制

python爬取网页乱码解决方案_python爬取网页特殊字符乱码怎么解决-程序员宅基地

文章浏览阅读199次。importchardetimportrequestsurl='http://www.100253.com/'d1=requests.get(url)codesty=chardet.detect(d1.content)a=d1.content.decode(codesty['encoding'])a.encode('utf-8')_python爬取网页特殊字符乱码怎么解决

单片机 MSP430 G2553 launchpad LCD1602 显示连线_msp430怎么连线-程序员宅基地

文章浏览阅读2.2k次。一般无特殊计划买的LCD1602显示屏是5V版本的，不是3.3特殊版本，这时候怎么连线。下图画正方形的2个孔，上面是5V，下面是板子的GND。下图右上角的VCC是3.3V.接线方式：成功：_msp430怎么连线

JAVA 解析 DXF 文件点线面圆_java dxf-程序员宅基地

文章浏览阅读3k次，点赞5次，收藏11次。一、DXF 文件简介1.人肉解析观察几个具有代表性的 dxf 文件，点、文本、线。使用文本工具直接打开 DXF 文件，可以看到很多字段，这里根据官方文档找规律，找到具有代表性的一些字段如下：点的特点：都是 POINT 开头8 下面对应的图层名称10 下面的是 x 坐标20 下面的是 y 坐标30 下面的是 z 坐标POINT 5668B3301F100AcDbEntity 8井号 6Continuous100AcDbPoint 10398266.5_java dxf

arm交叉编译器-程序员宅基地

文章浏览阅读768次。softfp : armel架构(对应的编译器为gcc-arm-linux-gnueabi)采用的默认值，用fpu计算，但是传参数用普通寄存器传，这样中断的时候，只需要保存普通寄存器，中断负荷小，但是参数需要转换成浮点的再计算。hard : armhf架构(对应的编译器为gcc-arm-linux-gnueabihf)采用的默认值，用fpu计算，传参数也用fpu中的浮点寄存器传，省去了转换, 性能最好，但是中断负荷高。ARM32、小端、Linux工程： arm-none-linux-gnueabihf。_arm交叉编译器