HTML(结构)基础-笔记

于 2024-10-28 11:47:30 发布
阅读量260 收藏 9
点赞数 4
文章标签： html 笔记 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/treeywind/article/details/143292204
版权

HTML

网页基本信息

<!--DOCYPE : 告诉浏览器,我们使用什么规范 -->
<!DOCTYPE html>
<html lang="en">

<!--head标签代表网页头部-->

<head>
    <!--meta:描述性标签,用来描述网站的一些信息-->
    <meta charset="UTF-8">
    <!--meta标签一般用来做seo-->
    <meta name = "keycription" content = "学习HTMl">
    <!-- title: 网页标题-->
    <title>HTML1</title>
</head>

Hello,world
<!--body标签代表网页主体-->

<body>

</body>
</html>

网页基本标签

  • 标题标签
  • 段落标签
  • 换行标签
  • 水平线标签
  • 字体样式标签
  • 注释和特殊符号标签
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>基本标签</title>
</head>
<body>

<!--标题标签-->
<h1>一级标签</h1>
<h2>二级标签</h2>
<h3>三级标签</h3>
<h4>四级标签</h4>
<h5>五级标签</h5>
<h6>六级标签</h6>
<!--段落标签-->
<p>段落标签</p>
<!--换行标签-->
123<br/>456
<!--水平线标签-->
<hr/>
<!--粗体, 斜体-->
粗体: <strong>i love you</strong>
<br/>
斜体: <em>斜体</em>
<br/>
<!--特殊符号-->
空&nbsp;格
&gt;大于
&lt;小于
&copy;版权符号
<!--
特殊符号记忆方式
&  ;
-->
</body>
</html>

图像标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>图像标签</title>
</head>
<body>
<!--
img学习
src:图片地址
相对地址(推荐),绝对地址
alt:图片名字
两个必须填写
-->
<img src="../resource/img/1.jpg" alt="图片" title="悬停文字" width="400" height="500">
</body>
</html>

超链接标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>超链接标签</title>
</head>
<body>
<!--
a标签:
href:必填,表示要跳转到那个页面
target: 表示窗口在哪里打开
    _blank在新页面打开
    _self在当前页面打开
-->
<a href="图像标签.html" target="_blank">点击跳转到图像</a>
<br/>
<a href="https://www.baidu.com" target="_self">跳转到百度页面</a>
<br/>
<!--中间可以放图片-->
<a href="网页基本标签.html">
    <img src="../resource/img/1.jpg" alt="图片" title="悬停文字" width="400" height="500">
</a>

<p name="top">
    <img src="../resource/img/1.jpg" alt="图片" title="悬停文字" width="400" height="500">
</p>
<!--锚标签
    页面间跳转
1.需要一个锚标签
2.跳转
-->
<br>
<a href="#top">锚</a>
<br>
<br>
<a href="网页基本标签.html#down">跳转到网页基本信息页面</a>
<!--
功能性连接
邮件链接 : mailto
qq链接/QQ推广
-->
<a href="mailto:793164916@qq.com">联系我</a>
</body>
</html>

块元素和行内元素

块元素

无论内容多少,改元素独占一行

p,h1-6

行内元素

内容撑开宽度,左右都是行内元素的可以排在一行

strong,em

列表标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>列表</title>
</head>
<body>
<!--有序列表-->
<ol>
    <li>java</li>
    <li>python</li>
</ol>

<!--无序列表-->
<ul>
    <li>java</li>
    <li>python</li>
</ul>

<!--自定义列表
dl: 标签
dt: 列表名称
dd: 列表内容
-->
<dl>
    <dt>学科</dt>

    <dd>Java</dd>
    <dd>python</dd>

    <dt>位置</dt>

    <dd>天津</dd>
</dl>


</body>
</html>

表格标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表格</title>
</head>
<body>
<!--
table 表格
行 tr
列 td
-->
<table border="1px">
  <tr>
    <!--colspan    跨列-->
    <td colspan="2">1-1</td>
<!--    <td>1-2</td>-->
  </tr>
  <tr>
<!--    rowspan: 跨行-->
    <td rowspan="2">2-1</td>
    <td>2-2</td>
  </tr>
  <tr>
    <td>3-1</td>
<!--    <td>3-2</td>-->
  </tr>
</table>
</body>
</html>

媒体元素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>媒体元素</title>
</head>
<body>
<!--视频
autoplay 打开网页就会自动播放
controls 控制条
src: 资源路径
-->
<video src="" controls autoplay></video>
<!--音频
autoplay 自动播放
同video
-->
<audio src="" controls autoplay></audio>
</body>
</html>

页面结构分析

元素名描述
header标题头部区域的内容(用于页面或页面的一块区域)
footer标记脚部区域的内容(用于整个页面或页面中的一块区域)
sectionweb页面中的一块独立区域
article独立的文章内容
aside相关内容或应用
nav导航辅助内容
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>页面结构</title>
</head>
<body>
<header>
  <h2>网页头部</h2>
</header>

