欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页  >  IT编程

HTML 基础知识

程序员文章站 2022-05-26 15:45:08
"HTML基本结构" "HTML头部标签" meta 标签 link 标签 base 标签 "HTML标签" "HTML 标签分类" "HTML 标签属性" "排版标签" "文本格式化标签" "图片标签 img" "链接标签 a" "列表标签" "表格标签 table" "表单标签 form" in ......

html基本结构

html头部标签

  • meta 标签

  • base 标签

html标签

  • html 标签分类

  • html 标签属性

    • input 标签

    • label 标签

    • select 标签-下拉列表

    • textarea 标签-文本域

    • fieldset 标签-元素分组

    • datalist 标签 - input 可能值（h5）

    • embed 标签 - 嵌入内容

    • audio 标签 - 音频

    • video 标签 - 视频

html（hyper text mark-up language，超文本标记语言），一种使用标记标签 (tag) 描述网页的语言，其中的“超文本“是指页面内除文本之外还可以包含图片、链接、程序、音频、视频等非文字元素。

html 常用于编写页面主体结构，css 常用于对页面进行静态修饰，javascript 常用于对网页增加动态功能。

一、 html 基本结构

<!-- html注释格式 -->

<!-- 标准html文档格式 -->

<!doctype html>  <!-- h5文档类型=html -->
<html lang="en">  <!-- language=english -->
<head>
    <meta charset="utf-8"> <!-- 字符集 -->
    <!-- 屏幕自适应大小 -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <title>文档标题</title>
</head>
<body>
    文档主体内容
</body>
</html>

二、html 头部标签

1. meta 标签 - 元信息

  • meta标签：页面元信息，位于<head></head>中

  • meta标签属性：键值对

1 定义编码格式：<meta charset="utf-8">
2 为搜索引擎定义关键词：<meta name="keywords" content="html, css, xml, xhtml, javascript">
3 为网页定义描述内容：<meta name="description" content="html基础">
4 定义网页作者：<meta name="author" content="mr mo">5 每30秒中刷新当前页面：<meta http-equiv="refresh" content="30">
6 常用的针对移动网页优化过 viewport 的 meta：<meta name="viewport" content="width=device-width,height=device-height,inital-scale=1.0,maximum-scale=1.0,user-scalable=no;">

2. link标签 - 链接外部资源

<!--链接外部css文件-->
<link rel="stylesheet" type="text/css" href="文件url" />  
<!--链接icon文件-->
<link rel="icon" href="favicon.ico" />

3. base标签 - 基准链接

  • 为页面所有链接规定默认 url 或默认 target
<base href="" target="" />
<base/>属性 值 描述
herf url 规定页面所有链接的默认url
target _self
_blank		 规定页面所有链接的默认打开方式

三、html 标签

1. html标签分类

按标签类型分类：

标签类型 标签
单标签 <br/>，<img/>，<input/>...
双标签 <p></p>，<div></div>...

按标签显示模式分类：

标签显示模式 标签
块级元素 <div></div>，<ul></ul>...
行级元素 <span></span>，<a></a>...
行内块元素 <img/>、<td></td>...

2. html标签属性

html标签属性格式：name="value";

例如：

属性 值 描述
id id 规定元素的唯一 id
class classname 为 html 元素定义一个或多个类名(classname)
style style_definition 规定元素的行内样式（inline style 内联样式）
title text 描述了元素的额外信息 (作为工具条使用)

详细参考 《html标准属性参考手册》

3. 排版标签

排版标签 html标签
标题标签 <h1>一级标题</h1> ~ <h6>六级标题</h6>
段落标签 <p>这是一个段落</p>
换行标签 <br/>
水平线标签 <hr/>
块标签 <div></div>
行标签 <span></span>

4. 文本格式化标签

文本格式 html4 html5
加粗 <b></b> <strong></strong>
斜体 <i></i> <em></em>
下划线 <u></u>不推荐使用 <ins></ins>
删除线 <s></s>不推荐使用 <del></del>

5. 图片标签 - img

<img src="url" alt="替代文本" />
<img/>属性 值 描述
src url 本地图片路径 / 网络图片url
alt text 图片非正常显示的替代文本
width&height px，% 设置图像宽&高
title text 鼠标悬停时的显示文本
border px 图像边框宽度

避免图片失真：推荐width&height只设置一个值；

6. 链接标签 - a

<a herf="url" target="_blank"></a>
<a>属性 值 描述
href url 超链接url / #id
target _self
_blank		 本标签页打开（默认）
新标签页打开
name text 锚点名称
title " " 鼠标移到上面显示的文本描述

(1) 锚点定位：<a href="#id/name"></a>

  • 给每个锚点添加id，点击链接直接跳转到对应id的位置
<a href="index.html#box1">锚点1</a>
<a href="http://www.baidu.com/#box2">锚点2</a>
....
<div id="box1">
<div id="box2">

(2) 路径

  • 内部页面用相对路径，外部链接用url
<a href="images/drinks.gif"></a>// images文件夹下的drinks.gif文件
<a href="../../book/index.html"></a> // .. 代表上行到父文件夹

7. 列表标签

(1) 无序列表 - ul

<ul>
    <li>表项1</li>
    <li>表项2</li>
