狂神说HTML

狂神说HTML

什么是HTML

Hyper Text Markup Language（超文本标记语言) 超文本包括文字、图片、音频、视频、动画等。

  • HTML5优势：世界知名浏览器厂商对HTML5的支持、市场的需求、跨平台。
  • W3C：万维网联盟，成立于1994年，web技术领域最权威和具影响力的国际中立性技术标准机构
  • W3C标准包括：结构化标准语言（HTML、XML）、表现标准语言（CSS）、行为标准（DOM、ECMAScript）
  • 常见IDE：记事本、Dreamweaver、IDEA、WedStorm等。
<html>
<head>
    <title>我的第一个网页</title><!--头标签-->
</head>
<body>
    我的第一个网站<!--主体标签-->
</body>
</html>

head标签代表网页头部

body标签代表网页主体

网页基本信息

注释：

DOCTYPE声明

DOCTYPE是一个文档类型，作用是告诉浏览器，我们要使用什么规范。

head标签代表网页头部

<head>      
</head>

body标签代表网页主体

<body>      
</body>

title标签

title代表网页标题

<title>网页标题</title>

meta标签

meta是描述性标签，它用来描述我们网站的一些信息。[一般用来做SEO（搜索引擎优化）]

<meta charset="UTF-8">
<meta name="keywords" content="关键词1,关键词2">
<meta name="description" content="描述">

keywords是关键词，description是描述。

网页基本标签

标题标签

<h1>一级标签</h1>
<h2>二级标签</h2>
<h3>三级标签</h3>
<h4>四级标签</h4>
<h5>五级标签</h5>
<h6>六级标签</h6>

段落标签

用来分段

<p>中秋节，又称祭月节、月光诞、月夕、秋节、仲秋节、拜月节、月娘节、月亮节、团圆节等，是中国民间传统节日。</p>
<p>中秋节源自天象崇拜，由上古时代秋夕祭月演变而来。中秋节自古便有祭月、赏月、吃月饼、看花灯、赏桂花、饮桂花酒等民俗，流传至今，经久不息。</p>

换行标签

上面的段落标签，换成换行标签 也可以但段落中间间距会小一点

中秋节，又称祭月节、月光诞、月夕、秋节、仲秋节、拜月节、月娘节、月亮节、团圆节等，是中国民间传统节日。<br>
中秋节源自天象崇拜，由上古时代秋夕祭月演变而来。中秋节自古便有祭月、赏月、吃月饼、看花灯、赏桂花、饮桂花酒等民俗，流传至今，经久不息。<br/>

水平线标签

<hr/>

字体样式标签

<!--粗体-->
<strong>粗体标签</strong>
<!--斜体-->
<em>斜体标签</em>

注释和特殊符号

注释：<!--注释-->

特殊符号：
空格：&nbst;
大于：&gt;
小于：&lt;
版权号：&copy;
特殊符号记忆方式：&  ;

图像标签

常见图像格式：JPG、GIF、PNG、BMP等。

格式：

<img src="path" alt="text" title="text" width="x" heigjt="y"/>
  图像地址      图像的替代文字 鼠标悬停提示文字 图像宽度  图像高度

../代表返回上一级目录，src：图片地址[相对地址（推荐使用）、绝对地址]，alt：图片名字（必填）例：

<img src="../img/01.jpg" alt="图片名字" title="悬停文字" width="300" height="300">

链接标签

格式：

<a href="path" target="目标窗口位置">链接文本或图像</a>

href="path"代表链接路径，例：

<a href="https://www.baidu.com">点击我跳转到百度</a>

<a href="https://www.baidu.com">
  <img src="../../img/01.png"alt="婴儿" title="小婴儿"  width="328" height="213">
</a>     这是给图片加上链接

target表示窗口在哪里打开（常用值：_self、 _blank）, _blank代表会在新标签中打开， _self在自己的网页中打开。例：

<a href="https://www.baidu.com" target=" _blank">点击我跳转到百度</a>
<a href="https://www.baidu.com" target="_self">点击我跳转到百度</a>

