HTML快速入门-阿里云开发者社区

开发者社区> ggbond233> 正文

HTML快速入门

简介: Hyper Text Markup Language 超文本标记语言
+关注继续查看

HTML的概念

  • Hyper Text Markup Language 超文本标记语言
  • 超文本:超级文本,比普通文本厉害于可以存放图片,音频,视频等
  • 标记语言:由标签构成的语言,<标签名称>,如HTML,XML
  • 标记语言不是编程语言,因为没有逻辑性,只要写上,就会无脑执行

HTML的语法

  • HTML文档后缀名:xxx.html或xxx.htm
  • 标签分为:
    1. 围堵标签:有开始标签和结束标签。如<html> </html>
    2. 自闭和标签:开始标签和结束标签在一起。如<br/>
  • 标签与标签可以嵌套,但要正确嵌套。如

<a><b></b></a><!--正确嵌套-->

<a><b></a></b><!--错误嵌套-->

  • 在开始标签中可以定义属性,属性由键值对构成,值需要用引号(单双都可以)引起来
  • HTML的标签不区分大小写,如<br/>与<BR/>效果一样,但建议使用小写

HTML中的标签

文件标签
  1. <html>:根标签。所有标签都在它里面
  2. <head>:头标签。用于指定HTML文档的一些属性;引入外部资源(CSS,js)
  3. <title>:标题标签。浏览器标签页上的文字
  4. <body>:体标签。网页内容
  5. <!DOCTYPE html>:HTML5中定义该文档是HTML文档

<!--这是用idea默认生成的HTML文件-->

<!DOCTYPE html>

<html lang="en">

<head>

   <!--meta标签用来指定字符集,utf-8才支持中文-->

   <meta charset="UTF-8">

   <title>Title</title>

</head>

<body>

</body>

</html>

文本标签
  1. <h1> to <h5>:标题标签(headline)。h1->h6字体逐渐变小,自带换行效果
  2. <p>:段落标签(paragraph)
  3. <br>:换行标签(blank row)
  4. <hr>:展示一条水平线(horizontal route);有属性color(颜色),size(高度),width(宽度),align(对齐方式)
  5. <b>:加粗(bold)
  6. <i>:斜体(italic)

color属性的定义
  1. 英文单词:red,green,blue;能得到的颜色很少,不推荐使用
  2. rgb(值1,值2,值3):值得范围为0~255;例如rgb(0,0,255)为蓝色;很多浏览器已不支持,不推荐使用
  3. #值1值2值3:值得范围为00~FF;例如#0000FF为蓝色,推荐使用
width属性的定义
  1. 数值:width="20",数值的单位,默认是px(像素)
  2. 数值%:占比相对于父元素的比例

<hr color="#0000FF" width="50%"/>

图片标签img

常用属性:

  1. src:图片的路径(一般为相对路径)
  2. alt:当图片加载失败,用alt的值进行替换;alternate有备用的意思

<img src="image/DominusNoob.jpg" alt="有备无患"/>

<!--相对路径:以.开头的路径

           ./代表当前路径

           ../代表上一级路径

           如果啥都没写,默认是当前路径./

           即./image/DominusNoob.jpg和image/DominusNoob.jpg路径一样-->

列表标签
有序标签<ol>

<!--            有序列表 ol-->

       周末做什么?

       <ol type="1" start="5">

<!--            type定义有序列表类型,start定义起始位置-->

           <li>吃饭</li>

           <li>睡觉</li>

           <li>打豆豆</li>

<!--            5.吃饭-->

<!--            6.睡觉-->

<!--            7.打豆豆-->

       </ol>

无序标签<ul>

<!--            无序列表 ul-->

       周末做什么?

       <ul>

           <li>吃饭</li>

           <li>睡觉</li>

           <li>打豆豆</li>

<!--            · 吃饭-->

<!--            · 睡觉-->

<!--            · 打豆豆-->

       </ul>

链接标签<a>

超链接功能:

  1. 可以被点击
  2. 点击后跳转到href指定的url

如何实现可以被点击,但不跳转页面?

实现:href="javascript:;"

上面的代码很常用,可以像按钮一样绑定单击事件,而不跳转页面

<a href="https://www.baidu.cn" target="_self">我是超链接</a>

<!--    href:指定访问资源的URL(统一资源定位符)-->

<!--    target:指定链接的网页在哪里打开

                _self:默认值,当前网页打开

                _blank:新空白页面打开        -->

