尚硅谷HTML习笔记

news2025/11/4 6:10:22

计算机的两位先驱：
1、图灵 人工智能之父
2、冯诺依曼 现代计算机之父

计算机的组成
一、软件：分为系统软件和应用软件
系统软件：windows、mac、linux、harmony
应用软件：下载的软件如微信
二、硬件：
①中央处理器（cpu）就是控制器和运算器
②存储器，包括内存和硬盘
内存：临时性存储，读写速度快，常见的有16/32G。能同时玩多少游戏，取决于内存的大小。
硬盘：永久性存储，一般1TB。能安装多少东西取决于硬盘的大小。
③ 输入设备：键盘、鼠标
④输出设备：音响、显示器

应用软件分类
C/S架构软件（client、server），需要安装才能使用的软件，需要偶尔更新，不跨平台。对于不同平台开发语言不一样，对应的安装包也不一样。

B/S架构软件（browser、server），直接在网页就可以使用的，无需安装和更新，可跨平台
前端主要开发的是这种
还有微信小程序开发、客户端开发、搭建服务器

浏览器知识
五大主流浏览器
市场份额非常大，都有自己的内核
chrome（blink）、safari（webkit）、ie（trident）、firefox（gecko）、opera（blink）
什么是内核
是浏览器的核心，用于处理浏览器所得到的各种资源。
以前ie浏览器是window系统自带的。
22年微软宣布停止对ie浏览器的维护了
取代的是edge浏览器，内核和谷歌一样

网页的概念
网址—访问—网站
网站是多个网页组成的
网页有哪些组成？
结构（html）、表现（css）、行为（js）

html
超文本标记语言
html的发展历史
在这里插入图片描述
标签中的内容叫标签体
单标签无结束标签，如
文档声明告诉浏览器应该使用的html标准

vsCode
优点：
1、轻量便捷 2、功能丰富 3、免费使用 4、插件优秀 5、各种语言都可以用
插件推荐：
vscode-icons 插件 设置文件icon
live-server 插件，在代码文件中右键就会出现open with live server 选项。点击之后自带访问服务器下该文件。代码更新后浏览器也没资源也会自动刷新。但是只有打开文件夹才行。
设置：
vscode设置自动保存，可设置延迟时间，失焦保存。

设置字符集和语言

在这里插入图片描述
原则：
1、存储时，务必采用合适的字符编码，否则无法存储数据会丢失。（编码失败时会存下一堆问号）
2、存储时采用的编码方式必须和读取时保持一致。否则数据会呈现，但会出现乱码（编码成功，但解码失败）。
3、浏览器默认采用UTF-8进行解码。但是最好还是在文档中声明charset
4、设置语言
在这里插入图片描述

设置网站图标在根目录下添加favicon.ico文件。

开发者文档
最官方的标准的是w3c官网 www.w3c.org
但是这个网站是全英文的，对我们学习并不是那么友好。国内有两个对于这个网站的翻译和搬运。
w3School : www.w3school.com.cn
MDN: developer.mozilla.org
这两个网站如何选择MDN上的api更全面，所以这个网站用的更多。

语义化标签
用于特定的标签去表达特定的含义。标签的默认效果并不重要，因为后期可以通过css控制。但是语义化非常重要。
语义化的优点
1、代码结构清晰，可读性强。
2、有利于seo
3、方便设备解析

块级元素与行内元素的区别
1、块级元素：独占一行，排版标签一般都是块级元素。
2、行内元素：不独占一行
使用规则
1、块级元素中可以写行内和块级。
2、行内元素中只能写行内，不能写块级。
3、一些特殊的规则。H1到H6不能互相嵌套。p中不能写块级元素。

文本标签
1、用于包裹括词汇，短语等。
2、通常写在排版标签的里面。
3、排版标签更宏观，大段的文字文本标签更微观，如词汇，短语
4、文本标签通常都是行内元素。
常用的文本标签
1、em 着重阅读的内容。
2、strong十分重要的内容，语气比一要强。
3、span没有语意用于包裹短语的通用容器。在这里插入图片描述

