HTML入门

2022-06-27 10:42:43 浏览数 (1)

概述

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

骨架标签

HTML常用标签

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

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

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

align

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

代码语言：javascript复制
<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>
水平线和换行
代码语言：javascript复制
 <hr> 或 <hr/> 是水平线标签
 html文档中无法使用回车进行换行，要进行换行就必须使用
 <br>或<br/> 标签
段落标签

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

代码语言：javascript复制
<p>段落</p>
HTML实体

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

代码语言：javascript复制
  代表一个空格
  代表全角空格
< 代表 <
> 代表 >
其它实体
div 和 span标签

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

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

字符与图片标签

字符格式化标签
图片标签

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

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

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

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

链接标签

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

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

超链接
图片超链接
代码语言：javascript复制
<!-- 点击图片就能跳转到京东首页 -->
<a href="http://www.jd.com">
    <img src="./images/1.jpg" alt="京东首页" />
</a>
锚链接
  1. 使用a标签设置锚链接
  2. 在要跳转的标签上设置锚点
代码语言：javascript复制
<!-- 设置锚链接 -->
<a href="#info">锚链接</a>
<!-- 设置锚点 -->
<p id="info">
    锚点
</p>

表格标签

table用来制作表格的外边框

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

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

常用表格属性
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组成

代码语言：javascript复制
<ol>
    <li>苹果</li> <!--1.苹果-->
    <li>香蕉</li>    <!--2.香蕉-->
    <li>葡萄</li>    <!--3.葡萄-->
</ol>
无序列表

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

代码语言：javascript复制
<ul>
    <li>苹果</li> <!-- · 苹果-->
    <li>香蕉</li>    <!-- · 香蕉-->
    <li>葡萄</li>    <!-- · 葡萄-->
</ul>
自定义列表

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

代码语言：javascript复制
<dl>
    <!--dt和dd同级-->
    <dt>水果</dt>        <!--水果-->
        <dd>苹果</dd>        <!--苹果-->
        <dd>香蕉</dd>        <!--香蕉-->
        <dd>葡萄</dd>        <!--葡萄-->
    <dt>蔬菜</dt>        <!--蔬菜-->
        <dd>白菜</dd>     <!--白菜-->
        <dd>土豆</dd>     <!--土豆-->
        <dd>青椒</dd>     <!--青椒-->
</dl>
表单

form标签:表单的外层

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

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

代码语言：javascript复制
<!--文本框-->
<input type="text"/>
<!--密码框-->
<input type="password"/>
常用属性
value 和 placeholder
  • value:字体颜色深;当光标定位到框中，光标在值得最后。修改值时，必须先删除原有值。value优先级高于placeholder
  • placeholder:字体颜色浅;当光标定位到框中，光标在框的最前面，可以直接输入值
单选框和复选框

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

代码语言：javascript复制
<!--type="redio":代表单选框-->
性别:<input type="radio" name="gender" value="1">男
    <input type="radio" name="gender" value="2">女
    <input type="radio" name="gender" value="0">未知
代码语言：javascript复制
<!--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 两个标签组合而成

代码语言：javascript复制
<select name="addr">
    <option value="bj">北京</option>
    <option value="sh">上海</option>
    <option value="gz">广州</option>
    <option value="sz">深圳</option>
</select>
文本域

文本域也叫做多行文本框

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

其他属性
html 图片标签 css

0 人点赞