HTML 基础知识详解与代码示例

2024-09-06 00:44

本文主要是介绍HTML 基础知识详解与代码示例,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

一、基本格式

<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><title>中文测试。。。。</title>
</head>
<body>这里是测试 body 测试内容。。。
</body>
</html>

二、标签

  1. body内的主要标签有:
    • <h1><h6>:双标签,标题,加粗且换行,数字越大标题越小。
      • 示例:<h1>这是一级标题</h1><h6>这是六级标题</h6>
    • <p>:双标签,段落,有换行功效。
      • 示例:<p>这是一个段落。</p>
    • <hr>:单标签,左到右分割符。
      • 示例:<hr>
    • 注释使用<!-- -->
      • 示例:<!-- 这是一段注释 -->

三、元素的属性

  1. 大部分元素属性语法为<标签 属性1=参数1 属性2=参数2>
    • align属性可设置为leftrightcenter,用于对齐元素。
      • 示例:<p align="center">这是居中的段落。</p>
    • bgcolorbody的属性,可设置网页的背景色,如<body bgcolor="0xff1234">

四、文本元素属性

  • <b>:内容加粗。
    • 示例:<b>这是加粗的文字。</b>
  • <br>:换行,如果在<p>标签中间有间隔。
    • 示例:<p>第一行<br>第二行</p>
  • <i>:字体倾斜。
    • 示例:<i>这是倾斜的文字。</i>
  • <del>:删除文字。
    • 示例:<del>这是被删除的文字。</del>
  • <strong>:强调一段文字,效果类似<b>标签。
    • 示例:<strong>这是强调的文字。</strong>
  • <u>:下划线。
    • 示例:<u>这是有下划线的文字。</u>
  • <small>:超小字体。
    • 示例:<small>这是超小字体的文字。</small>
  • <sub>:下标,如h<sub>2</sub>0
    • 示例:<p>h<sub>2</sub>O</p>
  • <sup>:上标,如100m<sup>2</sup>
    • 示例:<p>100m<sup>2</sup></p>
  • <ruby>:用于标注拼音,可能部分浏览器不支持,如<ruby>二姐 <rt>(er) (jie)<rt></ruby>
    • 示例:<ruby>二姐 <rt>(er) (jie)<rt></ruby>
  • <mark>:加黄色背景。
    • 示例:<mark>这是被标记的文字。</mark>

五、超链接

有五种形式:

  1. 链接外部网站:<a href="http://www.baidu.com">baidu</a>
  2. 链接本地文件:<a href="1.html">1111</a>
  3. 图片链接:<a href="1.html"><img src="abc.jpg"></a>
  4. 电子邮件链接打开电子邮件:<a href="mailto:123@13.com">contract me</a>
  5. 下载文件链接:<a href="abc.jpg">下载</a>

默认情况下打开新网页时老网页会关闭,可使用target属性控制打开方式:

  • _self:在当前位置打开,默认值。
    • 示例:<a href="http://www.example.com" target="_self">在当前窗口打开示例网站</a>
  • _blank:在新窗口中打开,如<a href="http://www.baidu.com" target="_blank">baidu</a>

六、img标签

单标签,属性有:

  • src:图像来源。
    • 示例:<img src="image.jpg" alt="示例图片">
  • alt:如果不能正确打开,显示的文字。
    • 示例:<img src="image.jpg" alt="这是一张美丽的图片">
  • widthheight:可以设置为具体像素值或百分比,百分比是相对于网页而言的,但高度百分比可能无效,如<img src="abc.jpg" alt="美女" width="100" height="200"><img src="abc.jpg" alt="美女" width="50%" height="200%">