</ul>

(2) 有序列表 - ol

<ol>
    <li>表项1</li>
    <li>表项2</li>
</ol>

(3) 自定义列表 - dl

<dl>
    <dt>上级表项1</dt>
        <dd>下级表项11</dd>
        <dd>下级表项12</dd>
    <dt>上级表项2</dt>
        <dd>下级表项21</dd>
        <dd>下级表项22</dd>
</dl>

列表项计数问题：从1开始计数，dl从dt开始计数

8. 表格标签 - table

<table border="1px">
    <thead>
        <tr>
            <th>表头1</th>
            <th>表头2</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>第1行第1格</td>
            <td>第1行第2格</td>
        </tr>
        <tr>
            <td>第2行第1格</td>
            <td>第2行第2格</td>
        </tr>
    </tbody>
</table>

空单元格边框未显示问题：在空单元格中添加一个空格占位符&nbsp;

<table>属性：

  • border-spacing：单元格之间边框间距

    • border-spacing:10px 30px; 10px的水平间距，30px的垂直间距（ie6不兼容）

  • border-collapse ：折叠两个边框为一个

    • 给 table 加 border-collapse:collapse;

  • cellspaceing：单元格间距；

  • cellpadding：单元格边距；

<td>属性：

  • 合并单元格：rowspan=""跨行， colspan=""跨列；

    • <td colspan="2"></td> ：两列合并为一个

  • 水平对齐方式：align="left/center/right"；

9. 表单标签 - form

  • 特性：inline-block
<form action="" method="get">
    表单域：表单元素；
</form>
<form>属性 值 描述
action url 规定提交表单的目的地址url
method get
post 		规定提交表单使用的 http 方法
target _self
_blank		 规定action的打开方式

http 方法：

  • get：表单数据在地址栏可见，明文；（默认）

  • post：表单数据在地址栏不可见，密文；

(1) input 标签

  • <input type="" name="" value="" />

  • name是后端使用的，但是习惯是要写个空的值

<input/>属性 值 描述
type text
password
radio
checkbox
button
submit
reset
image
file		 单行文本输入框
密码输入框
单选框
复选框
普通按钮
提交按钮
重置按钮
图片
文件
name 用户自定义 input控件名称
value 用户自定义 input控件初始文本值
checked checked 定义选框预选项
disabled disabled 禁用表单元素
size number 字段显示宽度
maxlength number 字段最大长度

  • <input type="checkbox" name="" checked/>运动 （checked就是默认选中，disabled 禁用）

  • h5新增input属性：

<input/>属性（h5） 值 描述
placeholder text 输入字段的提示
autofocus autofocus 规定在页面加载时是否获得焦点（不适用于 type="hidden"）
multiple multiple 多文件上传
autocomplete on
off		 是否使用字段的自动完成功能
required required 必填项，不能为空

  • h5新增input type值：

input type值（h5） 描述
email 邮箱格式
tel 手机号码
url url格式
number 数字格式
search 搜索框
range *拖动滑块
time 时分
date 年月日
datetime 时间
month 月年
week 星期 年

(2) label 标签

  • 为 input 元素定义标注
<input type="checkbox" name="" id="a"/>
<label for="a">……</label> //只有这样才能兼容ie6
<label>属性 值 描述
for id 规定 label 绑定到哪个表单元素。
form form_id 规定 label 字段所属的一个或多个表单。

(3) select 标签-下拉列表

<select name="" id="">
    <option value="">下拉项1</option>
    <option value="">下拉项2</option>
</select>
值 描述
selected selected 定义下拉列表默认项
disabled disabled 禁用表单元素
value text 定义送往服务器的选项值
  • 对高度的支持不兼容,所以一般只给宽，高度不会控制

(4) textarea 标签-文本域

<textarea name="" id="" cols="30" rows="10">
    文本域：多行文本
</textarea>
  • rows&cols：定义文本的可见行&列

(5) fieldset 标签-元素分组

<fieldset>
    <legend>元素组标题</legend>
    表单元素1: <input type="text" />
    表单元素2: <input type="text" />
</fieldset>

(6) datalist 标签 - input 可能值（h5）

  • datalist 标签：定义选项列表。与 input 连用，定义 input 可能的值。
<input list="datalist-id" />
<datalist id="datalist-id">
    <option value="input可能值_01">
    <option value="input可能值_02">
    <option value="input可能值_03">
</datalist>

10. 多媒体标签

(1) embed 标签 - 嵌入内容

  • <embed src="" type=""/>
<embed/>属性 值 描述
src url 嵌入内容的url
type type 嵌入内容的类型
width&height px 嵌入内容的宽&高

(2) audio 标签 - 音频

  • <audio src=""></audio>
<audio>属性 值 描述
src url 音频的url
autoplay autoplay 自动播放
control control 显示音频控件
loop loop 循环播放

(3) video 标签 - 视频

  • <video src=""></video>
<video>属性 值 描述
src url 音频的url
autoplay autoplay 自动播放
control control 显示视频控件
loop loop 循环播放
width&height px 视频的宽&高

上一篇： html锚点

下一篇： 劳累吃什么好，这几种食物可以帮到你

推荐阅读