在这里插入图片描述

图片标签
vscode不支持外部文件直接复制过来
但是可以按住拖到
在这里插入图片描述

常见图片格式的优缺点
在这里插入图片描述
在这里插入图片描述

在这里插入图片描述
超链接

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
列表

在这里插入图片描述在这里插入图片描述
在这里插入图片描述
表格

在这里插入图片描述在这里插入图片描述

<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="utf-8">
</head>

<body>
    <ol>
        <li>测试</li>
    </ol>
    <ul>
        <li>ceg</li>
    </ul>
    <dl>
        <dt>做好笔记</dt>
        <dd>笔记方便复习</dd>
        <dt>多加练习</dt>
        <dt>只有敲出来的代码才是自己的</dt>
    </dl>
    <table border="2">
        <caption>学生信息</caption>
        <thead>
            <tr>
                <th>姓名</th>
                <th>性别</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>张三</td>
                <td>男</td>
            </tr>
            <tr>
                <td>李四</td>
                <td>女</td>
            </tr>
        </tbody>
        <tfoot></tfoot>
    </table>
</body>

</html>

表格常用属性
在这里插入图片描述
在这里插入图片描述

补充常用标签
在这里插入图片描述
表单的基本结构
在这里插入图片描述
表单通常用于和用户交互。
1、普通的输入框必须要写name，但不需要写value，Name相当于定义的key
2、单选框，多个radio的name属性要保持一致，并且必须设置value，value即为选择的数据值。

<radio name='sex' value:'1'>
<radio name='sex' value:'2'>

3、隐藏域，input的type设为用户不可见的一个输入区域。作用是在提交表单的时候携带一些固定的数据。同时需要指定name和value。

<input type='hidden' name='tag' value：‘99’>

4、提交按钮将input的type设置为submit。不需要指定name属性即可呈现按钮样式。

<input type='submit' value='点我提交'>

5、重置按钮

<input type='reset’ value='点我重置'>

6、下拉框

<select name = 'from'>
  <option value='0'>hei<option>
   option value='2'>bei<option>
  </select>

7、label标签可以与表单控件相关联，关联之后点击文字对应的表单就会获取焦点。
两种与label关联的方式
一，让label标签的for属性值等于表单控件的ID
二，将表单控件套在label标签的里面。

框架标签
在这里插入图片描述
常用字符实体

在这里插入图片描述更多字符实体

html 全局属性
在这里插入图片描述
Meta 元信息
在这里插入图片描述
在这里插入图片描述

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/1054981.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

自媒体时代软件行业的新奇怪商业模式

自媒体时代软件行业的新奇怪商业模式

前几天看一个公众号&#xff0c;介绍如何下载高质量的DEM数据&#xff0c;里面最吸引人是&#xff1a;博主大骂淘宝卖数据的无良商家&#xff0c;说他们的数据不值得买&#xff0c;赚的是黑心钱&#xff01; 本着好奇&#xff1a;我仔细阅读了一下数据的下载方式&#xff0c;非…
阅读更多...
Spark性能监测+集群配置

Spark性能监测+集群配置

spark-dashboard 参考链接 架构图 Spark官网中提供了一系列的接口可以查看任务运行时的各种指标 运行 卸载docker https://blog.csdn.net/wangerrong/article/details/126750198 sudo yum remove docker \docker-client \docker-client-latest \docker-common \docker-latest…
阅读更多...
CSS详细基础（一）选择器基础

CSS详细基础（一）选择器基础

本帖开始&#xff0c;我们来介绍CSS——即&#xff0c;层叠样式表~ 层叠样式表是一种用来表现HTML&#xff08;标准通用标记语言的一个应用&#xff09;或XML&#xff08;标准通用标记语言的一个子集&#xff09;等文件样式的计算机语言。简单的说&#xff0c;层叠就是对一个元…
阅读更多...
激光雷达：自动驾驶的眼睛

