当前位置：首页 > news >正文

html基础学习

news 2025/8/5 1:09:19

初识HTML

HTML: 超文本标记语言

一.HTML的基本结构

根控制标记(头)

头控制标记(头)

标题

标题标记

头控制标记(尾)

网页显示区域(一般要实现的代码都在这里写)

</body> 根控制标记(尾)

二.网页的基本标签

标题标签

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

段落标签

换行标签
水平线标签
字体标识标签粗体用strong

斜体：em
特殊符号

空格 &nbsp

大于号 &gt

小于号 &lt

版权所有 &copy

三.图像标签

<img src = "", alt = "">
src为必填项 表示图片的地址
alt 表示图片的名字

四.超链接

锚链接

(1)需要一个锚标记

(2) 跳转到标记#
功能性链接：邮箱链接 mailto:
行内元素和块元素

五.列表

有序列表
<ol><li></li><li></li></ol>无序列表
<ul><li></li><li></li></ul>自定义列表
<dl>标签<dt>列表名称</dt><dd>列表内容</dd>
</dl>

六表格标签

<table><tr>行</tr><td>列</td></table><td colspan = "4"> 跨列</td>
<td rowspan = "4"> 跨行</td>

七媒体元素

音频 audio

视频 video

八网页的简单布局

头部

脚部

主体

九内联框架

iframe

<iframe src = "path" name = "mainFrame"></iframe>

十表单

action:表单提交的位置，可以是网站，也可以是一个请求处理地址

post：比较安全，适合传输大文件

get: 可以再URL中看到我们提供的信息，不安全但是高效

<form action="1.我的第一个网页.html" method="get"><!--文本输入框--><p>名字：<input type="text" name="username" value="hhh" maxlength="8" size="30" readonly></p><!--密码框--><p>密码：<input type="password" name="pwd" hidden></p><!--单选框--><p>性别：<input type="radio" value="boy" name="sex" checked disabled/>男<input type="radio" value="girl" name="sex"/>女</p><!--多选框--><p>爱好：<input type="checkbox" value="sleep" name="hobby">睡觉<input type="checkbox" value="code" name="hobby" checked>敲代码<input type="checkbox" value="chat" name="hobby">聊天</p><!--按钮--><p>按钮：<input type="button" name="btn1" value="点击变长"><!--<input type="image" src="../resources/image/1.PNG" >--></p><!--下拉框，列表框--><p>国家：<select name="列表名称" ><option value="China">中国</option><option value="us">美国</option><option value="rth" selected>瑞士</option></select></p><p>文本域：<textarea name="textarea" id="" cols="10" rows="10">文本内容</textarea></p><p>文件域：<input type="file" name="files" ></p><!--邮件验证--><p>邮箱：<input type="email" name="email"></p><!--URL--><p>URL：<input type="url" name="url"></p><!--数字--><p>数字：<input type="number" name="number" max="200" min="0" step="10"></p><!--滑块--><p>滑块：<input type="range" name="voice" max="100" min="0" step="1"></p><!--搜索框--><p>搜索框：<input type="search" name="search" max="200" min="0" step="10"></p><p><input type="submit"><input type="reset"></p>