HTML语法格式

最新推荐文章于 2024-08-24 09:46:30 发布

洛玉笛

最新推荐文章于 2024-08-24 09:46:30 发布

阅读量4.5k

点赞数 6

文章标签： html

本文链接：https://blog.csdn.net/m0_56246862/article/details/119296338

版权

什么是HTML

超文本表达语言，即为超文本标记语言，简称为HTML。超级文本标记语言是标准通用标记语言下的一个应用，也是一种规范，一种标准，它通过标记符号来标记要显示的网页中的各个部分。

HTML基本框架

<!DOCTYPE html>		
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

</body>
</html>

在idea中创建HTML文件会自动生成以上代码片

!DOCTYPE html是用来告诉浏览器使用的是HTML规则
html lang=“en” 向搜索引擎表示该页面是html语言，并且语言为英文网站，其"lang"的意思就是“language”，语言的意思，而“en”即表示english。如果页面为中文应将其改为lang=“zh”
< head > 标签用于定义文档的头部，它是所有头部元素的容器。 < head > 中的元素可以引用脚本、指示浏览器在哪里找到样式表、提供元信息等等。文档的头部描述了文档的各种属性和信息，包括文档的标题、在 Web 中的位置以及和其他文档的关系等。
< body >标签包裹的部分为网页主体

文字符号标签

标题标签

<!--标题标签-->
<h1>一级标签</h1>
<h2>二级标签</h2>
<h3>三级标签</h3>
<!--标题标签一直到六级标签<h6>-->

标签截图

换行标签

 <!--换行标签<br>-->
 春夜洛城闻笛 <br>
谁家玉笛暗飞声，散入春风满洛城。 <br>
此夜曲中闻折柳，何人不起故园情。 <br>

演示截图

段落标签

 <!--段落标签<p>-->
<p>春夜洛城闻笛</p>
<p>谁家玉笛暗飞声，散入春风满洛城。</p>
<p>此夜曲中闻折柳，何人不起故园情。</p>

演示截图
可以看到段落标签也能达到换行的效果,但是他与换行标签又是不同的,行与行之间的间隔大小不同.

分割线标签

 <!--分割线标签<hr>-->
 春夜洛城闻笛 <br>
谁家玉笛暗飞声，散入春风满洛城。 <br>
此夜曲中闻折柳，何人不起故园情。 <br>
<hr>
<p>春夜洛城闻笛</p>
<p>谁家玉笛暗飞声，散入春风满洛城。</p>
<p>此夜曲中闻折柳，何人不起故园情。</p>

演示截图
可以看到两首诗中间的分割线就是< hr >的效果

文字样式标签

 <!--文字样式标签<hr>-->
<strong>粗体: i love you </strong>
<hr>
<em>斜体: i love you </em>

演示截图

特殊符号标签

<br>
空&nbsp;格
<br>
&gt;
<br>
&lt;
<br>
&copy;
<!--特殊符号有很多此处制作一些演示-->

演示截图

媒体标签

图像标签

<!--src表示图片的储存路径
alt表示名称
title表示鼠标悬停文字
width表示长度
height表示宽度-->

<img src="../resource/image/1.jpeg" 
	alt="我的头像"  			<!--如果图像不加载此处文字会代替图片出现-->
	title="鼠标悬停文字" 		<!--鼠标悬停在图片上会出现的文字-->
	width="800" 
	height="565.5">
	
<!--图像标签也会有其他属性此处制作演示-->

截图演示

视频标签

<!--视频-->
<!--
src路径
controls控制部件
muted autoplay自动播放
-->
<video muted src="../resource/video/1.mp4" controls autoplay></video>

截图演示

音频标签

<!--音频-->
<!--
src路径
controls控制部件
muted autoplay自动播放
-->
<audio src="../resource/audio/1.mp3" controls></audio>

测试截图

列表标签

有序标签

<!--有序列表-->
<ol>
    <li>你爱我</li>
    <li>我爱你</li>
    <li>蜜雪冰城</li>
    <li>甜蜜蜜</li>
</ol>

截图演示

无序标签

<!--无序标签-->
<ul>
    <li>java</li>
    <li>python</li>
    <li>c/c++</li>
    <li>html</li>