<section>
  <h2>网页主体</h2>
</section>

<footer>
  <h2>网页脚部</h2>
</footer>

</body>
</html>

iframe内联框架

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>内联框架</title>
</head>
<body>
<!--iframe
内联框架
name 框架标识名
-->
<iframe src="//player.bilibili.com/player.html?isOutside=true&aid=113260367972657&bvid=BV1LF1iYUECE&cid=26169180897&p=1"
        scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true"></iframe>
<!--<iframe src="https://www.bookstack.cn/" frameborder="0" width="1000px" height="800px"></iframe>-->
<br>
<iframe src="" name="hello" frameborder="0"></iframe>
<a href="https://www.bookstack.cn/" target="hello">点击跳转</a>
</body>
</html>
  • 当用户点击“点击跳转”链接时，链接的目标页面（https://www.bookstack.cn/）将在名为 “hello” 的 iframe 中加载，而不是在整个浏览器窗口或标签页中打开。

这种用法通常用于在页面内嵌入其它网页，而不需要重新加载整个页面，能够创建更流畅的用户体验。

表单POST和get提交

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>登录注册</title>
</head>
<body>
<h1>注册</h1>
<!--表单from
action: 表单提交的位置, 可以是网站,也可以是一个请求处理地址
get:url中可以看见信息,不安全
post:传输大文件,安全
-->
<form action="" method="post">
<!--文本输入框 input type=text-->
  <p>名字: <input type="text" name="username"></p>
<!-- 密码输入框 input type= password-->
  <p>密码: <input type="password" name="password"></p>
<p>
  <!--提交-->
  <input type="submit">
<!--重置-->
  <input type="reset">
</p>
</form>

</body>
</html>

文本框和单选框

表单元素格式

属性说明
type指定元素的类型.text,password,checkbox,radio,submit,reset,file,hidden,image,button,默认为text
name指定表单元素名字
value元素的初始值,type为radio时必须指定一个值
size指定表单元素的初始宽度,当type为text或password,表单元素的大小以字符为单位,对于其他字符,宽度以像素为单位
maxlengthtype为text或password,输入的最大字符数
checkedradio或checkbox,指定按钮是否被选中

表单元素的使用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>登录注册</title>
</head>
<body>
<h1>注册</h1>
<!--表单from
action: 表单提交的位置, 可以是网站,也可以是一个请求处理地址
get:url中可以看见信息,不安全
post:传输大文件,安全
-->
<form action="" method="get">
<!--文本输入框 input type=text-->
  <p>名字: <input type="text" name="username" value="陆思帆" maxlength="8" size="10"></p>
<!-- 密码输入框 input type= password-->
  <p>密码: <input type="password" name="password"></p>

  <p>性别:
    <input type="radio" value="boy" name="sex" checked>男
    <input type="radio" value="girl" name="sex">女
  </p>

<!--  多选框-->
  <p>
    <input type="checkbox" value="sleep" name="hobby" checked>睡觉
    <input type="checkbox" value="chat" name="hobby">聊天
    <input type="checkbox" value="code" name="hobby">敲代码
    <input type="checkbox" value="game" name="hobby">游戏
  </p>
<!--按钮-->
  <p>按钮:
    <input type="button" name="but1" value="123">
    <input type="image" src="../resource/img/1.jpg" height="100px" width="80px">
  </p>
<!--下拉框, 列表框-->
  <p>国家
    <select name="列表名称" id="1">
      <option value="china">中国</option>
      <option value="usa">美国</option>
      <option value="yindu">印度</option>
    </select>
  </p>
<!--文本域-->
<p>反馈:
  <textarea name="textarea" id="" cols="10" rows="10">文本内容</textarea>
</p>
<!--文件域-->
<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" min="0" step="10">
</p>


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

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

<p>
  <!--提交-->
  <input type="submit">
<!--重置-->
  <input type="reset">
</p>
</form>

</body>
</html>

拓展

<!--增强鼠标可用性-->
  <label for="mark">点击</label>
  <input type="reset" id="mark">



  <!--文本输入框 input type=text-->
<!--  readonly只读标签-->
  <p>名字: <input type="text" name="username" value="admin" maxlength="8" size="10" readonly></p>
<!-- 密码输入框 input type= password-->

<!--  hidden 隐藏,隐藏123456,隐藏域-->

  <p>密码: <input type="password" name="password" hidden value="123456"></p>

<!--
checked预选
disabled 禁止选择,禁止提交
-->
  <p>性别:
    <input type="radio" value="boy" name="sex" checked disabled>男
    <input type="radio" value="girl" name="sex">女
  </p>
  <input type="submit" disabled>

表单初级验证

<!--
placeholder 提示信息
required 非空
-->
  <p>名字: <input type="text" name="username"  maxlength="10" size="15" placeholder="请输入用户名" required></p>

<!--  pattern 正则表达式-->
<p>自定义邮箱
  <input type="text" name="diyemail" pattern="">
  
</p>
Tr3Ad1n
关注
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值