全面介绍HTML的语法!轻松写出网页

文章目录

  • heading(标题)
  • paragraph(段落)
  • link(超链接)
  • image
  • map(映射)
  • table(表格)
  • list(列表)
  • layout(分块)
  • form(表单)
    • 更多输入:
    • datalist
    • autocomplete
    • autofocus
    • multiple
    • novalidate
    • pattern
    • placeholder
    • required
  • head(首部)
    • title
    • base
    • link
    • style
    • meta
    • script
    • noscript
  • iframe

HTML,即Hypertext Markup Language(超文本标记语言), 是网页显示的核心语言.
HTML中最重要的要素是tag(标签). 所有的关键词都被一组标签包含.

<!doctype html>  
<html class="no-js" lang="">  
<body>  
 <h1>My First Heading</h1>  
 <p>My first paragraph.</p>  
</body>  
</html>

例如<p>和</p>, 分别标志着内容的开始和结束.

浏览器通过HTML tag对网页内容进行解析, 并显示成我们看到的样子.

HTML 文档 = 网页

Tag作用介绍:

heading(标题)

<h1>,<h2>,...,<h6>

paragraph(段落)

<p>

link(超链接)

<a>

href指定跳转的链接

<a href="http://www.w3school.com.cn/>访问W3School</a>

标签之间的内容是显示在页面上的文字

image

<img>

<img src="iron.png" alt="Yellow Star" width="192" height="192">
  • src: 图片的路径

  • alt: 图片加载失败时显示的文字

  • width, height: 长,宽

    在原生HTML中, 长宽用字符串表示

map(映射)

<map>和<area>配套使用

<img src="./img/life.png" alt="Life" usemap="#lifemap" width="650" height="451">  
<map name="lifemap">  
  <area shape="rect" coords="10,208,155,338" alt="AirPods" href="./airpods.html">  
  <area shape="rect" coords="214,65,364,365" alt="iPhone" href="./iPhone.html">  
  <area shape="circle" coords="570,291,75" alt="Coffee" href="./coffee.html">  
</map>

image.png
<map>:

  • name: 映射的名字
    <area>:
  • shape: 区域的形状
  • coords: 坐标
    • rect: 左下角和右上角
    • circle: 中心, 半径
  • href: 点击后跳转到的页面

table(表格)

<table>
<th> (table heading)
<tr> (table row)
<td> (table data)

list(列表)

<ul> 无序列表
<ol> 有序列表
<li> 列表中的每一项(包括无序和有序列表)
<dl> 定义列表
<dt> term(术语)
<dd> description(解释)

layout(分块)

<div>

<div id = "nav">
  London<br>
  Paris<br>
  Tokyo<br>
</div>

<br> 换行符

div id:

  • header 标题
  • nav 导航栏
  • section 章节部分
  • footer 脚注

form(表单)

<form action="404.html" method="GET">  User name:<br>  
  <input type="text" name="username">  User password:<br>  
  <input type="password" name="psw">  
  <input type="radio" name="sex" value="male" checked>Male  
  <input type="radio" name="sex" value="female">Female  
  <input type="checkbox" name="vehicle" value="Bike">I have a bike  
  <input type="checkbox" name="vehicle" value="Car">I have a car  
  <input type="button" onclick="alert('Hello World!')" value="Click Me!">  
  <input type="submit" value="Submit">  
</form>

form:

  • action: 表单提交时将数据发送到的目标页面
  • method: 数据传输方式

<input>: 输入框
type属性:

  • text: 文本输入框
    • name: 标识名称, 用来通过该名称检索输入的值
  • password: 密码输入框,输入的内容将被掩码,用于输入密码等敏感信息。
  • radio: 单选按钮, name属性相同的按钮属于同一组
    • value: 选中的值
    • checked: 默认选中
  • checkbox: 复选框
  • button: 按钮
    • onclick: 按下按钮后触发的事件.
      在本例中是弹出一个警示框
    • value: 按钮显示的文字
      • submit: 提交, 用于提交表单数据到服务器(axtion属性指定的目标页面)