激光雷达：自动驾驶的眼睛

激光雷达&#xff1a;自动驾驶的眼睛 文章目录 引言激光雷达的原理自动驾驶中的应用激光雷达的优势激光雷达的挑战结论结论 2023星火培训【专项营】Apollo开发者社区布道师倾力打造&#xff0c;包含PnC、新感知等的全新专项课程上线了。理论与实践相结合&#xff0c;全新的PnC培…
阅读更多...
TRB爆仓分析，套利分析，行情判断！

TRB爆仓分析，套利分析，行情判断！

毫无疑问昨日TRB又成为涨幅榜的明星&#xff0c;总结下来&#xff0c;多军赚麻&#xff0c;空头爆仓&#xff0c;套利爽歪歪&#xff01; 先说风险最小的套利情况&#xff0c;这里两种套利都能实现收益。 现货与永续合约的资金费率套利年化资金费率达到惊人的3285%——DeFi的…
阅读更多...
熔断、限流、降级 —— SpringCloud Alibaba Sentinel

熔断、限流、降级 —— SpringCloud Alibaba Sentinel

Sentinel 简介 Sentinel 是阿里中间件团队开源的&#xff0c;面向分布式服务架构的高可用流量防护组件&#xff0c;主要以流量为切入点&#xff0c;从限流、流量整形、熔断降级、系统负载保护、热点防护等多个维度来帮助开发者保障微服务的稳定性 Sentinel 提供了两个服务组件…
阅读更多...
雷达实测数据的信噪比

雷达实测数据的信噪比

最近处理了一段时间的雷达实测数据&#xff0c;其中有一个很重要的指标就是信号的信噪比&#xff0c;信噪比定义很简单就是信号的功率除以噪声功率&#xff0c;一般取dB &#xff08;其中如果分子分母是功率的话&#xff0c;那么公式为10log10(X)&#xff0c;如果分子分母是幅度…
阅读更多...
ciscn_2019_s_9

ciscn_2019_s_9

ciscn_2019_s_9 Arch: i386-32-little RELRO: Partial RELRO Stack: No canary found NX: NX disabled PIE: No PIE (0x8048000) RWX: Has RWX segments32位&#xff0c;啥也没开&#xff0c;开心愉悦写shellcode int pwn() {char s[24]; // [esp8…
阅读更多...
【Django笔记】 登录功能

【Django笔记】 登录功能

1. post请求 sign/templates/index.html 其中 &#xff1a; <form method"post"> <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><title>Title</title></head> <bod…
阅读更多...
[Linux] 5.Linux虚拟机和Windows文件共享

[Linux] 5.Linux虚拟机和Windows文件共享

一、拖拽 如果安装了VMware Tool可以从Windows直接拖进Linux中共享文件&#xff0c;通过拖拽的方式可以把文件从Linux 传输到Windows 二、 文件共享 需要安装VMware Tool点击添加&#xff0c;选择Windows文件的路径&#xff0c;名称作为Linux访问的路径 cd什么都不加&#xff…
阅读更多...
进阶指针（四）—— 加强对指针，数组名，sizeof，strlen的理解

进阶指针（四）—— 加强对指针，数组名，sizeof，strlen的理解

✨博客主页&#xff1a;小钱编程成长记 &#x1f388;博客专栏&#xff1a;进阶C语言 &#x1f388;推荐相关博文&#xff1a;进阶C语言&#xff08;一&#xff09;、进阶C语言&#xff08;二&#xff09;、进阶C语言&#xff08;三&#xff09; 进阶指针&#xff08;四&#x…
阅读更多...
【数据结构】链表与LinkedList

【数据结构】链表与LinkedList

作者主页&#xff1a;paper jie 的博客 本文作者&#xff1a;大家好&#xff0c;我是paper jie&#xff0c;感谢你阅读本文&#xff0c;欢迎一建三连哦。 本文录入于《JAVA数据结构》专栏&#xff0c;本专栏是针对于大学生&#xff0c;编程小白精心打造的。笔者用重金(时间和精…
阅读更多...
Nodejs搭建本地http服务器，通过【内网穿透】实现远程访问

