欢迎来到哈小周的博客,点此进入原博客
对于不能正常预览的地方,可以在原博客中查看.
C=>Client,B=>browser,S=>server
什么是HTML?
全称:Hyper Text Markup Language,超文本标记语言
超文本:指的是网页中可以包含图片,链接,音频,视频等多媒体内容
标记:文本要变为超文本,就需要用到各种标记符号
语言:每一个标记的写法都是有规定的,这种规定就是一种语言
相关国际组织
1.IETF:Internet Engineering Task Force,互联网工程任务组.创建于1985年,是一个开放的国际社区,致力于通过协商和合作,促进互联网的技术发展和标准化,以及解决互联网的技术问题
2.W3C:World Wide Web Consortium,万维网联盟.创建于1994年,是目前Web技术领域,最权威的标准化组织,致力于推动Web技术的发展和标准化,以及解决Web技术的问题
3.WHATWG:Web Hypertext Application Technology Working Group,Web超文本应用技术工作组.创建于2004年,是一个开放的社区,致力于推动Web技术的发展和标准化,以及解决Web技术的问题
HTML的发展历程
<marquee>欢迎来到哈晓周</marquee>
<img src="https://hitszzhou.oss-cn-shenzhen.aliyuncs.com/assets202402242255034.png" alt="哈晓周">
<标签名 属性名="属性值">内容</标签名>
<标签名 属性名="属性值"/>
<input/>
- 想要呈现的内容写在body标签中
- head标签中写一些网页的基本信息,例如:标题,字符集,引入外部文件等,不会在网页中显示
- head标签中的title标签中写网页的标题,会显示在浏览器的标题栏中
<html>
<head>
<title>网页标题</title>
</head>
<body>
......
</body>
</html>
<!-- 注释内容 -->
<!-- 注释1<!-- 注释2 -->注释1 -->
作用:告诉浏览器当前网页是用哪个版本的HTML编写的
写法:
旧版写法:要依网页所用的HTML版本而定,写法很多.具体参考:W3C官网-文档声明
新版写法:
<!DOCTYPE html>
或
<!DOCTYPE HTML>
或
<!doctype html>
<head>
<meta charset="UTF-8"/>
</head>
<html lang="zh-CN">
- 第一种写法(推荐):语言代码-国家代码,例如:
- zh-CN:中文-中国
- zh-TW:中文-台湾
- zh:中文
- en-US:英文-美国
- en-GB:英文-英国
- 第二种写法:只写语言代码,例如:
- zh-Hans:中文-简体
- zh-Hant:中文-繁体
- W3School提供了一个语言代码参考和国家代码参考
- W3C官网上的说明:“Language tags in HTML”
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8"/>
<title>我是该网页的标题</title>
</head>
<body>
...
</body>
</html>
输入!,然后回车,可以自动生成HTML标准结构
配置VScode的内置插件emmet,可以对生成结构属性进行定制:
点击左下角的设置按钮
找到extensions中的emmet配置
如图方式添加一个"item-value"属性:
在存放代码的文件夹中,存放一个’.ico’图片,可以配置网页的图标
标签名 | 标签含义 | 单/双标签 |
---|---|---|
<h1>~<h6> |
标题标签 | 双标签 |
<p> |
段落标签 | 双标签 |
<div> |
块级标签,没有任何含义 | 双标签 |
标签名 | 标签含义 | 单/双标签 |
---|---|---|
em |
要着重强调的内容 | 双标签 |
strong |
更加着重强调的内容 | 双标签 |
span |
没有特定含义的标签 | 双标签 |
a |
超链接标签 | 双标签 |
cite |
作品标题 | 双标签 |
dfn |
特殊术语或专有名词 | 双标签 |
del |
被删除的内容 | 双标签 |
ins |
被插入的内容 | 双标签 |
sub |
下标 | 双标签 |
sup |
上标 | 双标签 |
code |
一段代码 | 双标签 |
samp |
从正常的上下文中,将某些内容提取出来 | 双标签 |
kbd |
键盘输入 | 双标签 |
var |
变量 | 双标签 |
<img src="图片路径" alt="图片描述" width="图片宽度" height="图片高度"/>
作用:用于在网页中跳转到其他网页或者其他位置
标签名 | 标签语义 | 常用属性 | 单/双标签 |
---|---|---|---|
<a> |
超链接 | href : 指定要跳转到的具体目标 target : 控制跳转时如何打开页面,常用值有_blank id : 用于锚点跳转,指定跳转目标的id name :元素的名字,写在a 标签中,用于锚点跳转 |
双标签 |
<!--跳转到其他页面-->
<a href="http://www.baidu.com">百度</a>
<!--跳转本地网页-->
<a href="./10_HTML排版标签.html" target="_self">看排版标签</a>
<!-- 浏览器能直接打开的文件 -->
<a href="./resource/自拍.jpg">看自拍</a>
<a href="./resource/小电影.mp4">看小电影</a>
<a href="./resource/小姐姐.gif">看小姐姐</a>
<a href="./resource/如何一夜暴富.pdf">点我一夜暴富</a>
<!-- 浏览器不能打开的文件,会自动触发下载 -->
<a href="./resource/内部资源.zip">内部资源</a>
<!-- 强制触发下载 -->
<a href="./resource/小电影.mp4" download="电影片段.mp4">下载电影</a>
注意1:若浏览器不能打开文件,则会触发自动下载
注意2:若想强制触发下载,则需要添加download
属性
<a name="test1"></a>
<h2 id="test2">这是一个位置</h2>
跳转锚点
<!--跳转到test1-->
<a href="#test1">跳转到test1</a>
<!--跳转到test2-->
<a href="#test2">跳转到test2</a>
<!--跳转到页面顶部-->
<a href="#">回到顶部</a>
<!--跳转到页面底部-->
<a href="#bottom">跳转到底部</a>
<!--跳转到其他页面的锚点-->
<a href="./10_HTML排版标签.html#test1">跳转到排版标签页面的test1</a>
a
标签的href属性,可以唤起指定的应用,例如:<!--唤起电话应用-->
<a href="tel:10086">联系客服</a>
<!--唤起短信应用-->
<a href="sms:10086">联系客服</a>
<!--唤起邮件应用-->
<a href="mailto:[email protected]">联系博主</a>
<ul>
<li>列表项1</li>
<li>列表项2</li>
<li>列表项3</li>
</ul>
<ol>
<li>列表项1</li>
<li>列表项2</li>
<li>列表项3</li>
</ol>
<dl>
<dt>术语1</dt>
<dd>解释1</dd>
<dt>术语2</dt>
<dd>解释2</dd>
<dt>术语3</dt>
<dd>解释3</dd>
</dl>
dl:definition list,定义列表
dt:definition term,定义术语
dd:definition description,定义描述
table
:用于创建表格caption
:用于创建表格标题thead
:用于创建表格头部tbody
:用于创建表格主体tfoot
:用于创建表格脚部tr
:用于创建表格行th
,td
:用于创建表格单元(表格头部中用th
,表格主体中用td
,h代表header,d代表data)标签名 | 标签语义 | 常用属性 | 单/双标签 |
---|---|---|---|
table |
表格 | width :设置表格宽度height :设置表格高度border :设置表格边框cellpadding :设置单元格内边距cellspacing :设置单元格间距 |
双标签 |
thead |
表格头部 | align :设置表格头部的水平对齐方式valign :设置表格头部的垂直对齐方式 |
双标签 |
tbody |
表格主体 | align :设置表格主体的水平对齐方式valign :设置表格主体的垂直对齐方式 |
双标签 |
tr |
表格行 | align :设置表格行的水平对齐方式valign :设置表格行的垂直对齐方式 |
双标签 |
tfoot |
表格脚注 | align :设置表格脚注的水平对齐方式valign :设置表格脚注的垂直对齐方式 |
双标签 |
td |
普通单元格 | colspan :设置单元格横跨的列数rowspan :设置单元格横跨的行数 |
双标签 |
th |
表头单元格 | colspan :设置单元格横跨的列数rowspan :设置单元格横跨的行数 |
双标签 |
标签名 | 标签含义 | 单/双标签 |
---|---|---|
hr |
分割线 | 单标签 |
br |
换行 | 单标签 |
pre |
预格式化文本(按原文显示) | 双标签 |
概念: 一个交互式区域,用于收集用户的输入信息
标签名 | 标签含义 | 常用属性 | 单/双 标签 |
---|---|---|---|
form |
表单 | action :表单提交的地址method :表单提交的方式enctype :表单提交的数据类型 |
双标签 |
input |
输入框 | type :输入框的类型name :输入框的名字value :输入框的值placeholder :输入框的提示信息 |
单标签 |
button |
按钮 | type :按钮的类型 |
双标签 |
<input type="text">
常用属性如下:
name
:数据的名称
value
:输入数据的默认值
maxlength
:输入数据的最大长度
<input type="password">
常用属性如下:
name
:数据的名称
value
:输入数据的默认值(一般不用)
maxlength
:输入数据的最大长度
{% tabs 分栏 %}
<input type="radio" name="***" value="***">**
name
: 数据的名称,想要实现单选的效果,必须保证同一组单选框的name属性值相同value
: 提交的数据值选中状态
: 让该按钮默认选中 <input type="radio" name="sex" value="male"> 男
<input type="radio" name="sex" value="female">女
男
女
{% endtabs %}
{% tabs 分栏 %}
<input type="checkbox" name="" value=""> 名字
name
: 数据的名称,想要实现单选的效果,必须保证同一组单选框的name属性值相同value
: 提交的数据值选中状态
: 让该复选框默认选中 <input type="checkbox" name="hobby" value="smoke" checked>抽烟
<input type="checkbox" name="hobby" value="drink">喝酒
<input type="checkbox" name="hobby" value="perm">烫头
抽烟
喝酒
烫头
{% endtabs %}
作用:用于存放一些不需要用户输入的数据,例如:用户id,用户token等
{% tabs 分栏 %}
<input type="hidden" name="" value="">
name
:数据的名称value
:数据的值<input type="hidden" name="id" value="123">
{% endtabs %}
{% tabs 分栏 %}
<!--确认按钮的第一种写法-->
<button>确认</button>
<!--确认按钮的第二种写法-->
<input type="submit" value="确认">
value
:数据的值type
:button的type属性值,默认为submit <!--确认按钮的第一种写法-->
<button>确认</button>
<!--确认按钮的第二种写法-->
<input type="submit" value="确认">
确认
{% endtabs %}
{% tabs 分栏 %}
<!--重置按钮_第一种-->
<button type="reset">重置</button>
<!--重置按钮_第二种-->
<input type="reset" value="重置">
value
:数据的值,等效于button的内容type
:默认为reset
<button type="reset">重置</button>
<!--重置按钮_第二种-->
<input type="reset" value="重置">
重置
{% endtabs %}
{% tabs 分栏 %}
<!--普通按钮_第一种-->
<button type="button">普通按钮</button>
<!--普通按钮_第二种-->
<input type="button" value="普通按钮">
value
:数据的值,等效于button的内容type
:默认为button
<!--普通按钮_第一种-->
<button type="button">普通按钮</button>
<!--普通按钮_第二种-->
<input type="button" value="普通按钮">
普通按钮
{% endtabs %}
{% tabs 分栏 %}
<textarea name="" id="" cols="" rows=""></textarea>
name
:数据的名称id
:数据的idcols
:文本域的列数rows
:文本域的行数<textarea name="content" id="content" cols="30" rows="10"></textarea>
{% endtabs %}
{% tabs 分栏 %}
<select name="" id="">
<option value="">选项1</option>
<option value="">选项2</option>
<option value="">选项3</option>
</select>
name
:数据的名称id
:数据的idvalue
:数据的值selected
:默认选中disabled
:禁用<select name="city" id="city">
<option value="bj">北京</option>
<option value="sh">上海</option>
<option value="gz">广州</option>
<option value="sz" selected>深圳</option>
<option value="cd" disabled>成都</option>
</select>
北京 上海 广州 深圳 成都 {% endtabs %}
label
标签可以与表单控件关联,点击文字后,与之相对应的表单控件就会获取焦点.两种写法:
label
的for属性值等于表单控件的id值label
标签中fieldset
标签:用于将表单内的相关元素进行分组
legend
标签:用于为fieldset
标签设置标题
文章浏览阅读3.2k次。本文研究全球与中国市场分布式光纤传感器的发展现状及未来发展趋势,分别从生产和消费的角度分析分布式光纤传感器的主要生产地区、主要消费地区以及主要的生产商。重点分析全球与中国市场的主要厂商产品特点、产品规格、不同规格产品的价格、产量、产值及全球和中国市场主要生产商的市场份额。主要生产商包括:FISO TechnologiesBrugg KabelSensor HighwayOmnisensAFL GlobalQinetiQ GroupLockheed MartinOSENSA Innovati_预计2026年中国分布式传感器市场规模有多大
文章浏览阅读1.1k次,点赞2次,收藏12次。常用组合逻辑电路结构——为IC设计的延时估计铺垫学习目的:估计模块间的delay,确保写的代码的timing 综合能给到多少HZ,以满足需求!_基4布斯算法代码
文章浏览阅读3.3k次,点赞3次,收藏5次。OpenAI Manager助手(基于SpringBoot和Vue)_chatgpt网页版
文章浏览阅读2.2k次。USACO自1992年举办,到目前为止已经举办了27届,目的是为了帮助美国信息学国家队选拔IOI的队员,目前逐渐发展为全球热门的线上赛事,成为美国大学申请条件下,含金量相当高的官方竞赛。USACO的比赛成绩可以助力计算机专业留学,越来越多的学生进入了康奈尔,麻省理工,普林斯顿,哈佛和耶鲁等大学,这些同学的共同点是他们都参加了美国计算机科学竞赛(USACO),并且取得过非常好的成绩。适合参赛人群USACO适合国内在读学生有意向申请美国大学的或者想锻炼自己编程能力的同学,高三学生也可以参加12月的第_usaco可以多次提交吗
文章浏览阅读394次。1.1 存储程序1.2 创建存储过程1.3 创建自定义函数1.3.1 示例1.4 自定义函数和存储过程的区别1.5 变量的使用1.6 定义条件和处理程序1.6.1 定义条件1.6.1.1 示例1.6.2 定义处理程序1.6.2.1 示例1.7 光标的使用1.7.1 声明光标1.7.2 打开光标1.7.3 使用光标1.7.4 关闭光标1.8 流程控制的使用1.8.1 IF语句1.8.2 CASE语句1.8.3 LOOP语句1.8.4 LEAVE语句1.8.5 ITERATE语句1.8.6 REPEAT语句。_mysql自定义函数和存储过程
文章浏览阅读188次。半导体二极管——集成电路最小组成单元。_本征半导体电流为0
文章浏览阅读2.8k次,点赞3次,收藏18次。游戏水面特效实现方式太多。咱们这边介绍的是一最简单的UV动画(无顶点位移),整个mesh由4个顶点构成。实现了水面效果(左图),不动代码稍微修改下参数和贴图可以实现岩浆效果(右图)。有要思路是1,uv按时间去做正弦波移动2,在1的基础上加个凹凸图混合uv3,在1、2的基础上加个水流方向4,加上对雾效的支持,如没必要请自行删除雾效代码(把包含fog的几行代码删除)S..._unity 岩浆shader
文章浏览阅读5k次。广义线性模型是线性模型的扩展,它通过连接函数建立响应变量的数学期望值与线性组合的预测变量之间的关系。广义线性模型拟合的形式为:其中g(μY)是条件均值的函数(称为连接函数)。另外,你可放松Y为正态分布的假设,改为Y 服从指数分布族中的一种分布即可。设定好连接函数和概率分布后,便可以通过最大似然估计的多次迭代推导出各参数值。在大部分情况下,线性模型就可以通过一系列连续型或类别型预测变量来预测正态分布的响应变量的工作。但是,有时候我们要进行非正态因变量的分析,例如:(1)类别型.._广义线性回归模型
文章浏览阅读69次。环境保护、 保护地球、 校园环保、垃圾分类、绿色家园、等网站的设计与制作。 总结了一些学生网页制作的经验:一般的网页需要融入以下知识点:div+css布局、浮动、定位、高级css、表格、表单及验证、js轮播图、音频 视频 Flash的应用、ul li、下拉导航栏、鼠标划过效果等知识点,网页的风格主题也很全面:如爱好、风景、校园、美食、动漫、游戏、咖啡、音乐、家乡、电影、名人、商城以及个人主页等主题,学生、新手可参考下方页面的布局和设计和HTML源码(有用点赞△) 一套A+的网_垃圾分类网页设计目标怎么写
文章浏览阅读614次,点赞7次,收藏11次。之前找到一个修改 exe 中 DLL地址 的方法, 不太好使,虽然能正确启动, 但无法改变 exe 的工作目录,这就影响了.Net 中很多获取 exe 执行目录来拼接的地址 ( 相对路径 ),比如 wwwroot 和 代码中相对目录还有一些复制到目录的普通文件 等等,它们的地址都会指向原来 exe 的目录, 而不是自定义的 “lib” 目录,根本原因就是没有修改 exe 的工作目录这次来搞一个启动程序,把 .net 的所有东西都放在一个文件夹,在文件夹同级的目录制作一个 exe._.net dll 全局目录
文章浏览阅读1.5k次。本文为转载,原博客地址:http://blog.csdn.net/hujingshuang/article/details/46910259简介 BRIEF是2010年的一篇名为《BRIEF:Binary Robust Independent Elementary Features》的文章中提出,BRIEF是对已检测到的特征点进行描述,它是一种二进制编码的描述子,摈弃了利用区域灰度..._breif description calculation 特征点
文章浏览阅读4.1k次,点赞21次,收藏79次。本文是《基于SpringBoot的房屋租赁管理系统》的配套原创说明文档,可以给应届毕业生提供格式撰写参考,也可以给开发类似系统的朋友们提供功能业务设计思路。_基于spring boot的房屋租赁系统论文