HTML入门

概述

HTML 教程 | 菜鸟教程 (runoob.com)

骨架标签

image-20220613203813281

image-20220613204612152

HTML常用标签

HTML常用标签可分为一下几类：

• 排版标签、图片标签、超链接标签、表格标签、列表标签、表单标签

标题标签

标题标签一共有6个，h1~h6, h1是─级标题，最大;h6是六级标题，最小

align

align是标题的重要属性，能够决定标题中文字的显示位置

<h1>标题标签一共有6个</h1>
<h2>align属性可以设置文本对齐方式</h2>
<h3>align有三个可选值：left、center、right</h3>
<h4 align="left">left：左对齐方式，也是默认值</h4>
<h5 align="center">center：居中对齐方式</h5>
<h6 align="right">right：右对齐方式</h6>

水平线和换行

 <hr> 或 <hr/> 是水平线标签
 html文档中无法使用回车进行换行，要进行换行就必须使用
 <br>或<br/> 标签

段落标签

p 标签中也有align属性，用来控制文字显示的位置，默认值是left

<p>段落</p>

HTML实体

在html文档中空格至多只能使用一次，要使用更多空格必须使用html实体

  代表一个空格
  代表全角空格
< 代表 <
> 代表 >

其它实体

60cdcc7e090fea6506400593

div 和 span标签

div标签主要是用来对网页进行布局的（ div+css ) span标签通常用来将文本的一部分独立出来，从而对独立出来的内容设置单独的样式

• div 标签一行只能放一个
• span 一行可以放多个

字符与图片标签

字符格式化标签

image-20220613214331082

图片标签

img 标签：用来在页面中引入图片

src 属性：设置图片路径（相对路径和绝对路径均可）

alt 属性：如果图片因为某种原因未能引入，则显示alt指定的字符串

width \ height 属性：用来设置图片宽高

链接标签

a 标签：超链接标签（从一个页面跳转到另一个页面）

锚链接：从也免得一个位置跳转到另一个位置

超链接

image-20220613221837612

图片超链接

<!-- 点击图片就能跳转到京东首页 -->
<a href="http://www.jd.com">
    <img src="./images/1.jpg" alt="京东首页" />
</a>

锚链接

1. 使用a标签设置锚链接
2. 在要跳转的标签上设置锚点

<!-- 设置锚链接 -->
<a href="#info">锚链接</a>
<!-- 设置锚点 -->
<p id="info">
    锚点
</p>

表格标签

table用来制作表格的外边框

table中嵌套tr用来制作表格的行

tr 中嵌套td用来制作表格的单元格（也叫列)

image-20220613224339497

常用表格属性

image-20220613224540022

colspan

用于列合并

rowspan

用于行合并

表格完整结构

• caption、thead、th、tbody、tfoot

以上标签都要嵌套在table中

标签总结

• 核心标签：
  • table： 表格的外边框
  • tr： 表格行
  • td： 表格单元格（列）
• 表格结构标签：
  • caption： 表格标题
  • thead：表格头部
  • th：表头（居中、加粗、加黑）
  • tbody：表格主体
  • tfoot：表格脚部
• 主要属性：
  • border：表格边框
  • width/height： 表格宽高、tr/td也能使用
  • cellspacing： 单元格与单元格、单元格与边框的间隙
  • cellpadding： 单元格中内容与单元格的间隙
  • align： 设置表格在页面中的位置； 设置tr/td中文字对齐方式
  • bgcolor： 设置表格、tr、td的背景色

列表与表单标签

列表

列表分为有序列表、无序列表和自定义列表三种

有序列表

有序列表由ol和li组成

<ol>
    <li>苹果</li> <!--1.苹果-->
    <li>香蕉</li>    <!--2.香蕉-->
    <li>葡萄</li>    <!--3.葡萄-->
</ol>

无序列表

无序列表由 ul 和 li 标签组成

<ul>
    <li>苹果</li> <!-- · 苹果-->
    <li>香蕉</li>    <!-- · 香蕉-->
    <li>葡萄</li>    <!-- · 葡萄-->
</ul>

自定义列表

自定义列表由 dl、dt 和 dd 三种标签组成

<dl>
    <!--dt和dd同级-->
    <dt>水果</dt>        <!--水果-->
        <dd>苹果</dd>        <!--苹果-->
        <dd>香蕉</dd>        <!--香蕉-->
        <dd>葡萄</dd>        <!--葡萄-->
    <dt>蔬菜</dt>        <!--蔬菜-->
        <dd>白菜</dd>     <!--白菜-->
        <dd>土豆</dd>     <!--土豆-->
        <dd>青椒</dd>     <!--青椒-->
</dl>

表单

image-20220615151907208

form标签:表单的外层

method 属性︰指定表单提交的方式，get(默认)、post

action属性∶指定表单提交的位置

<!--文本框-->
<input type="text"/>
<!--密码框-->
<input type="password"/>

常用属性

image-20220615152723802

value 和 placeholder

• value:字体颜色深;当光标定位到框中，光标在值得最后。修改值时，必须先删除原有值。value优先级高于placeholder
• placeholder:字体颜色浅;当光标定位到框中，光标在框的最前面，可以直接输入值

单选框和复选框

name属性用来将单选框/复选框限制成为一组复选框的name必须是数组形式，所以需要使用[](hobby[])

<!--type="redio":代表单选框-->
性别:<input type="radio" name="gender" value="1">男
    <input type="radio" name="gender" value="2">女
    <input type="radio" name="gender" value="0">未知

<!--type="checkbox":代表复选框-->
职业:<input type="checkbox" name="hobby[]" value="java">Java
    <input type="checkbox" name="hobby[]" value="php">PHP
    <input type="checkbox" name="hobby[]" value="c">C

其他域

文件域

文件域能够让表单具有文件上传能力

<input type="file" multiple="multiple"/>

multiple 属性：允许同时选中多个文件

按钮

<input type="button" value="普通按钮" />

<input type="reset" value="重置表单" />

<input type="submit" value="提交按钮" />

隐藏域

不显示在页面上，但是表单提交时又会被提交到action指定位置的域

<input type="hidden">

下拉菜单

下拉菜单由select 和 option 两个标签组合而成

<select name="addr">
    <option value="bj">北京</option>
    <option value="sh">上海</option>
    <option value="gz">广州</option>
    <option value="sz">深圳</option>
</select>

文本域

文本域也叫做多行文本框\

多行文本框：<textarea name="sign"></textarea>

image-20220615172437572

其他属性

610a017409b0ee6305260530