Nodejs搭建本地http服务器，通过【内网穿透】实现远程访问

目录 前言 1.Node.js下载 2.创建node服务器 3.打开node服务器 4.内网穿透实现远程访问 4.1安装cpolar 4.2创建隧道&#xff08;网站&#xff09; 4.3固定公网地址 前言 今天我们学习一个有意思的东西&#xff0c;那就是内网穿透。在此之前我有一些关于html、CSS和Java…
阅读更多...
c++---I/o操作

c++---I/o操作

5、文件操作 程序运行时产生的数据都属于临时数据&#xff0c;程序一旦运行结束都会被释放。 我们可以通过文件将数据持久化 C中对文件操作需要包含头文件 <fstream> 文件类型分为两种&#xff1a; 文本文件 - 文件以文本的ASCII码形式存储在计算机中二进制文件 - 文…
阅读更多...
机器学习之SGD, Batch, and Mini Batch的简单介绍

机器学习之SGD, Batch, and Mini Batch的简单介绍

文章目录 总述SGD(Stochastic Gradient Descent)(随机梯度下降&#xff09;Batch &#xff08;批量&#xff09;mini Batch (迷你批量&#xff09; 总述 SGD, Batch, and Mini Batch是可用于神经网络的监督学习计算权重更新的方案&#xff0c;即∆wij。 SGD(Stochastic Gradi…
阅读更多...
三等分功分器[波导]设计详细教程

三等分功分器[波导]设计详细教程

想必大家通过阅读相关文献可以发现三等分实现可以有很多不同的方法&#xff0c;这里采用的是先不等分再等分的方式&#xff0c;仅供参考。 主要指标 中心频率为280GHz&#xff0c;采用WR-3频段的标准波导&#xff0c;将2:1不等功率分配耦合器与3dB等功率分配耦合器级联&#…
阅读更多...
JUC——并发编程—第三部分

JUC——并发编程—第三部分

四大函数式接口(必须掌握) 函数式接口:只有一个方法的接口 FunctionalInterface public interface Runnable {public abstract void run(); }//简化编程模型&#xff0c;在新版本的框架底层大量应用 //foreach(消费者的函数式接口)Function接口(函数型接口) /*** Function 函…
阅读更多...
中睿天下参展2023海军工程大学首届网络安全文化周并发表主题演讲

中睿天下参展2023海军工程大学首届网络安全文化周并发表主题演讲

2023年9月3日至9月8日&#xff0c;海军工程大学首届网络安全文化周活动于武汉举办。本次活动以“守护蓝疆网安有我”为主题&#xff0c;设有特邀嘉宾前沿讲座、网络安全圆桌交流论坛、网络安全科技展、网络对抗实战竞技、网络安全保密视频创作和信息安全知识竞赛等系列活动。 海…
阅读更多...
聊聊网络编程中的粘包、拆包、半包、编解码

聊聊网络编程中的粘包、拆包、半包、编解码

聊聊网络编程中的粘包、拆包、半包、编解码 文章目录 1. 引言2. 粘包、拆包、半包现象解析2.1. 粘包现象2.2. 拆包现象2.3. 半包现象 3. 解决粘包、拆包、半包问题的方法4. netty 是如何解决解决粘包、拆包、半包问题参考文档 1. 引言 在网络编程中&#xff0c;TCP/IP 协议是…
阅读更多...
uboot启动流程-涉及s_init汇编函数

uboot启动流程-涉及s_init汇编函数

一. uboot启动涉及函数 本文简单分析uboot启动流程中&#xff0c;涉及的汇编函数&#xff1a; lowlevel_init函数调用的函数&#xff1a;s_init 函数 save_boot_params_ret函数调用的函数&#xff1a; _main 函数 本文继上一篇文章的学习&#xff0c;地址如下&#xff1a;…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023