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

魔术考德

已于 2024-02-26 21:41:22 修改

阅读量1.2k

点赞数 12

分类专栏：速通WEB开发文章标签： html web 笔记

于 2024-02-26 21:38:51 首次发布

本文链接：https://blog.csdn.net/MagicianofLove/article/details/136309357

版权

速通WEB开发专栏收录该内容

2 篇文章 0 订阅

订阅专栏

本文详细介绍了HTML的基础结构，包括标签的使用（如heading、paragraph、link、image、map、table、list等），以及HTML5新增的元素和功能如canvas、video、audio等。还涵盖了表单元素、布局管理和元数据设置等内容。

摘要由CSDN通过智能技术生成

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>

<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属性指定的目标页面)

datalist

<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: 段落文字颜色

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, 可变向量图)

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