更多输入:

  • number
<form>  
  Quantity (between 1 and 5):  
  <input type="number" name="quantity" min="1" max="5" step="2" value="3">  
</form>
  • date
<form>  
Date:  
<input type="date" name="bday" min="2000-01-02"><br>  
Month:  
<input type="month" name="bday" min="2000-01-02"><br>  
Week:  
<input type="week" name="bday" min="2000-01-02"><br>  
Time:  
<input type="time" name="bday" min="2000-01-02"><br>  
Date & Time:  
<input type="datetime-local" name="bday" min="2000-01-02"><br>  
</form>
  • color
<input type="color" name="favcolor">
  • range
<input type="range" name="points" min="0" max="10" step="2" value="6">

image.png

  • emial, url

会检查格式

datalist

<select>, <option>

<label>  
    <select name="cars">  
      <option value="volvo">Volvo</option>  
      <option value="saab">Saab</option>  
      <option value="fiat">Fiat</option>  
      <option value="audi">Audi</option>  
    </select>  
</label>

label: 标签

autocomplete

规定form或input域具有自动完成功能

autofocus

域自动获得焦点

multiple

域中可以输入多个值

novalidate

提交表单时不验证form或input域

pattern

用于验证input域的模式

  <input type="text" id="fname" name="fname" pattern="[A-Z]{3}" title="3 letters">

其中pattern规定的是正则表达式

placeholder

域期待的值

required

非空

  <input type="text" id="fname" name="fname" required="required">

head(首部)

包含有Script(页面脚本), CSS(样式表), metadata(元数据)

标签描述
<head>定义关于文档的信息
<title>定义文档标题
<base>定义页面上所有链接的默认地址或默认目标
<link>定义文档域外部资源之间的关系
<meta>定义关于HTML脚本的元数据
<script>定义客户端脚本
<style>定义文档的样式信息

title

<title>Examples of HTML5</title>

Pasted image 20240226212145

base

<head>
  <base href="http://www.w3school.com.cn/images/" />  
  <base target="_blank" />
</head>

link

<head>  
  <link rel="stylesheet" type="text/css" href="mystyle.css" />
</head>

style

<head>  
  <style type="text/css">  
    body {background-color:yellow}    
    p {color:blue}  
  </style>  
</head>

body: 文档背景颜色
p: 段落文字颜色

meta

不会显示在页面上,但是被机器读取
meta 元素被用于规定页面的描述、关键词、文档的作者、最后修改时间以及其他元数据。

<head>  
  <meta name="description" content="Free Web tutorials on HTML, CSS, XML" />  
  <meta name="keywords" content="HTML, CSS, XML" />  
  <meta charset="UTF-8"/>

</head>

script

使用javaScript脚本可以直接更改页面

<p id="demo"></p>  
<script>  document.getElementById("demo").innerHTML = "Hello JavaScript!";  document.getElementById("demo").style.fontSize = "25px";  document.getElementById("demo").style.color = "red";  document.getElementById("demo").style.backgroundColor = "yellow";  
</script>

noscript

替代内容,显示给浏览器中禁用了脚本的用户

iframe

Inline Frame, 内联框

<iframe src="http://www.w3school.com.cn/example/html/demo_iframe.html" name="iframe_a"></iframe>

当然,这些都是最原生的HTML语法. 现在使用的HTML5增加了一下特色:

  • canvas(画布)
  • video and audio(视频\音频)
  • local storage
  • Application Cache(应用程序缓存)
  • server-sent event(服务器发射事件)
  • SVG(Scalable Vector Graphics, 可变向量图)

内容过于丰富,下次再介绍.

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/411492.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

【刷题】leetcode 1544.整理字符串

刷题 1544.整理字符串思路一&#xff08;模拟栈速解版&#xff09;思路二 &#xff08;原地算法巧解版&#xff09;思路三&#xff08;C栈版&#xff09; Thanks♪(&#xff65;ω&#xff65;)&#xff89;谢谢阅读&#xff01;&#xff01;&#xff01;下一篇文章见&#xff…