块标签div和span

div与span没有任何效果,与CSS结合使用,白纸才好画画

div

每个div占满一行。块级标签

span

有多少文字占据多少空间,包裹内容。行内标签,内联标签

语义化标签

HTML5中为了提高程序的可读性,提供了一些标签,也要与CSS结合使用

  1. <header>
  2. <footer>
表格标签
  • table:定义表格
    1. width:宽度
    2. border:边框
    3. cellpadding:定义内容和单元格的距离
    4. cellspacing:定义单元格之间的距离。如果指定为0,则单元格的线会合为一条
    5. bgcolor:背景色
    6. align:对齐方式
  • tr:table row(表格行)的缩写,定义行
  • td:table data(表格数据)的缩写,定义普通单元格
    colspan:合并列
    rowspan:合并行
  • th:table head(表格头)的缩写,定义表头单元格
  • caption:表格标题
  • thead:表示表格的头部分(下面三个和语义化标签类似,但HTML5之前已经存在)
  • tbody:表示表格的体部分
  • tfoot:表示表格的脚部分

      <table width="20%" border="1" cellpadding="0" cellspacing="0" bgcolor="#faebd7" align="center">

          <caption>学生信息表</caption>

          <tr align="center">

<!--               合并两行-->

              <th rowspan="2">id</th>

              <th>姓名</th>

              <th>年龄</th>

          </tr>

          <tr align="left">

              <td>Dominus</td>

              <td>20</td>

          </tr>

          <tr align="right">

              <td>2</td>

              <td colspan="2">Noob</td>

<!--               合并两列-->

          </tr>

      </table>

表单标签
form标签

用来定义表单的。可以定义一个范围,范围代表采集用户数据的范围

属性

  • action:指定提交数据的url
  • method:指定提交方式分类:一共7种,2种比较常用
    • get:
      1. 请求参数会在地址栏中显示。会封装到请求行中
      2. 请求参数的长度有限制
      3. 不太安全
    • post
      1. 请求参数会封装在请求体中
      2. 请求参数长度无限制
      3. 较安全

表单项中的数据要想被提交,必须指定input标签的name属性

<form action="#">

    用户名<input name="user"><br>

    密码<input name="pass"><br>

    <input type="submit">

</form>

表单项标签
  • input
    • type=" ":通过改变type属性的值,进而改变输入框的类型
      • text:文本输入框(默认值)
      • password:密码框
      • radio:单选框
        1. 要想让多个单选框实现单选效果,则多个单选框的name属性值必须一样
        2. 一般会给每一个单选框提供value属性,指定其被选中后提交的值
        3. checked属性,可以指定默认值
      • checkbox:复选框
        checked属性,可以指定默认值
      • file:文件选择框
      • hidden:隐藏域。不会显示在网页上,但会被提交,用来隐藏信息
      • submit:提交表单的按钮
      • button:按钮,不能提交表单,与js结合使用
      • image:图片按钮,可以提交表单。src属性指定图片路径
      • color:取色器,会被提交
    • placeholder:指定输入框的默认内容,当输入框内容发生变化,会自动清空
    • value:为 input 元素设定值。输入框为默认值,按钮为按钮的名字
    • name:规定 input 元素的名称。(name=value即为表单提交的键值对)
  • label:指定输入项的内容类型。label的for属性为对应的input的id值,如果对应,点击label区域的文字,会让input输入框获取焦点
  • select:下拉列表
    • option:指定列表项
      如果设置value属性,则value的值会替代选项文字被提交
      selected属性指定默认选中项
  • textarea标签:文本域,类似记事本
    1. cols属性:指定列数,每一行多少字符
    2. rows属性:指定行数

<form action="/demo4" method="post">

    <input type="text" placeholder="请输入用户名" name="username"><br>

    <input type="text" placeholder="请输入密码" name="password"><br>

    <input type="checkbox" name="hobby" value="game">游戏

    <input type="checkbox" name="hobby" value="music">音乐

    <br>

    <input type="submit" value="注册">

</form>

HTML字符实体

HTML 中的预留字符必须被替换为字符实体。

在 HTML 中,某些字符是预留的。

在 HTML 中不能使用小于号(<)和大于号(>),这是因为浏览器会误认为它们是标签。

如果希望正确地显示预留字符,我们必须在 HTML 源代码中使用字符实体(character entities)。

字符实体类似这样:

&entity_name;


或者


&#entity_number;

