欢迎来到哈小周的博客,点此进入原博客
对于不能正常预览的地方,可以在原博客中查看.
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
标签设置标题
文章浏览阅读1k次。通过使用ajax方法跨域请求是浏览器所不允许的,浏览器出于安全考虑是禁止的。警告信息如下:不过jQuery对跨域问题也有解决方案,使用jsonp的方式解决,方法如下:$.ajax({ async:false, url: 'http://www.mysite.com/demo.do', // 跨域URL ty..._nginx不停的xhr
文章浏览阅读2k次。关于在 Oracle 中配置 extproc 以访问 ST_Geometry,也就是我们所说的 使用空间SQL 的方法,官方文档链接如下。http://desktop.arcgis.com/zh-cn/arcmap/latest/manage-data/gdbs-in-oracle/configure-oracle-extproc.htm其实简单总结一下,主要就分为以下几个步骤。..._extproc
文章浏览阅读1.5w次。linux下没有上面的两个函数,需要使用函数 mbstowcs和wcstombsmbstowcs将多字节编码转换为宽字节编码wcstombs将宽字节编码转换为多字节编码这两个函数,转换过程中受到系统编码类型的影响,需要通过设置来设定转换前和转换后的编码类型。通过函数setlocale进行系统编码的设置。linux下输入命名locale -a查看系统支持的编码_linux c++ gbk->utf8
文章浏览阅读750次。今天准备从生产库向测试库进行数据导入,结果在imp导入的时候遇到“ IMP-00009:导出文件异常结束” 错误,google一下,发现可能有如下原因导致imp的数据太大,没有写buffer和commit两个数据库字符集不同从低版本exp的dmp文件,向高版本imp导出的dmp文件出错传输dmp文件时,文件损坏解决办法:imp时指定..._imp-00009导出文件异常结束
文章浏览阅读143次。当下是一个大数据的时代,各个行业都离不开数据的支持。因此,网络爬虫就应运而生。网络爬虫当下最为火热的是Python,Python开发爬虫相对简单,而且功能库相当完善,力压众多开发语言。本次教程我们爬取前程无忧的招聘信息来分析Python程序员需要掌握那些编程技术。首先在谷歌浏览器打开前程无忧的首页,按F12打开浏览器的开发者工具。浏览器开发者工具是用于捕捉网站的请求信息,通过分析请求信息可以了解请..._初级python程序员能力要求
文章浏览阅读7.6k次,点赞2次,收藏6次。@Service标注的bean,类名:ABDemoService查看源码后发现,原来是经过一个特殊处理:当类的名字是以两个或以上的大写字母开头的话,bean的名字会与类名保持一致public class AnnotationBeanNameGenerator implements BeanNameGenerator { private static final String C..._@service beanname
文章浏览阅读6.9w次,点赞73次,收藏463次。1.前序创建#include<stdio.h>#include<string.h>#include<stdlib.h>#include<malloc.h>#include<iostream>#include<stack>#include<queue>using namespace std;typed_二叉树的建立
文章浏览阅读7.1k次。在Asp.net上使用Excel导出功能,如果文件名出现中文,便会以乱码视之。 解决方法: fileName = HttpUtility.UrlEncode(fileName, System.Text.Encoding.UTF8);_asp.net utf8 导出中文字符乱码
文章浏览阅读2.1k次,点赞4次,收藏23次。第一次实验 词法分析实验报告设计思想词法分析的主要任务是根据文法的词汇表以及对应约定的编码进行一定的识别,找出文件中所有的合法的单词,并给出一定的信息作为最后的结果,用于后续语法分析程序的使用;本实验针对 PL/0 语言 的文法、词汇表编写一个词法分析程序,对于每个单词根据词汇表输出: (单词种类, 单词的值) 二元对。词汇表:种别编码单词符号助记符0beginb..._对pl/0作以下修改扩充。增加单词
文章浏览阅读773次。我在使用adb.exe时遇到了麻烦.我想使用与bash相同的adb.exe shell提示符,所以我决定更改默认的bash二进制文件(当然二进制文件是交叉编译的,一切都很完美)更改bash二进制文件遵循以下顺序> adb remount> adb push bash / system / bin /> adb shell> cd / system / bin> chm..._adb shell mv 权限
文章浏览阅读6.8k次,点赞12次,收藏125次。1. 单目相机标定引言相机标定已经研究多年,标定的算法可以分为基于摄影测量的标定和自标定。其中,应用最为广泛的还是张正友标定法。这是一种简单灵活、高鲁棒性、低成本的相机标定算法。仅需要一台相机和一块平面标定板构建相机标定系统,在标定过程中,相机拍摄多个角度下(至少两个角度,推荐10~20个角度)的标定板图像(相机和标定板都可以移动),即可对相机的内外参数进行标定。下面介绍张氏标定法(以下也这么称呼)的原理。原理相机模型和单应矩阵相机标定,就是对相机的内外参数进行计算的过程,从而得到物体到图像的投影_相机-投影仪标定
文章浏览阅读2.2k次。文章目录Wayland 架构Wayland 渲染Wayland的 硬件支持简 述: 翻译一篇关于和 wayland 有关的技术文章, 其英文标题为Wayland Architecture .Wayland 架构若是想要更好的理解 Wayland 架构及其与 X (X11 or X Window System) 结构;一种很好的方法是将事件从输入设备就开始跟踪, 查看期间所有的屏幕上出现的变化。这就是我们现在对 X 的理解。 内核是从一个输入设备中获取一个事件,并通过 evdev 输入_wayland