前端学习---- 前端HTML基本元素的介绍

一&#xff1a;显示相关的HTML基础知识 1. 推荐的前端编写工具 2. VScode的html速写规则&#xff08;从a标签开始再用&#xff09; ①、&#xff01;&#xff1a;代表生成html的基本框架元素 ②、html元素&#xff1a;直接书写html,不需要加<>,按回车会自动生成 ③、{}…

linux下执行文件包含^M,将window文件格式内容转为linux格式

查看文件内容 cat -v jvm_options 报错信息 ./bin/install-plugin.sh: /bigdata/opt/s/seatunnelsgg/apache-seatunnel-2.3.4/mvnw: /bin/sh^M: bad interpreter: No such file or directory install connector : connector-selectdb-cloud安装工具 yum install -y dos2uni…

YOLOv9中的“ADown”结构!

ADown结构出炉啦&#xff0c;收藏起来写论文用&#xff01; 1.代码&#xff1a; 代码路径&#xff1a;yolov9-main->models->common.py&#xff0c;代码如下&#xff1a; class ADown(nn.Module):def __init__(self, c1, c2): # ch_in, ch_out, shortcut, kernels, gro…

Z 字形变换

题目链接 Z 字形变换 题目描述 注意点 s 由英文字母&#xff08;小写和大写&#xff09;、‘,’ 和 ‘.’ 组成1 < numRows < 1000 解答思路 方法一是模拟整个Z字形变换思路&#xff0c;使用一个二维数组存储变换后的矩阵&#xff0c;首先需要确定这个矩阵的行数row和…

PDF控件Spire.PDF for .NET【安全】演示:从加密的 PDF 文档中删除密码

Spire.PDF for .NET 是一款独立 PDF 控件&#xff0c;用于 .NET 程序中创建、编辑和操作 PDF 文档。使用 Spire.PDF 类库&#xff0c;开发人员可以新建一个 PDF 文档或者对现有的 PDF 文档进行处理&#xff0c;且无需安装 Adobe Acrobat。 E-iceblue 功能类库Spire 系列文档处…

C++11右值引用

文章目录 左值左值引用 右值右值引用左值引用和右值引用左值引用和右值引用总结 右值引用使用场景和意义左值引用的使用场景左值引用的缺点右值引用移动构造移动赋值 右值引用的其他使用场景 万能引用完美转发完美转发的实际应用场景 C11之前就有了引用的语法&#xff0c;而C11…

Rust升级慢,使用国内镜像进行加速

背景 rustup 是 Rust 官方的跨平台 Rust 安装工具&#xff0c;国内用户使用rustup update的时候&#xff0c;网速非常慢&#xff0c;可以使用国内的阿里云镜像源来进行加速 0x01 配置方法 1. Linux与Mac OS用户配置环境变量 修改~/.bash_profile文件添加如下内容&#xff1…

Three.js-04轨道控制器

1.导入 说明&#xff1a;相机围绕目标进行轨道运动。也就是可以通过鼠标拖拽进行移动视角。 import { OrbitControls } from three/addons/controls/OrbitControls.js; 2.使用 说明&#xff1a;构造controls对象&#xff0c;再调用update方法&#xff1b;为了使效果更为明显…

【数据结构与算法】常用算法 前缀和

&#x1f389;&#x1f389;欢迎光临&#x1f389;&#x1f389; &#x1f3c5;我是苏泽&#xff0c;一位对技术充满热情的探索者和分享者。&#x1f680;&#x1f680; &#x1f31f;特别推荐给大家我的最新专栏《数据结构与算法&#xff1a;初学者入门指南》&#x1f4d8;&am…

刘知远LLM——Transformer与预训练模型

文章目录 注意力机制原理介绍注意力机制的各种变式注意力机制的特点 Transformer结构概述Transformer整体结构 输入层byte pair encodingpositional encoding Transformer BlockEncoder BlockMulti-Head Attention Decoder Block其他tricks总结 预训练语言模型语言建模概述预训…