提示:使用实体名而不是数字的好处是,名称易于记忆。不过坏处是,浏览器也许并不支持所有实体名称(对实体数字的支持却很好)。

不间断空格(non-breaking space)

HTML 中的常用字符实体是不间断空格( )。

浏览器总是会截短 HTML 页面中的空格。如果您在文本中写 10 个空格,在显示该页面之前,浏览器会删除它们中的 9 个。如需在页面中增加空格的数量,您需要使用 &nbsp; 字符实体。

HTML 中有用的字符实体

注释:实体名称对大小写敏感!

显示结果描述实体名称实体编号
空格&nbsp; 
<小于号&lt;<
>大于号&gt;>
&和号&amp;&
"引号&quot;"
'撇号&apos; (IE不支持)'
分(cent)&cent;¢
£镑(pound)&pound;£
¥元(yen)&yen;¥
欧元(euro)&euro;
§小节&sect;§
©版权(copyright)&copy;©
®注册商标&reg;®
商标&trade;
×乘号&times;×
÷除号&divide;÷

如需完整的实体符号参考,请访问我们的 HTML 实体符号参考手册


版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
使用OpenApi弹性释放和设置云服务器ECS释放
云服务器ECS的一个重要特性就是按需创建资源。您可以在业务高峰期按需弹性的自定义规则进行资源创建,在完成业务计算的时候释放资源。本篇将提供几个Tips帮助您更加容易和自动化的完成云服务器的释放和弹性设置。
8194 0
阿里云服务器安全组设置内网互通的方法
虽然0.0.0.0/0使用非常方便,但是发现很多同学使用它来做内网互通,这是有安全风险的,实例有可能会在经典网络被内网IP访问到。下面介绍一下四种安全的内网互联设置方法。 购买前请先:领取阿里云幸运券,有很多优惠,可到下文中领取。
9497 0
windows server 2008阿里云ECS服务器安全设置
最近我们Sinesafe安全公司在为客户使用阿里云ecs服务器做安全的过程中,发现服务器基础安全性都没有做。为了为站长们提供更加有效的安全基础解决方案,我们Sinesafe将对阿里云服务器win2008 系统进行基础安全部署实战过程! 比较重要的几部分 1.
5526 0
如何设置阿里云服务器安全组?阿里云安全组规则详细解说
阿里云安全组设置详细图文教程(收藏起来) 阿里云服务器安全组设置规则分享,阿里云服务器安全组如何放行端口设置教程。阿里云会要求客户设置安全组,如果不设置,阿里云会指定默认的安全组。那么,这个安全组是什么呢?顾名思义,就是为了服务器安全设置的。安全组其实就是一个虚拟的防火墙,可以让用户从端口、IP的维度来筛选对应服务器的访问者,从而形成一个云上的安全域。
4207 0
阿里云ECS云服务器初始化设置教程方法
阿里云ECS云服务器初始化是指将云服务器系统恢复到最初状态的过程,阿里云的服务器初始化是通过更换系统盘来实现的,是免费的,阿里云百科网分享服务器初始化教程: 服务器初始化教程方法 本文的服务器初始化是指将ECS云服务器系统恢复到最初状态,服务器中的数据也会被清空,所以初始化之前一定要先备份好。
3592 0
阿里云服务器ECS登录用户名是什么?系统不同默认账号也不同
阿里云服务器Windows系统默认用户名administrator,Linux镜像服务器用户名root
1160 0
阿里云服务器如何登录?阿里云服务器的三种登录方法
购买阿里云ECS云服务器后如何登录?场景不同,云吞铺子总结大概有三种登录方式: 登录到ECS云服务器控制台 在ECS云服务器控制台用户可以更改密码、更换系统盘、创建快照、配置安全组等操作如何登录ECS云服务器控制台? 1、先登录到阿里云ECS服务器控制台 2、点击顶部的“控制台” 3、通过左侧栏,切换到“云服务器ECS”即可,如下图所示 通过ECS控制台的远程连接来登录到云服务器 阿里云ECS云服务器自带远程连接功能,使用该功能可以登录到云服务器,简单且方便,如下图:点击“远程连接”,第一次连接会自动生成6位数字密码,输入密码即可登录到云服务器上。
17306 0
+关注
62
文章
0
问答
文章排行榜
最热
最新
相关电子书
更多
文娱运维技术
立即下载
《SaaS模式云原生数据仓库应用场景实践》
立即下载
《看见新力量:二》电子书
立即下载