HTML基础语法

文章目录

  • HTML基本语法
    • HTML基本结构
        • HTML标签
        • HTML元素
        • HTML属性
        • 注释
      • DOCTYPE文档类型声明
      • 网页编码设置
    • 文字和段落标签
      • 标题标签
      • 段落标签
      • align对齐属性值
      • 换行标签
      • 水平线
      • 修饰标签
      • 特殊符号
    • 列表标签
      • 无序列表
        • type属性值
      • 有序列表
        • type属性值
      • 定义列表
      • 列表标签应用场景
    • 图像和超链接标签
      • 图像标签
        • img属性
        • 路径选择
        • alt属性
      • 超链接标签
        • 属性
        • 锚链接
        • 定义锚(同一页面)
        • 锚链接使用
        • 定义锚(不同页面)
        • 邮件链接
        • 文件下载

HTML基本语法

  • HTML不需要编译,直接由浏览器执行
  • HTML文件是一个文本文件
  • HTML文件必须使用html或htm为文件名后缀
  • HTML大小写不敏感,HTML与html相同

HTML基本结构

HTML标签

  • 一般成对出现
  • <标签>

HTML元素

  • 由开始标签、内容、结束标签组成

HTML属性

  • <标签名 属性名1 = “属性值” …>…

注释



<html>
<head>
    <title>hellotitle>
head>
<body bgcolor="red">
    <p>hello html!p>
    <hr>
body>
html>

DOCTYPE文档类型声明

  • 声明必须放在HTML文档第一行
  • 声明不是HTML标签

<html>
<head>
    
    <title>文字和段落标签title>
head>
<body>
    
    hello
body>
html>

网页编码设置


<html>
<head>
    <title>文字和段落标签title>
head>
<body>
    HTML是超文本语言
body>
html>

乱码

问题:上述代码运行会导致乱码
解决:在>标签添加即可


<html>
<head>
    <title>文字和段落标签title>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
head>
<body>
    HTML是超文本语言
body>
html>

文字和段落标签

标题标签

<h1>h1>~<h6>h6>

段落标签

<p>p>

align对齐属性值

left right center justify
描述 左对齐内容 右对齐内容 居中对齐内容 对行进行伸展,这样每行都可以有相等的长度

换行标签

<br/>

水平线

属性 width color align nosjade
描述 设置水平线宽度,可以像素或百分比 设置水平线颜色 设置水平线居中对齐 设置水平线无阴影

修饰标签

  • 文字斜体:
  • 加粗:
  • 下标:
  • 上标:
  • 下划线:
  • 删除线:

特殊符号

属性 < >  
显示结果 < > Space
描述 小于号或显示标记 大于号或显示标记 不断行的空白

<html>
<head>
    <title>文字和段落标签title>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
head>
<body>
    <h1>什么是HTMLh1>
    <h2>什么是HTMLh2>
    <h3>什么是HTMLh3>
    <h4>什么是HTMLh4>
    <h5>什么是HTMLh5>
    <h6>什么是HTMLh6>
    <p align="left">HTML 指的是超文本标记语言,HTML 不是一种编程语言,而是一种标记语言,标记语言是一套标记标签p>
    <p align="right">HTML 指的是超文本标记语言,HTML 不是一种编程语言,而是一种标记语言,标记语言是一套标记标签p>
    <p align="justify">HTML 指的是超文本标记语言,HTML 不是一种编程语言,而是一种标记语言,标记语言是一套标记标签p>
    <p align="center">HTML 指的是超文本标记语言,HTML 不是一种编程语言,而是一种标记语言,标记语言是一套标记标签p>
    <p>    HTML 指的是超文本标记语言,
    <br/>HTML 不是一种编程语言,
    <br/>而是一种标记语言,
    <br/>标记语言是一套标记标签p>
    <pre>
        HTML 指的是超文本标记语言,
    HTML 不是一种编程语言,
    而是一种标记语言,
    标记语言是一套标记标签
    pre>
    <hr width="80%" color="#6666" align="left"/>
    <p><i>HTMLi> 标记标签通常被称为<em>HTML 标签em>p>
    <p>HTML 标签是由<b>尖括号b>包围的<strong>关键字strong>p>
    <p>HTML 标签通常是<ins>成对出现ins>p>
    <p>标签对中的第一个标签是<del>开始标签del>,第二个标签是<del>结束标签del>p>
    <p>开始和结束标签也被称为<sup>开放标签sup><sub>闭合标签sub>p>
    <p>标签成对出现,比如<b></b>p>
body>
html>

HTML基础语法_第1张图片在这里插入图片描述

列表标签

无序列表

<ul>
<li>列表项li>
<li>列表项li>
......
ul>

type属性值

disc square circle
描述 圆点 正方形 空心圆

<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
    <title>标题title>