</ul>

截图演示

自定义标签

<!--自定义列表-->
<dl>
    <dt>学科</dt>
    <dd>Java</dd>
    <dd>Linux</dd>
    <dd>c/c++</dd>
    
    <dt>学科</dt>
    <dd>Java</dd>
    <dd>Linux</dd>
    <dd>c/c++</dd>
</dl>

截图演示

表格标签

<!--
表格
行标签 tr
列标签 td
-->
<!--        border="1px"表格外框线-->
<table border="1px">
    <tr>
<!--        colspan跨列-->
        <td colspan="4">1-1</td>
    </tr>
    <tr>
<!--        rowspan跨行-->
        <td rowspan="2">2-1</td>
        <td>2-2</td>
        <td>2-3</td>
        <td>2-4</td>
    </tr>
    <tr>
        <td>3-1</td>
        <td>3-2</td>
        <td>2-3</td>
    </tr>
</table>

<hr>

<table border="1px">
    <tr>
<!--        align="center"居中-->
        <td colspan="3" align="center">学生成绩</td>
    </tr>
    <tr>
        <td rowspan="2">洛玉笛</td>
        <td>语文</td>
        <td>100</td>
    </tr>
    <tr>
        <td>数学</td>
        <td>100</td>
    </tr>
    <tr>
        <td rowspan="2">久长</td>
        <td>语文</td>
        <td>100</td>
    </tr>
    <tr>
        <td>数学</td>
        <td>100</td>
    </tr>
</table>

测试截图

表单标签

<h1>注册</h1>
<!--
表单提交
action 表单的提交位置,可以是网站,也可以是一个请求处理地址
method : post和get 两种提交方式
get方式可以看到提交的信息,不安全,但是高效
post方式看不到提交的信息安全 传输大文件
-->
<form action="2.图片标签.html" method="get">

    <!--input,type
        value 默认值
        maxlength 最大长度
        size 文本框的长度
        readonly 只读标签
        disable 禁用标签
        hidden 隐藏标签 一般用于提交默认值*

         表单初级判断
         placeholder 提示信息
         required 非空判断
-->
    <p>名字: <input type="text" name="username" value="username" maxlength="8" size="20" required> </p>
    <p>密码: <input type="password" name="pwd" placeholder="123456" required> </p>

    <!--单选框标签
        input type="radio"
        value : 单选框的值
        name : 表示组
-->
    <p>性别:
        <input type="radio" value="boy" name="sex">男
        <input type="radio" value="girl" name="sex">女
    </p>

    <!--搜索框-->
    <p>不一样的框框:
        <input type="search" name="search"> <!--这个框框后面有个叉号-->
    </p>

    <!--增强鼠标可用性-->
    <p>
        <label for="mark">点击我</label> <!--和下面是两种不同写法-->
        <input type="text" id="mark">
    </p>

    <p>
        <label>点击我
            <input type="text"> <!--点击文字即可直接跳转文本框-->
        </label>
    </p>

    <!--邮件验证-->
    <p>邮箱:
        <input type="email" name="email"> <!--这个会简单验证输入的是否为正确形式的邮箱-->
    </p>

    <!--pattern 正则表达式-->
    <p>邮箱
        <input type="text" name="diy email" pattern="\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*"> <!--会根据你的正则表达式判断是否为正确形式的邮箱-->
    </p>

    <!--URL验证-->
    <p>URL:
        <input type="url" name="url"> <!--这个会简单验证输入的是否为正确形式的url-->
    </p>

    <!--数字验证
        step 步长