七、列表

  1. 无序列表:前面无数字,使用<ul>标签,如<ul><li>列表 1</li><li>列表 2</li><li>列表 3</li><li>列表 4</li></ul>,有type属性可设置文字最前面的符号,包括disc(黑色实心圆)、circle(白色空心圆)、square(黑色方块)。
    • 示例:<ul type="disc"><li>项目 1</li><li>项目 2</li></ul>
    • 示例:<ul type="circle"><li>项目 1</li><li>项目 2</li></ul>
    • 示例:<ul type="square"><li>项目 1</li><li>项目 2</li></ul>
  2. 有序列表:前面有数字,使用<ol>标签,如<ol><li>列表 1</li><li>列表 2</li><li>列表 3</li><li>列表 4</li></ol>,有type属性可设置排序使用的数字,还可以使用start属性设置开始值,后面的数字依次递增。列表中可以放文字、图片或链接。
    • 示例:<ol type="1"><li>第一项</li><li>第二项</li></ol>
    • 示例:<ol type="a"><li>第一项</li><li>第二项</li></ol>
    • 示例:<ol start="5"><li>从 5 开始的项</li><li>下一项</li></ol>

八、表格

  1. 表格构成:
    • <table>:外框。
    • <tr>:行。
    • <td>:列。
    • 例如:<table><tr><td>1-1</td><td>1-2</td><td>1-3</td></tr><tr><td>2-1</td><td>2-2</td><td>2-3</td></tr><tr><td>3-1</td><td>3-2</td><td>3-3</td></tr></table>,表示 3 行 3 列。
  2. 表格属性:
    • border:边框粗细。
      • 示例:<table border="1"><tr><td>有边框的表格单元格</td></tr></table>
    • <th><tr>的属性,代表列标题,自动居中且加粗。
      • 示例:<table><tr><th>列标题</th></tr><tr><td>表格内容</td></tr></table>
    • colspan:横向合并单元格,需要整数参数。例如:<tr><th colspan="3">name</th></tr>
      • 示例:<table><tr><th colspan="2">合并两列的标题</th></tr><tr><td>内容 1</td><td>内容 2</td></tr></table>
    • rowspan:列项合并,整数参数。
      • 示例:<table><tr><td rowspan="2">合并两行的内容</td><td>其他内容</td></tr><tr><td>更多内容</td></tr></table>

九、HTML 实体

用于输出一些特殊的字符,因为有些特殊字符不能直接在网页中显示。

  • 示例:<p>&lt;这是小于号实体&gt;</p>

十、表单

用于传递参数和数据,使用<form>标签。重要的子元素有inputbutton。属性有:

  • action:指定表单发送的地址。
    • 示例:<form action="submit.php">...</form>
  • method:发送的方式,有get(数据会附加到 url 的后面传递给服务器,默认)和post(将数据包大包发给服务器,等候服务器来读取)。
    • 示例:<form method="post">...</form>
  1. input元素:
    • 是表单中的内容项,比如输入内容的文本框,可以指定表单属性,也可以放在表单的外面。
    • 属性包括:
      • type:指定输入框的类型,如text(单行文本)、password(密码)、submit(提交按钮)、reset(重置按键)、button(普通按键,需要和特定事件关联)、image(图片式按键)、hidden(隐藏字段,内容不显示在页面上,用于提交其他变量)、email(邮箱类型,新特性,可能支持有差异)。
        • 示例:<input type="text" name="username" placeholder="输入用户名">
        • 示例:<input type="password" name="password">
        • 示例:<input type="submit" value="提交">
        • 示例:<input type="reset" value="重置">
        • 示例:<input type="button" onclick="alert('这是一个普通按钮')">
        • 示例:<input type="image" src="submit.png">
        • 示例:<input type="hidden" name="hidden_value" value="秘密数据">
        • 示例:<input type="email" name="email" placeholder="输入邮箱地址">
      • name:名称,输入内容识别名称,传递参数时候的参数名称。
      • value:默认值,输入框默认填入的内容。
        • 示例:<input type="text" name="description" value="默认描述">
      • maxlength:指定最大长度。
        • 示例:<input type="text" name="short_text" maxlength="10">
      • placeholder:设置提示信息。
        • 示例:<input type="text" placeholder="请输入内容">
      • required:表示内容必须填写,不然不能提交。
        • 示例:<input type="text" name="required_field" required>

