天天看点
返回

HTML快速入门

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>

<!--            · 吃饭-->

<!--            · 睡觉-->

<!--            · 打豆豆-->

       </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 align="right">

              <td>2</td>

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

<!--               合并两列-->

      </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="注册">

HTML字符实体

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

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

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

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

字符实体类似这样：

&entity_name;

或者

&#entity_number;

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

不间断空格（non-breaking space）

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

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

字符实体。

HTML 中有用的字符实体

注释：实体名称对大小写敏感！

显示结果 描述 实体名称 实体编号
空格
< 小于号

&lt;
> 大于号

&gt;
& 和号

&amp;
" 引号

&quot;
' 撇号

&apos;

 (IE不支持)
￠ 分（cent）

&cent;

 		¢
£ 镑（pound）

&pound;
¥ 元（yen）

&yen;
€ 欧元（euro）

&euro;
§ 小节

&sect;
© 版权（copyright）

&copy;
® 注册商标

&reg;
™ 商标

&trade;
× 乘号

&times;
÷ 除号

&divide;

如需完整的实体符号参考，请访问我们的

HTML 实体符号参考手册

。

xml 移动开发 前端开发 javascript 安全 数据安全/隐私保护 数据格式 html5 HTML入门 html5快速开发入门篇 HTML5入门 html入门经典 html用法
上一篇: 高校学生阿里云ECS使用心得
下一篇: 阿里云服务器开放全部端口给所有IP使用教程阿里云服务器开放全部端口教程

继续阅读