HTML基本使用
HTML初识
(Hyper Text Markup Language): 超文本标记语言
「HTML骨架格式」
<!-- 页面中最大的标签 根标签 -->
<html>
<!-- 头部标签 -->
<head>
<!-- 标题标签 -->
<title></title>
</head>
<!-- 文档的主体 -->
<body>
</body>
</html>
约定大小写:
- HTML标签名、类名、标签属性和大部分属性值统一用小写
HTML标签关系
- 嵌套关系父子级包含关系
- 并列关系兄弟级并列关系
- 如果两个标签之间的关系是嵌套关系,子元素最好缩进一个tab键的身位(一个tab是4个空格)。如果是并列关系,最好上下对齐。
基本标签和属性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
</body>
</html>
文档类型<!DOCTYPE >
用来说明你用的XHTML或者HTML是什么版本。<!DOCTYPE html>
告诉浏览器按照HTML5标准解析页面。
<html>
作用: <html>
标签用来告诉浏览器这个文档中包含的信息是用HTML编写的。
所有的网页的内容都需要编写到html标签中, 一个页面中html标签只能有一个。 html标签中有两个子标签head和body
<head>
作用: <head>
标签用来表示网页的元数据,帮助浏览器解析网页,head中的信息在浏览器中不可见。
<head>
标签作为html标签的子元素的出现,一 个网页中只能有一个head。
<meta>
<meta>
标签可提供有关页面的元信息,比如 针对搜索引擎和更新频度的描述和关键词。 <meta>
标签位于文档的头部,不包含任何内 容。
• 设置页面的字符集 – <meta charset="utf-8">
• 设置网页的描述 – <meta name="description" content="">
• 设置网页的关键字 – <meta name="keywords" content="">
• 请求的重定向 – <meta http-equiv="refresh" content="5;url=地址"/>
<title>
作用: <title>
标签表示网页的标题,一般会在网页的标题栏上显示。 – title标签中的文字,是页面优化的最重要因素。在 搜索引擎的搜索时最先看到的、最醒目的内容。
用法: 建议将title标签紧贴着head标签编写,这样搜索 引擎可以快速检索到标题标签。 – 网站中的多个页面的title也不应该重复,这样不利 于搜索隐藏检索。
<body>
作用: – 标签用来设置网页的主体,所有在页 面中能看到的内容都应该编写到body标签中。
用法: – body标签作为html的子标签使用。
lang
- 根据根据lang属性来设定不同语言的样式,或者字体
- 告诉搜索引擎做精确的识别
- 让语法检查程序做语言识别
- 帮助翻译工具做识别
- 帮助网页阅读程序做识别
字符集
(Character set)是多个字符的集合,计算机要准确的处理各种字符集文字,需要进行字符编码,以便计算机能够识别和存储各种文字
UTF-8是目前最常用的字符集编码方式,让 html 文件是以 UTF-8 编码保存的, 浏览器根据编码去解码对应的html内容。
<meta charset="UTF-8" />
常用标签
排版标签
主要和css搭配使用,显示网页结构的标签,是网页布局最常用的标签
- 标题标签
h
(h1~h6) - 段落标签
p
,可以把 HTML 文档分割为若干段落 - 水平线标签
hr
- 换行标签
br
- div和span标签: 是没有语义的,是我们网页布局最主要的2个盒子。
文本格式化标签
b
和strong
文字以粗体显示i
和em
文字以斜体显示s
和del
文字以加删除线显示u
和ins
文字以加下划线显示
区块标签
div
图像标签img
属性 | 值 | 说明 |
---|---|---|
src |
URL | 规定显示图像的 URL。必填 |
width |
规定图像的宽度。 | |
length |
规定图像的长度, | |
alt |
text | 图片加载失败时的替代文本 |
title |
text | 鼠标悬浮在图片上时的提示信息 |
注意:
图片大小一般只设置长或宽的一种,如设置长度时宽度可自适应变化
标签可以拥有多个属性,属性必须写在开始标签中,位于标签名后面。
属性之间不分先后顺序,标签名与属性、属性与属性之间均以空格分开。
采取 键值对 的格式 key="value" 的格式
超链接标签
<a href="跳转url" target="目标窗口的弹出方式">文本或图像</a>
属性 | 作用 |
---|---|
href | 用于指定链接目标的url地址,(必须属性)当为标签应用href属性时,它就具有了超链接的功能 |
target | 用于指定链接页面的打开方式,其取值有_self 和_blank 两种,其中_self为默认值,_blank为在新窗口中打开方式。 |
链接分类
外部链接 ,格式·
http://www.baidu.com
内部链接 ,直接链接内部页面名称即可,比如跳转首页
< a href="index.html">
空链接,如果当时没有确定链接目标时,通常将链接标签的href属性值定义为“#”(即
href="#"
),表示该链接暂时为一个空链接。<!-- 在开发中可以将#作为超链接的路径的展位符使用,点击可回到页面顶部 -->
<a href="#">回到顶部</a> <!-- 可以使用 javascript:; 来作为href的属性,此时点击这个超链接什么也不会发生,常用来获取当前行的数据并打开弹框 -->
<a href="javascript:;" @click="openDialog(scope.row)">打开弹框</a>
不仅可以创建文本超链接,在网页中各种网页元素,如图像、表格、音频、视频等都可以添加超链接。
锚点链接,通过创建锚点链接,用户能够快速定位到目标内容。
<!-- 使用相应的id名标注跳转目标的位置。 (找目标) -->
<h3 id="two">第2集</h3> <!-- 使用<a href="#id名">链接文本</a>创建链接文本(被点击的) -->
<a href="#two">
src 和 href 的区别
一句话概括: src 是引入资源的,href 是跳转url的
- src用于替换当前元素,href用于在当前文档和引用资源之间确立联系。
- src是source的缩写,指向外部资源的位置,指向的内容将会嵌入到文档中当前标签所在位置;在请求src资源时会将其指向的资源下载并应用到文档内,例如js脚本,img图片和frame等元素。当浏览器解析到该元素时,会暂停其他资源的下载和处理,直到将该资源加载、编译、执行完毕,图片和框架等元素也如此,类似于将所指向资源嵌入当前标签内。这也是为什么将js脚本放在底部而不是头部。
- href是Hypertext Reference的缩写,指向网络资源所在位置,建立和当前元素(锚点)或当前文档(链接)之间的链接。如果我们在文档中添加那么浏览器会识别该文档为css文件,就会并行下载资源并且不会停止对当前文档的处理。这也是为什么建议使用link方式来加载css,而不是使用@import方式。
表格
<table>
<tr>
<td>单元格内的文字</td>
...
</tr>
...
</table>
table
、tr
、td
,他们是创建表格的基本标签,缺一不可
table
用于定义一个表格标签。tr
标签 用于定义表格中的行,必须嵌套在 table标签中。td
用于定义表格中的单元格,必须嵌套在<tr></tr>
标签中。字母 td 指表格数据(table data),即数据单元格的内容,现在我们明白,表格最合适的地方就是用来存储数据的。td像一个容器,可以容纳所有的元素。
**表头单元格标签th **: 一般表头单元格位于表格的第一行或第一列,并且文本加粗居中,只需用表头标签<th></th>
替代相应的单元格标签<td></td>
即可。
表格属性(了解)
大多数表格属性在html5中已经废除使用,改用css样式
注意: border cellpadding cellspacing 默认为0
合并单元格
合并的顺序我们按照先上后下、先左后右的顺序 ,合并完之后需要删除多余的单元格。
- 跨行合并:
rowspan="合并单元格的个数"
- 跨列合并:
colspan="合并单元格的个数"
表格划分结构
- 页眉:
<thead>
- 主体:
<tbody>
- 页脚:
<tfoot>
注意:
- :用于定义表格的头部。用来放标题之类的东西。 内部必须拥有 标签!
- :用于定义表格的主体。放数据本体 。
- 放表格的脚注之类。
- 以上标签都是放到table标签中。
列表
无序列表ul
<ul></ul>
中只能嵌套<li></li>
,直接在<ul></ul>
标签中输入其他标签或者文字的做法是不被允许的。<li>与</li>
之间相当于一个容器,可以容纳所有元素。
<ul>
<li>列表项1</li>
<li>列表项2</li>
<li>列表项3</li>
......
</ul>
有序列表 ol
<ol>
标签中的type属性值为排序的序列号,不添加type属性时,有序列表默认从数字1开始排序,常用的type属性值分别为是1,a,A,i,I<ol reversed="reversed">
中的reversed属性能够让有序列表中的序列倒序排列。<ol start="3">
中的start属性值为数值型,有序列表中的第一个序列号将从3开始排列。
<ol type="A" start="2">
<li>列表一</li>
<li>列表二</li>
<li>列表三</li>
</ol>
自定义列表
定义列表常用于对术语或名词进行解释和描述,定义列表的列表项前没有任何项目符号
<dl>
<dt>名词1</dt>
<dd>名词1解释1</dd>
<dd>名词1解释2</dd>
...
<dt>名词2</dt>
<dd>名词2解释1</dd>
<dd>名词2解释2</dd>
...
</dl>
表单
在HTML中,一个完整的表单通常由表单控件(也称为表单元素)、提示信息和表单域3个部分构成。表单目的是为了收集用户信息。
- 表单控件:包含了具体的表单功能项,如单行文本输入框、密码输入框、复选框、提交按钮、重置按钮等。
- 提示信息:一个表单中通常还需要包含一些说明性的文字,提示用户进行填写和操作。
- 表单域:它相当于一个容器,用来容纳所有的表单控件和提示信息,可以通过他定义处理表单数据所用程序的url地址,以及数据提交到服务器的方法。如果不定义表单域,表单中的数据就无法传送到后台服务器。
表单域<form>
<form action="demo_form.php" method="get">
First name: <input type="text" name="fname"><br>
Last name: <input type="text" name="lname"><br>
<input type="submit" value="提交">
</form>
重要属性:
action
: 设置提交的服务器地址method
: 设置提交的方式 GET(默认值)或 POST
input 控件
input 输入的意思,为单标签,type属性设置不同的属性值用来指定不同的控件类型,除了type属性还有别的属性
下面通过一个简单的例子来介绍几个重要的属性
<form action="1.php" method="post">
用户名:<input type="text" name="username" value="birdy"> <br>
密码:<input type="password" name="password"> <br>
<input type="submit" value="注册">
</form>
密码输入123,点击注册按钮后,传给服务器参数如下
username=birdy
password=123
由此可见,type属性定义输入框的类型,name属性定义传递给服务器的参数名,而value属性则是参数的值
type属性
type 属性规定要显示的 input元素的类型。
常见属性
name属性
name表单控件的名字, 后台可以通过这个name属性定位到是哪一个控件。 页面中的表单很多,name主要作用就是用于区别不同的表单控件。
- name属性值是我们自己定义的。
- 单选框radio 如果是一组,我们必须给他们命名相同的名字name
<input type="radio" name="sex" />男
<input type="radio" name="sex" />女
随机推荐
- PHP ASCII 排序方法
//自定义ascii排序function ASCII($params = array()){ if(!empty($params)){ $p = ksort($params); if($p){ $st ...
- CF1137F-Matches Are Not a Child‘s Play【LCT】
正题 题目链接:https://www.luogu.com.cn/problem/CF1137F 题目大意 给出\(n\)个点的一棵树,第\(i\)个点权值为\(i\). 一棵树的删除序列定义为每次删 ...
- 在modal中的datetimepicker插件BUG修复
前言:因为在模态框用到datetimepicker这一日期控件,而选中日期时,会触发模态框的再次打开,导致上面表单选的值会重新加载 解决办法: 用stopPropagation() 方法阻止事件传播, ...
- 飞猪基于 Serverless 的云+端实践与思考
作者 | 王恒飞(承荫) 本文整理自飞猪旅行前端技术专家--王恒飞(承荫)在[阿里云 Serverless Developer Meetup 上海站]上的分享.点击查看直播回放:https://dev ...
- ApacheCon 首次亚洲大会火热来袭,SphereEx 邀您共赴年度盛会!
ApacheCon 是 Apache 软件基金会(ASF)的官方全球系列大会.作为久负盛名的开源盛宴,ApacheCon 在开源界备受关注,也是开源运动早期的知名活动之一. ApacheCon 每年举 ...
- Tracking Analyst Tools(Tracking Analyst 工具)
Tracking Analyst 工具 # Process: 创建追踪图层 arcpy.MakeTrackingLayer_ta("", 输出图层, "NO_TIME_Z ...
- $\text {FWT}$学习笔记
\(\text {FWT}\) 学习笔记 正常项的\(\text {FWT}\) 在\(\text {OI}\)中,我们经常会碰到这种问题: 给出一个长度为\(n\)的序列\(a_{1,2,...,n ...
- 洛谷4172 WC2006水管局长(LCT维护最小生成树)
这个题和魔法森林感觉有很相近的地方啊 同样也是维护一个类似最大边权最小的生成树 但是不同的是,这个题是有\(cut\)和询问,两种操作.... 这可如何是好啊? 我们不妨倒着来考虑,假设所有要\(cu ...
- Eureka使用总结
关于Eureka: 提供基于 REST的服务,在集群中主要用于服务管理.使用该框架,可以将业务组件注册到Eureka容器中,这些组件可进行集群部署,Eureka主要维护这些服务的列表并自动检查他们的状 ...
- 解决npm : 无法加载文件 D:\Code\renren-fast-vue\node_modules\.bin\npm.ps1,因为在......
解决这个问题: 看看错误信息: npm : 无法加载文件 D:\DevPath\nodejs\npm.ps1,因为在此系统上禁止运行脚本.有关详细信息,请参阅 https:/go.microsoft. ...