超链接

  • 页面间链接：从一个页面链接到另一个页面。（如上）
  • 锚链接: 回到顶部：1.需要一个锚标记（使用name作为标记） 2.跳转到标记 （也可以命名down跳到底部）
<a name="top">顶部</a>
<a href="#top">回到顶部</a>

可以页面跳转：

<a href="04.html#top">跳转</a>

功能性链接

  • 邮件链接：mailto：
<a href="mailto：123456789@qq.com">点击联系我</a>
  • QQ链接：搜索QQ推广进入官网，进入界面并登录，点击推广工具，选择样式并填写提示语，复制下面的代码粘贴过来就行。例：
<a target="_blank" href="http://wpa.qq.com/msgrd?v=3&uin=&site=qq&menu=yes"><img border="0" src="http://wpa.qq.com/pa?p=2::53" alt="欢迎加我" title="欢迎加我"/></a>

行内元素和块元素

  • 块元素：无论内容多少，该元素独占一行。（p、h1-h6）
  • 行内元素：内容撑开宽度，左右都是行内元素的可以在排一行（a.strong.em…）

列表标签

列表就是信息资源的一种展示形式。它可以是信息结构化和条理化，并以列表的样式显示出来，以便浏览者能更快捷的获得相应的信息

  • 列表分类：

1.有序列表（应用于试卷、问答等），格式：

<ol>
  <li>Java</li>
  <li>C/C++</li>
  <li>Python</li>
</ol>

2.无序列表（应用于导航、侧边栏），格式：

<ul>
  <li>Java</li>
  <li>C/C++</li>
  <li>Python</li>
</ul>

有序列表的列表符号:

type="A" A B C D ；

type="a" a b c d；

type="1" 1 2 3 4 ；

默认值type="I" I II III ；type="i" i ii iii

3.自定义列表（dl：标签；dt：列表名称；dd：列表内容。一般用于公司网站底部）,格式：

<dl>
  <dt>编程语言</dt>
  
  <dd>Java</dd>
  <dd>C/C++</dd>
  <dd>Python</dd>
</dl>

表格标签

表格特点：简单通用，结构稳定。

基本结构：单元格（table）、行（tr）、列（td）、跨行（rowspan）、跨列（colspan）

格式：

<table border="1px">
<!--border是加边框的后填宽度-->
<tr>
  <td colspan=“4”>1-1</td>
</tr>
<tr>
  <td rowspan=“2”>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>

注：可以先做一个最简单的表格然后再跨行和跨列，把挤出来的删掉就行了。

 

媒体标签

  • 视频元素（video）,格式：
<video src="视频地址" controls autoplay width="宽" height="高"></video>
  • 音频元素（audio），格式：
<audio src="音频地址" controls autoplay></audio>

注：controls（控制条）、 autoplay（自动播放）

网页结构分析

 

iframe内联框架

在一个网页里面嵌套另一个网页，格式：

<iframe src="path" name="mainFrame"></iframe>
<!--mainFrame是框架标识名-->

例：

<iframe src="https://www.baidu.com/" name="百度" frameborder="0" width="1000xp" height="800px"></iframe>

与超链接组合在网页中打开网页

<iframe src="" name="hello" frameborder="0" width="1000xp" height="800px"></iframe>
<a href="HTML01.html" target="hello">点击我跳转到页面1</a>

 

表单标签

表单语法

<form method="post" action="result.html">
<p>名字：<input name="name" type="text"></p ><p>密码：<input name="pass" type="password"></p > <p>
<input type="submit" name="Button" value="提交">
<input type="reset" name="Reset" value="重填“/></p >
</form>

method="post"规定如何发送表单数据 表示向何处发送表单数据常用值：get | post

action="result.html"表示向何处发送表单数据

表单元素标记

 

表单应用

  • 隐藏域（hidden）
  • 只读（readonly）
  • 禁用（disabled）
<body>

