HTML入门

最新推荐文章于 2024-10-18 17:23:02 发布

摸鱼的小张张

最新推荐文章于 2024-10-18 17:23:02 发布

阅读量63

点赞数

文章标签： html 前端

本文链接：https://blog.csdn.net/m0_49913277/article/details/130071044

版权

1、初识HTML

1、1 什么是HTML

2、网页的基本信息

DOCTYPE声明
<title>标签
<meta>标签

<!-- DOCTYPE:告诉浏览器，我们要使用什么规范-->
<!DOCTYPE html>

<html lang="en">
<!--head标签代表网页头部-->
<head>
<!--    meta描述性标签：它用来描述我们网站的一些信息-->
<!--    meta一般用来做SEO-->
    <meta charset="UTF-8">
    <meta name="keywords" content="狂神说java,西部开源">
    <meta name="description" content="来这个地方可以学习JAVA">
<!--title网页标签-->
    <title>我的第一个网页名字</title>
</head>
<!--body标签代表网页主体-->
<body>
Hello world!
</body>
</html>

3、网页基本标签

<!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>
<h6>六级标签</h6>
<!--段落标签-->
<P>两只老虎    两只老虎</P>
<P>跑得快       跑得快</P>
<P>一只没有耳朵     一只没有尾巴</P>
<P>真奇怪      真奇怪</P>
<P>两只老虎     两只老虎</P>
<P>跑得快        跑得快</P>
<P>一只没有耳朵    一只没有尾巴</P>
<P>真奇怪      真奇怪</P>
<!--水平线标签-->
<hr>
<!--换行标签-->
两只老虎    两只老虎<br/>
跑得快       跑得快<br/>
一只没有耳朵     一只没有尾巴<br/>
真奇怪      真奇怪<br/>
两只老虎     两只老虎<br/>
跑得快        跑得快<br/>
一只没有耳朵    一只没有尾巴<br/>
真奇怪      真奇怪<br/>
<!--粗体，斜体-->
<h1>字体样式标签</h1>
粗体： <strong> I love you </strong>
斜体：<em>I love you </em>
<br/>
<!--特殊符号-->
空        格
空&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;格
<br/>
&gt;
<br/>
&lt;
<br/>
&copy;版权所有狂神
<!--
特殊符号记忆方式
& ;
-->
</body>
</html>

4、图像，超链接，网页布局

4、1 图像标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>图像标签学习</title>
</head>
<body>
<!--img学习
src:图片地址（必填）
    相对地址(推荐使用），绝对地址
    ../ 代表上一级目录
alt:图片名字（必填）
-->
<img src="../resources/image/1.jpg" alt="卡通图片"title="悬停文字"width="200"height="200">
</body>
</html>

4、2 链接标签

5、列表，表格，媒体元素

练习

媒体元素

视频和音频

视频元素：video
音频元素：audio

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>媒体元素</title>
</head>
<body>
<!--音频和视频
src：资源路径
controls：自动播放
autoplay 自动播放
-->
<video src="../resources/video/.mp4"controls autoplay></video>
<audio src="../resources/audio/.mp3"controls autoplay></audio>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>页面结构分析</title>
</head>
<body>
<hheader>
  <h2>网页头部</h2>
</hheader>

<section>
  <h2>网页主体</h2>
</section>
<footer>
  <h2>网页脚部</h2>
</footer>
</body>
</html>

iframe内联框架

通过a可以往iframe里面加东西

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>内联框架</title>
</head>
<body>
<!--iframe内联框架
src:地址
w-h:宽度，高度
-->
<iframe src="https://www.bilibili.com"name="hello" frameborder="0"width="800px"height="800px"></iframe>
<!--<iframe src="//player.bilibili.com/player.html?aid=55631961&bvid=BV1x4411V75C&cid=97257967&page=11"
        scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true">
</iframe>-->
<a href="1、我的第一个网页.html"target="hello">点击跳转</a>
</body>
</html>

6、表单及表单应用（重点）

6、1表单语法（重点）

6、2 get和post方式的区别：

6、3 单选框

6、4 按钮和多选框

6、5 下拉框，文本域，文件域

6、6 搜索框滑块和简单验证

6、7 表单的应用

隐藏域hidden
只读 readonly
禁用 disabled

<p>名字：<input type="text" name="username" value="zhangsan" readonly></p>
<p>密码：<input type="password" name="pwd" hidden value="123456"></p>
 <p>性别: 
        <input type="radio"value="boy"name="sex" disabled/>男
        <input type="radio"value="girl"name="sex"/>女
    </p>

7、表单初级验证

<p>名字：<input type="text" name="username" placeholder="请输入用户名" required></p>
<p>密码：<input type="password" name="pwd" required></p>
 <p>自定义邮箱：
        <input type="text" name="diymail" pattern="[\\w!#$%&'*+/=?^_`{|}~-]+(?:\\.[\\w!#$%&'*+/=?^_`{|}~-]+)*@(?:[\\w](?:[\\w-]*[\\w])?\\.)+[\\w](?:[\\w-]*[\\w])?">
    </p>