-->
    <p>年龄:
        <input type="number" name="number" max="100" min="0" step="10">
    </p>

    <!--    滑块-->
    <p>体重:
        <input type="range"  name="voice" min="0" max="100" step="10">
    </p>

    <!--多选框标签-->
    <p>爱好:
        <!--checked 默认值选中-->
        <input type="checkbox" value="code" name="hobby" checked>敲代码
        <input type="checkbox" value="sleep" name="hobby">睡觉
        <input type="checkbox" value="chat" name="hobby">聊天
        <input type="checkbox" value="game" name="hobby">游戏
    </p>

    <!--selected 默认值-->
    <p>国家
        <select name="国家">
            <option value="China" selected>中国</option>
            <option value="usa">美国</option>
            <option value="eth">英国</option>
            <option value="India">法国</option>
        </select>
    </p>

    <!--文本域-->
    <p>其他:
        <textarea name="textarea" cols="30" rows="10">文本内容</textarea>
    </p>

    <!--文件域-->
    <p>
        <input type="file" name="files">
        <input type="button" value="上传" name="upload"> <!--这个按钮也没什么作用-->
    </p>

    <!--创建一个按钮-->
    <p>
        <!--普通按钮-->
        <input type="button" name="btn1" value="点击"> <!--因为什么属性也没有加所以这个按钮按下没有作用-->

        <!--图片按钮image和submit一样会提交数据-->
        <input type="image" src="../resource/image/1.jpeg" height="40" width="40"> <!--这个按钮的属性和上面的按钮不同,这个按钮会提交表单-->
    </p>

    <!--提交按钮,重置按钮-->
    <p>
        <input type="submit"> <!--提交表单按钮-->
        <input type="reset" value="清空表单"> <!--清空表单按钮-->
    </p>
</form>

测试截图

链接标签

网页链接

    <!--a标签
        href网页链接
        target表示窗口在那里打开
        _blank打开在新窗口
        _parent打开在
        _self在自己的网页打开
-->
<!--    href不仅可以是网页链接也可以是本地的文件,只需要写对应的路径-->
    <p>
        <a href="https://www.baidu.com" target="_self">点击我跳转到百度</a>
    </p>

<!--    此处是把上文的"点击我跳转到百度"换成了一张图片,图片的具体格式见上文-->
<!--    此时点击图片也可以进行跳转-->
    <p>
        <a href="https://www.baidu.com">
            <img src="../resource/image/1.jpeg" 
            alt="百度" title="点击跳转百度" 
            width="80" 
            height="56.55">
        </a>
    </p>

测试截图

功能链接

<a href="mailto:2940651141@qq.com">点击联系我</a>
<!--点击生成的链接就可以直接弹出邮箱-->

测试截图

点击链接后会直接弹出对话框发邮件

QQ推广图片
相信很多人都见过上面的链接
这种链接的生成是在QQ推广这个网页中生成的
在这里插入图片描述

里面生成的代码就是我们的a标签链接

<!--QQ推广-->
<a target="_blank" 
	href="http://wpa.qq.com/msgrd?v=3&uin=qq号&site=qq&menu=yes">
		<img border="0" src="http://wpa.qq.com/pa?p=2:2940651141:53" 
			alt="你好请点击这里联系我" 
			title="你好请点击这里联系我"/>
</a>
<!--其实这个链接的组成方式和我们上面的跳转百度链接是相同的-->

锚链接

其实链接标签的功能十分强大,不仅可以在不同页面之间跳转,还可以在同一个页面的不同部位跳转
我们经常可以看到点击此处跳转到页面顶部
这就是锚链接
锚链接就是现在页面某位置标记一个锚点
然后设置一个a标签链接跳转至锚点
可以实现跳转到页面的任何位置

<a name="top"></a>  <!--锚点-->

<a href="#top">回到顶部</a> <!--点击链接即可跳转至锚点-->

内联框架

内联框架就是在网页中嵌入另外的网页

<!--比如我现在在我的页面中嵌入bilibili网页-->
<iframe src="" frameborder="0" name="hello" height="700xp" width="1100xp"></iframe>
<a href="https://www.bilibili.com" target="hello">点我跳转</a>

在这里插入图片描述

在点击"点我跳转"直接在页面中嵌入了bilibili
但是要注意浏览器如果设置cookie就会拦截第三方的网站

另外还可以在页面中添加哔哩哔哩视频效果如下
在这里插入图片描述
在页面中直接出现视频
具体链接在下面
分享下面的嵌入代码
吧嵌入代码直接写到文件中即可

<iframe src="//player.bilibili.com/player.html?aid=804227416&bvid=BV1zy4y1T74a&cid=369121124&page=1" 
        scrolling="no" 
        border="0" 
        frameborder="no" 
        framespacing="0" 
        allowfullscreen="true"> 
</iframe>
<!--这样即可直接在网页中嵌入视频-->