这篇关于HTML 基础知识详解与代码示例的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/1140520

相关文章

使用Java将DOCX文档解析为Markdown文档的代码实现

《使用Java将DOCX文档解析为Markdown文档的代码实现》在现代文档处理中,Markdown(MD)因其简洁的语法和良好的可读性,逐渐成为开发者、技术写作者和内容创作者的首选格式,然而,许多文... 目录引言1. 工具和库介绍2. 安装依赖库3. 使用Apache POI解析DOCX文档4. 将解析

一文详解如何在Python中从字符串中提取部分内容

《一文详解如何在Python中从字符串中提取部分内容》:本文主要介绍如何在Python中从字符串中提取部分内容的相关资料,包括使用正则表达式、Pyparsing库、AST(抽象语法树)、字符串操作... 目录前言解决方案方法一:使用正则表达式方法二:使用 Pyparsing方法三:使用 AST方法四:使用字

C++使用printf语句实现进制转换的示例代码

《C++使用printf语句实现进制转换的示例代码》在C语言中,printf函数可以直接实现部分进制转换功能,通过格式说明符(formatspecifier)快速输出不同进制的数值,下面给大家分享C+... 目录一、printf 原生支持的进制转换1. 十进制、八进制、十六进制转换2. 显示进制前缀3. 指

Python列表去重的4种核心方法与实战指南详解

《Python列表去重的4种核心方法与实战指南详解》在Python开发中,处理列表数据时经常需要去除重复元素,本文将详细介绍4种最实用的列表去重方法,有需要的小伙伴可以根据自己的需要进行选择... 目录方法1:集合(set)去重法(最快速)方法2:顺序遍历法(保持顺序)方法3:副本删除法(原地修改)方法4:

python logging模块详解及其日志定时清理方式

《pythonlogging模块详解及其日志定时清理方式》:本文主要介绍pythonlogging模块详解及其日志定时清理方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地... 目录python logging模块及日志定时清理1.创建logger对象2.logging.basicCo

JS+HTML实现在线图片水印添加工具

《JS+HTML实现在线图片水印添加工具》在社交媒体和内容创作日益频繁的今天,如何保护原创内容、展示品牌身份成了一个不得不面对的问题,本文将实现一个完全基于HTML+CSS构建的现代化图片水印在线工具... 目录概述功能亮点使用方法技术解析延伸思考运行效果项目源码下载总结概述在社交媒体和内容创作日益频繁的

前端CSS Grid 布局示例详解

《前端CSSGrid布局示例详解》CSSGrid是一种二维布局系统,可以同时控制行和列,相比Flex(一维布局),更适合用在整体页面布局或复杂模块结构中,:本文主要介绍前端CSSGri... 目录css Grid 布局详解(通俗易懂版)一、概述二、基础概念三、创建 Grid 容器四、定义网格行和列五、设置行

Node.js 数据库 CRUD 项目示例详解(完美解决方案)

《Node.js数据库CRUD项目示例详解(完美解决方案)》:本文主要介绍Node.js数据库CRUD项目示例详解(完美解决方案),本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考... 目录项目结构1. 初始化项目2. 配置数据库连接 (config/db.js)3. 创建模型 (models/

SQL表间关联查询实例详解

《SQL表间关联查询实例详解》本文主要讲解SQL语句中常用的表间关联查询方式,包括:左连接(leftjoin)、右连接(rightjoin)、全连接(fulljoin)、内连接(innerjoin)、... 目录简介样例准备左外连接右外连接全外连接内连接交叉连接自然连接简介本文主要讲解SQL语句中常用的表

shell编程之函数与数组的使用详解

《shell编程之函数与数组的使用详解》:本文主要介绍shell编程之函数与数组的使用,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录shell函数函数的用法俩个数求和系统资源监控并报警函数函数变量的作用范围函数的参数递归函数shell数组获取数组的长度读取某下的