<h1>注册</h1>

<!--表单form
action：表单提交的位置，可以是网站，也可以是一个请求处理地址
method:post,get提交方式
    get方式提交：我们可以在url中看到我们提交的信息，不安全，高效
    post：比较安全，传输大文件
-->

<form action="HTML01.html" method="get">
    <!--文本输入框：input type="text"
    value="" 默认初始值
    maxlength="8"  最长能写几个字符
    size="30"  文本框长度
    -->
    <p>名字<input type="text" name="username" value="孤烟冷" maxlength="8" size="30"></p>
    <!--密码框：input type="password"-->
    <p>密码<input type="password" name="psd"></p>

    <!--单选框标签：input type="radio"
    value：单选框的值
    checked：默认选中
    -->
    <p>性别：
        <input type="radio" value="boy" name="sex" checked/>男
        <input type="radio" value="girl" name="sex"/>女
    </p>

    <!--多选框
    input type="checkbox"
    -->
    <p>爱好：
        <input type="checkbox" value="sleep" name="hobby">睡觉
        <input type="checkbox" value="code" name="hobby" checked>写代码
        <input type="checkbox" value="chat" name="hobby">聊天
        <input type="checkbox" value="game" name="hobby">游戏
    </p>
    
    <!--按钮
    input type="button" 普通按钮
    input type="image"  图像按钮
    input type="submit" 提交按钮
    input type="reset"  重置按钮
    -->
    <p>按钮：
        <input type="button" name="btn1" value="点击变长">
        <input type="image" src="../image/logo01.jpg" width="200" height="200">
    </p>

    <!--下拉框，列表框-->
    <p>国家：
        <select name="列表名称" id="列表id"><!--id可不要-->
            <option value="China">中国</option>
            <option value="US">美国</option>
            <option value="ETH" selected>瑞士</option>
            <option value="India">印度</option>
        </select>
    </p>

    <!--文本域
    cols="50" 行
    rows="10" 列
    -->
    <p>反馈：
        <textarea name="textarea" id="textarea" cols="50" rows="10">文本内容</textarea>
    </p>

    <!--文件域 input type="file"
    name属性必须填
    -->
    <p>
        <input type="file" name="files">
        <input type="button" value="上传" name="upload">
    </p>

    <!--邮件验证-->
    <p>邮箱：
        <input type="email" name="email">
    </p>

    <!--URL 网址-->
    <p>URL:
        <input type="url" name="url">
    </p>

    <!--数字-->
    <p>数字：
        <input type="number" name="num" max="100" >
    </p>

    <!--滑块
    step每次加多少
    -->
    <p>音量:
        <input type="range" name="voice" min="0" max="100" step="2">

    </p>

    <!--搜索框-->
    <p>搜索：
        <input type="search" name="search">
    </p>

    <!--
    readonly只读
    disabled禁用
    hidden隐藏
    -->

    <!--增强鼠标可用性-->
    <p>
        <label for="mark">你点我试试</label>
    <input type="text" id="mark">
    </p>

    <p>
        <input type="submit">
        <input type="reset" value="清空表单">
    </p>
</form>
</body>

表单初级验证

用表单验证可以减轻服务器的压力还可以增加安全性

  • 常用方式：placeholder（提示信息）、required（非空判断）、pattern（正则表达式 ）。


 

posted @   孤烟冷  阅读(68)  评论(0)  编辑  收藏  举报
相关博文：
· 网页制作HTML
· 狂神说CSS
· HTML5
· HTML5
· HTML简述
阅读排行：
· 阿里最新开源QwQ-32B，效果媲美deepseek-r1满血版，部署成本又又又降低了！
· SQL Server 2025 AI相关能力初探
· 单线程的Redis速度为什么快？
· AI编程工具终极对决：字节Trae VS Cursor，谁才是开发者新宠？
· 开源Multi-agent AI智能体框架aevatar.ai，欢迎大家贡献代码
点击右上角即可分享
微信分享提示
AI IDE Trae