html网页基本信息

是李改改

已于 2022-05-28 20:32:37 修改

阅读量242

点赞数 1

文章标签：前端 html ide

于 2022-05-16 17:39:27 首次发布

本文链接：https://blog.csdn.net/m0_62422087/article/details/124804354

版权

1.html网页基本信息

<!DOCTYPE html>
告诉浏览器使用什么规范
<html lang="en">
<head>
    heat标签表示网页头部
    <meta charset="UTF-8">
    meta描述性标签，描述网站做什么，一般用来做SEO；
    <meta name="keywords"content="内容">
    <title>Title</title>网页标题
</head>
<body>

</body>
</html>

2.基本标签

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-YafvmC4R-1652693710256)(C:\Users\liguo\Documents\笔记·1\HTML\image-20220504203018631.png)]

3图像标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>图像标签</title>
</head>
<body>
<!--
img学习
src : 图片地址
绝对地址E:\java\HTML\resouces\image\img.png一般不推荐
  ../   上一级目录
  相对路径../resources/image/img.png

-->
<img src="../resouces/image/img.png" alt="图片名称" title="悬停文字" width="300" height="300">


</body>
</

超链接标签

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>链接标签</title>
</head>
<body>
<!--使用name作为标记-->
<a id="top">顶部</a>
<!--a标签
href：必填，表示要跳转到那个页面
target :表示窗口在哪里打开
    _blank 在新标签中打开
    _self 在自己的网页中打开

-->
<a href="第一个网页.html" target="_blank">点我跳转到页面</a>
<br>

<a href="https://www.baidu.com" target="_self">点我跳转到百度</a>
<a href="第一个网页.html"><img src="../resouces/image/img.png" alt="图片名称" title="悬停文字" width="300" height="300"></a><br>
<a href="第一个网页.html"><img src="../resouces/image/img.png" alt="图片名称" title="悬停文字" width="300" height="300"></a>
<p><a href="第一个网页.html"><img src="../resouces/image/img.png" alt="图片名称" title="悬停文字" width="300" height="300"></a>
</p><p><a href="第一个网页.html"><img src="../resouces/image/img.png" alt="图片名称" title="悬停文字" width="300" height="300"></a>


<!--锚链接
1.需要一个锚链接
2.跳转到标记
＃

-->
<!--功能性链接
邮件链接：mailto
-->
<a href="mailto:1147205134@qq.com">点击这里联系我</a><br>
<a href="#top" class="btn">回到顶部</a>
<a href="第一个网页.html#down">跳转</a>
</body>
</html>

行内元素和块元素

块元素

无论内容多少，该元素独占一行

(p,h1-h6…)

航内元素

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

(a,strong.em…)

列表

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

<ol><!--  order list ctrl+D复制到下一行
应用范围 ： 试卷问答，...
-->
    <li>java</li>
    <li>python</li>
    <li>运维</li>
    <li>前端</li>
    <li>c/c++</li>
</ol>
<hr>
<!--无序列表
。应用列表 ： 导航，侧边栏...
空心圆点用CSS-->
<ul>
    <li>图片</li>
    <li>电影</li>
    <li>小说</li>
</ul>

<!--自定义列表
dl标签
适用于公司网站底部
-->

<dl>
    <dt>列表的名字</dt>
    <dd>子选项</dd>
    <dd>子选项</dd>
    <dd>子选项</dd>
    <dd>子选项</dd>
    <dt>学科</dt>
    <dd>语文</dd>
</dl>
</body>
</html>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-4CoBeA7s-1652693710257)(C:\Users\liguo\Documents\笔记·1\HTML\image-20220510202510009.png)]

表格

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

<!--表格table
行tr
列 td
-->
<table border="lpx"align="center">
    <tr>
<!--colspan 跨列-->
<!--        align="center" 居中-->
        <td colspan="3" align="center">1</td>
    </tr>
    <tr>
        <td rowspan="2">a</td>
        <td>b</td>
        <td>c</td>
    </tr>
    <tr>
<!--        rowspan 跨行-->

        <td>B</td>
        <td>C</td>
    </tr>
