HTML概述

简单概括一下HTML的内容。

首先介绍一下HTML是个什么东西。

什么是 HTML？

HTML，是用来描述网页的一种语言。，超文本标记语言，信息可以用文本，图片，声音，图像等等表示，用html语言编写文档，就可以包含其他形式的信息。使用大量的标签来描述网页。

基本标签:

结束标签需要加一个/。例如:

声明必须是 HTML 文档的第一行，位于 标签之前。 
<!DOCTYPE> 声明不是 HTML 标签；它是指示 web 浏览器关于页面使用哪个 HTML 版本进行编写的指令。
<meta charset="UTF-8">

<meta>描述性，描述信息，可以描述的包括不限于：name,content 格式,charset 字符集

<h1></h1> 到 <h5></h5> 都是标题，从1级标题到5级 标题。
    例如: <meta charset="UTF-8" >意思是设置字符集为UTF-8.
        整体<html>
        头<head>
        题目<title>
        体<body>
        段落<p>
        换行<br>
        水平线<hr>
        斜体<em>
        粗体<strong>

但是因此 > < 空格 特殊符号被占用了，就用其他的符号来代替。

> —— &gt; 
< —— &lt;
空格 —— &nbsp;
版权号 —— &copy;
& —— &amp;

example01:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<p>段落1</p>
<p>段落2</p>
换行1<br>
换行2 <br>
水平线
大于号 : &gt; <br>
小于号 : &lt; <br>
空格 : &nbsp;&nbsp;&nbsp; <br>
版权号: &copy; <br>
& : &amp; <br>
<hr>
</body>
</html>

图像

<img>

属性：src 图片地址

alt 替代名，如果找不到图片就用这个显示

title 悬停名，鼠标悬停的时候，显示的名字

width 宽

height 高

超链接

<a></a>

属性：href 跳转界面

target 窗口在哪打开

锚链接：（页面间跳转）

name 跳转。name用name属性来设置。

example02:

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

<a href="#down" name="top">Top</a>

<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>

<a href="#top" name="down">Down</a>
</body>
</html>

功能性邮件:

<a href="mailto:xxxxx@qq.com"联系</a>

列表:

无序列表:<ul></ul>  unorder list

有序列表:<ol></ol>  Order List

自定义：<dl></dl>  <dt>列表名，<dd>内容

example03:

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

<ul>
    <li>苹果</li>
    <li>橘子</li>
    <li>西瓜</li>
</ul>

<ol>
    <li>苹果</li>
    <li>橘子</li>
    <li>西瓜</li>
</ol>

<dl>
    <dt>水果</dt>
    <dd>苹果</dd>
    <dd>橘子</dd>
    <dd>西瓜</dd>
</dl>

</body>
</html>

表格

<table></table>
<tr></tr> 行
<td></td> 列
跨行 rowspan
跨列 colspan

<table border="10">
    <tr>
        <td>1.1</td>
        <td>1.2</td>
        <td>1.3</td>
    </tr>
    <tr>
        <td rowspan="2">2.1</td>
        <td>2.2</td>
        <td>2.3</td>
    </tr>
    <tr>
        <td colspan="2">3.2</td>
    </tr>
</table>

媒体元素:

<video></video>
<audio></audio>
属性:
src 路径
controls 控制器
autoplay 自动播放
muted 静音播放
(我设置自动播放的话，并没有效果，去网上查了后，好像是浏览器不支持（由于浏览器会拦截自动播放声音的视频），加上静音播放就可以自动播放了。
可能是怕声音吓到人吧……)

iframe 内联框架

刚才不是说超链接里有一个target属性，可以选择窗口在那里打开。我们可以在一个页面，开出几个不同的窗口

属性:

name : 名字

id ： id

src 初始显示的页面或者图片

frameborder : 边框

width： 宽

height： 高

scrolling = 是否滚动

表单

<form></form> 表单
method 提交方法：get 、 post
action 提交对象
<input type=""> 属性 type: 参数： text文本、password密码、checkbox多选、radio单选、submit提交
reset重置、file选择文件、image图片、button按钮、email邮件验证、url、number数字、range滑块、search搜索……
属性
type、name、value、size、maxlength、checked、
列表框: <select>
    <option></option>
</select>
文本域:<textarea cols="" rows=""></textarea>
禁用：disabled
隐藏：hidden
只读：readonly

example05

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

<form action="localhost" method="post">
    Username:<input type="text" name="username"> <br>
    Password: <input type="password" name="password"> <br>
    性别: <input type="radio" name="sex" checked>男
    <input type="radio" name="sex">女 <br>
    兴趣: <input type="checkbox" name="hobby">C
    <input type="checkbox" name="hobby" checked>Java
    <input type="checkbox" name="hobby">C++
    <input type="checkbox" name="hobby">Python
    <br>

    所属地区编号: <input type="text" value="不可操作001" disabled>
    标记：<input type="text" value="只能看" readonly>
    <br>
    <select name="Nation">
        <option value="中国">中国</option>
        <option value="澳大利亚">澳大利亚</option>
        <option value="印度">印度</option>
    </select>
    <br>
    个人简介：
    <textarea name="Introduce"  cols="30" rows="10"></textarea> <br>
    简历文件: <input type="file"> <br>
    <input type="submit" value="提交"> <br>
    <input type="reset" value="重置"> <br>

</form>
</body>
</html>
posted @   zxinlog  阅读(75)  评论(0)  编辑  收藏  举报
相关博文：
·  Python爬虫-百度贴吧
·  02-python基础学习
·  2022-08-22 第十小组 石晓荟
·  HTML基础
·  HTML 简介
阅读排行：
· TypeScript + Deepseek 打造卜卦网站：技术与玄学的结合
· 阿里巴巴 QwQ-32B真的超越了 DeepSeek R-1吗？
· 如何调用 DeepSeek 的自然语言处理 API 接口并集成到在线客服系统
· 【译】Visual Studio 中新的强大生产力特性
· 2025年我用 Compose 写了一个 Todo App
点击右上角即可分享
微信分享提示
SQL AI 助手