DP读书:《半导体物理学(第八版)》(一)绪论 3min速通

DP读书&#xff1a;《半导体物理学&#xff08;第八版&#xff09;》刘恩科 3min速通半导体物理之绪论 DP读书&#xff1a;《半导体物理学&#xff08;第八版&#xff09;》刘恩科绪论第一章 半导体中的电子状态1.1 半导体的晶格结构和结合性质1.1.1 金刚石型结构和共价键1.1.2…

详解三种网络适配器:HBA、NIC 和 CNA

目录 前言&#xff1a; 一、主机总线适配器 (HBA) HBA的特点 二、网络接口卡 (NIC) NIC的特点 三、并发网络适配器 (CNA) CNA的特点 四、HBA、NIC 与 CNA的区别 五、结论 前言&#xff1a; 网络中的主机总线适配器 (HBA)、网络接口卡 (NIC) 和并发网络适配器 (CNA) 是…

视频号视频下载教程:如何把微信视频号的视频下载下来

视频号下载相信不少人都多少有一些了解&#xff0c;但今天我们就来细说一下关于视频号视频下载的相关疑问&#xff0c;以及大家经常会问到底如何把微信视频号的视频下载下来&#xff1f; 视频号视频下载教程 视频号链接提取器详细使用指南&#xff0c;教你轻松下载号视频&…

关于 cocos creator 如何打包抖音字节小游戏步骤一

1、cocos creator打开引擎&#xff0c;在顶部选择构建之后&#xff0c;在选择点击构建(ps:具体看项目组的大小&#xff0c;如果是一个简单的不多资源一般不到一分钟&#xff0c;如果项目很大&#xff0c;就至少半个小时以上)&#xff0c;之后 成功构建之后如下所示&#xff1a;…

欢迎免费申报讯方技术HarmonyOS人才训练营!

在今年1月备受瞩目的鸿蒙生态千帆启航仪式上&#xff0c;华为宣布&#xff1a;HarmonyOS NEXT星河预览版正式面向开发者开放申请&#xff0c;意味着鸿蒙将建立更广泛的生态系统&#xff0c;迎来更多的应用和软硬件产品&#xff0c;加速自我技术迭代&#xff0c;同时推动华为全场…

python 进程笔记二(通讯) (概念+示例代码)

1、为什么要掌握进程间通信 Python代码效率由于受制于GIL全局锁限制&#xff0c;多线程不能利用多核CPU来加速&#xff0c;而多进程方式却可以绕过GIL限制, 发挥多CPU加速的优势&#xff0c;达到提高程序的性能的目的。 然而进程间通信却是不得不考虑的问题。 进程不同于线程&a…

投资生涯的核心密码:构建交易逻辑体系

首先&#xff0c;我们需要明确一点&#xff0c;交易中究竟有没有确定性&#xff1f; 确定性是指在某一种形式、或有若干条件时&#xff0c;价格必然会上涨或下跌&#xff0c;也可以决定上涨或下跌的程度。 我认为&#xff0c;没有。迄今为止还没有一个理论能发现即使确定的东西…

金融知识分享系列之:五日线

金融知识分享系列之&#xff1a;五日线 一、股票均线二、五日线三、五日线加量能三、五日线案例四、五日线案例五、五日线案例六、五日线案例七、五日线案例八、五日线案例 一、股票均线 股票均线是一种用于平滑股票价格的指标。它是根据一段时间内的股票价格计算得出的平均值…

PureFlash v1.9.1特性介绍

PureFlashv1.9.1版本特性主要有3个&#xff1a; 1. 支持RDMA网络 使用RDMA协议可以大大减少对CPU的消耗&#xff0c;性能提升30%以上。 PureFlash的网络配置分为存储节点间网络&#xff08;存储后端网&#xff09;和客户端网络&#xff08;前端网&#xff09;。都支持使用RD…