head>
<body>
<h1>什么是 HTML?h1>
<ul type="disc">
<li>HTML 指的是超文本标记语言li>
<li>HTML不是一种编程语言,而是一种标记语言,标记语言是一套标记标签li>
ul>
<ul type="square">
<li>HTML 指的是超文本标记语言li>
<li>HTML不是一种编程语言,而是一种标记语言,标记语言是一套标记标签li>
ul>
<ul type="circle">
<li>HTML 指的是超文本标记语言li>
<li>HTML不是一种编程语言,而是一种标记语言,标记语言是一套标记标签li>
ul>
body>
html>

HTML基础语法_第2张图片

有序列表

<ol>
<li>列表项li>
<li>列表项li>
......
ol>

type属性值

1 a A i I
描述 数字1,2… 小写字母a,b… 大写字母A,B… 小写罗马数字i 大写罗马数字I

<html>
<head>
<meta charset=utf-8>
<meta name=description content="hello.html">
<meta name=viewport content="width=device-width, initial-scale=1">
    <title>标题title>
head>
<body>
<ol type="1">
<li>指的是超文本标记语言li>
<li>HTML不是一种编程语言,而是一种标记语言,标记语言是一套标记标签li>
<li>HTML 指的是超文本标记语言li>
<li>HTML不是一种编程语言,而是一种标记语言,标记语言是一套标记标签li>
ol>
<ol type="a">
<li>指的是超文本标记语言li>
<li>HTML不是一种编程语言,而是一种标记语言,标记语言是一套标记标签li>
<li>HTML 指的是超文本标记语言li>
<li>HTML不是一种编程语言,而是一种标记语言,标记语言是一套标记标签li>
ol>
<ol type="I">
<li>指的是超文本标记语言li>
<li>HTML不是一种编程语言,而是一种标记语言,标记语言是一套标记标签li>
<li>HTML 指的是超文本标记语言li>
<li>HTML不是一种编程语言,而是一种标记语言,标记语言是一套标记标签li>
ol>
body>
html>

HTML基础语法_第3张图片

定义列表


定义列表项

列表项描述

列表项描述

定义列表项

列表项描述


<dl>
<dt>指的是超文本标记语言dt>
<dd>HTML不是一种编程语言,而是一种标记语言,标记语言是一套标记标签dd>
<dd>HTML 指的是超文本标记语言dd>
<dt>HTML不是一种编程语言,而是一种标记语言,标记语言是一套标记标签dt>
dl>

列表标签应用场景

  • 可在网页中的开发者选项查看

图像和超链接标签

图像标签

<img src="" alt=""/>

img属性

属性 Src(必写) alt height width
URL 文字 数值和百分比 数值和百分比
描述 显示图像的URL 图像代替文本 图像的高 图像的宽

路径选择

  1. 在同一目录下
<img src="1.jpg"/>
  1. 图片在上一级目录中
<img src="../1.jpg"/>
  1. 图片在下一级目录中
<img src="文件夹名/1.hpg"/>
  1. 绝对路径直接写地址

alt属性

当由于网速太慢、src属性中的错误、浏览器禁用图像,用户无法查看图像,alt属性可以代替图像显示在浏览器中的内容


<html>
<head>
    <title>图像和超链接title>
    <meta charset=utf-8>
    <meta name=description content="hello.html">
    <meta name=viewport content="width=device-width, initial-scale=1">
head>
<body>
    <img src="1.jpg" alt="html" width="50px" height="80px" />
body>
html>

效果不予展示,原因为本人图片,自己脑补吧

超链接标签

<a href=" ">a>

href:链接地址,可以是内部链接或外部链接


<html>
<head>
    <title>图像和超链接title>
    <meta charset=utf-8>
    <meta name=description content="hello.html">
    <meta name=viewport content="width=device-width, initial-scale=1">
head>
<body>
    <a href="https://home.firefoxchina.cn/?from=extra_start"><img src="1.jpg" alt="html" width="50px" height="80px" />a>
body>
html>

空链接:

属性

属性 href target title name
描述 链接地址 链接的目标窗口_self、_blank、_top、_parent 链接提示文字 链接命名

_self:在当前窗口打开
_blank:在新窗口打开

锚链接

在当个页面内不同地方的跳转,也叫书签

定义锚(同一页面)

<a href="#锚名1">目录1a>
<a href="#锚名2">目录2a>
<a href="..." name="锚名1">内容a>
XXXXXXXXXX
XXXXXXXXXXXXXXXXXX
<a href="..." name="锚名2">内容a>
XXXXXXXXXX
XXXXXXXXXXXXXXXXXX

锚链接使用

  1. 定义锚的位置和锚名
  2. 设置寻找锚的链接

定义锚(不同页面)

网页1:......
网页2:......

邮件链接

<a href="mailto:邮件地址">......a>

文件下载

<a href="下载文件的地址">......a>

你可能感兴趣的:(前端)