</table>

</body>
</html>

视频和音频

vidio

audio

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>媒体元素</title>
</head>
<body>
<!--音频和视频-->
<video src="../resouces/video/221406998_nb2-1-64.mp4"controls autoplay></video>
<!--
src：资源路径
control控制条
autoplay 自动播放
-->
</body>
</html>

页面结构

<!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>
</htm

内联框架iframe

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>内联框架</title>
</head>
<body>
<!--
iframe内联框架
src：地址、
w-h宽度
-->


<iframe src=""ID="hello world" frameborder="0"width="1000px" height="800px"></iframe>
<a href="第四个网页.html"target="hello">点击跳转</a>
<!--iframe是一个窗口，它的名字是hello，target=hello表示在名为hello的窗口中打开连接-->
</body>
</html>

表单

URL

在WWW上，每一信息资源都有统一的且在网上唯一的地址，该地址就叫URL（Uniform Resource Locator,统一资源定位器），它是WWW的统一资源定位标志，就是指网络地址。

表单简单应用

隐藏域 hidden
只读 readonly
禁用 disable

表单初级验证

placeholder 提示信息

required 非空判断

pattern 正则表达式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>登陆注册</title>
</head>
<body>

<h1>注册</h1>
<!--表单form
action:表单提交的位置，可以是网站，也可以是一个请求处理地址
method：post,get 提交方式
get方式提交：可以在url中看到我们提交的信息，不安全，但高效
post：比较安全，可以提交大文件
-->
<form action="第四个网页.html"method="get">
<!--文本输入框：input type="text"
value="唐可可"  默认初始值
 maxlength="8"最长能写几个字符
 size="30"   文本框的长度
 readonly 只读
-->
<p>name：<input type="text" name="username" value="唐可可"placeholder="请输入用户名" required ></p>
<!--    密码框：intput type="password"-->
<p>密码： <input type="password"name="password" hidden value="123456"></p>

<!--  单选框标签
  input type = ”radio“
  value：单选框的值
  name ：表示组,单选框，name不一样不是单选
  checked 默认选择
  disable 禁用
  -->
    <input type="radio" value="boy" name="sex"checked disabled/>男
    <input type="radio" value="girl" name="sex"/>女
<!--    多选框
input type=“checkbox”-->
    <p>爱好：
        <input type="checkbox" value="sleep" name="hobby">睡觉
        <input type="checkbox" value="code" name="hobby" checked>写代码
        <input type="checkbox" value="game" name="hobby" >游戏
    </p>
<!--按钮
button 普通按钮
image 图像按钮
submit 提交按钮
reset 重置
value 可以给按钮，表单赋值

-->
    <p>
        <input type="button" name="btn1"value="点击一刀999">
        <input type="image" height="100" width="100" src="../resouces/image/屏幕截图%202022-05-11%20154152.png">
    </p>
<!--selected 默认选择-->
    <p>国家
        <select name="列表名称">
            <option value="chine">中国</option>
            <option value="us">美国</option>
            <option value="Swiss" selected>瑞士</option>
        </select>
    </p>
<!--文本域
-->
<p>反馈
    <textarea name="textarea" cols="20" 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">
</p>
<!--数字-->
    <p>数字
        <input type="number" name="num" max="100" min="0" step="1">
    </p>
<!--滑块
input type="range"-->
    <p>滑块
        <input type="range" name="voice" min="0" max="100">
    </p>
    <p>
        <label for="search">搜索</label>
        <input type="search" id="search" name="search">
    </p>
<!--增强鼠标可用性-->
   <p>
    <label for="mark">点我试试</label>
    <input type="text" id="mark">
    </p>
<!--正则表达式-->
    <p>自定义邮箱
        <input type="text" name="diymail" placeholder="请输入邮箱" required pattern="   /^([a-z0-9_\.-]+)@([\da-z\.-]+)\.([a-z\.]{2,6})$/
/^[a-z\d]+(\.[a-z\d]+)*@([\da-z](-[\da-z])?)+(\.{1,2}[a-z]+)+$/">

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

</body>
</html>