HTML的基本结构

所有的HTML 标签都以 <> 开始 </> 结尾
正常网页的所有内容都需要放在 < body> 标签中；

<!DOCTYPE html>
<html lang="en">
<head>
    <!--自闭合标签-->
    <meta charset="UTF-8">
    <!--正常的标签都是需要成对出现的-->
    <title>Title</title>
</head>
<body>

</body>
</html>

在这里插入图片描述

DOCTYPE文档类型，默认声明：表示告诉浏览器这个网页使用什么规范，我们默认使用的是HTML
Title 标签，就是网站的小标题名称；
meta 描述信息，SEO：网站搜索搜索

网站的基本标签（重点）

1、标题标签

<!--标题标签  h1 + tab键 -->
<h1>一级标题</h1>
<h2>一级标题</h2>
<h3>一级标题</h3>
<h4>一级标题</h4>
<h5>一级标题</h5>
<h6>一级标题</h6>

2、段落标签

<!--p：段落标签-->
<p>
    本来是师者，所以传道受业解惑也，本来是一直秉承“教育不是灌输，而是点燃火焰”，本来是一直坚信“优秀的老师教授知识只是基本，还要对学生的人生观价值观产生积极正向的影响”
</p>
<p>
呵呵，于是乎，我们也变成了同谋。
</p>

3、换行标签

<br/>

4、水平线标签

<hr/>

5、字体样式标签

<!--字体样式-->
<strong>马云 （阿里巴巴集团创始人）</strong>
<p>
    <em>马云，男，汉族</em> <br>
    <em>现担任日本软银董事</em>  <br>
    <em>1988年毕业于杭州师范学院外语系</em>  <br>
    <em>....</em>  <br>
</p>

6、特殊符号标签

<!--空格 &-->
<p>学习 Java</p>
<p>大家好&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;大家好</p>
<!--大于小于号-->
&gt;
&lt;
<!--版权符号-->
&copy; 版权所有：***

<!--各种小贴图  &  ;-->
&phone;

图像标签

常见的图片格式： .png .jpg .jpeg .bmp .gif等等

png 会有浏览器兼容问题

一般使用 .jpg .gif多一点

图片：静态资源单独放

statics\images

相对路径，绝对路径

相对路径   ../../
绝对路径   https://img-bss.csdn.net/1576570776454.jpg

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>图片标签</title>
</head>
<body>

<!--标签中带有参数的  key=value -->

<!--
src： 资源图片 ： 图片的路径
alt： 图片加载失败，表示图片的问题，也即图片描述
title： 鼠标放在图片上的悬浮提示
width： 宽
height：高
-->
<img src="../statics/images/tx.jpg" alt="头像图片" title="狂神说Java" width="1000" height="1000">

</body>
</html>

超链接

基本使用

<!--
超链接：表示从一个地方跳转到另外一个地方  hao123导航

href：要跳转地址
target： 目标打开的窗口，在自己这个当前页面打开，还是在新的页面打开
    _self : 在自己的窗口打开
    _blank： 在新窗口中打开

和图片嵌套使用
-->

<!--<a href="https://www.baidu.com/" target="_self">百度</a>-->

<!--图片标签-->
<a href="https://www.baidu.com/" target="_self">
    <img src="../statics/images/bd.png">
</a>

锚链接

用于页面间指定位置跳转：快速定位目录
可以在同一页页面中跳转
也可以在不同页面中跳转：（需要掌握）

锚点

<!--标记A-->
<a name="markerA">A</a>

跳转到锚点

<a href="#markerA">A</a> <br>
<a href="#markerB">B</a> <br>
<a href="#markerC">C</a> <br>
<a href="https://123.sogou.com/">D</a> <br>
<a href="2.基本结构.html#haha">E</a> <br>

功能性标签

邮件链接

<a href="mailto:[email protected]">联系我们</a>

借助第三方平台

<!--QQ推广-->
<!--https://shang.qq.com/v3/widget.html-->
<a target="_blank" href="http://wpa.qq.com/msgrd?v=3&uin=475537133&site=qq&menu=yes">
    <img border="0" src="http://wpa.qq.com/pa?p=2:475537133:53" alt="点击这里给我发消息" title="点击这里给我发消息"/>
</a>

块元素、行内元素

块元素

无论内容多少，都是独占一行的（p，h1~h6）

行内元素

只根据内容的长度来扩展。（a，strong，em….）

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

<!--块元素-->
<p>我是P标签</p>
<h1>我是H1标签</h1>

<!--行内元素-->
<a href="">我是a链接</a>
<strong>粗体</strong>
<em>斜体</em>

</body>
</html>

列表

展示结构

无序列表 （ul-li）

语文
数学
音乐

有序列表 (ol-li)

热搜1
热搜2
热搜3

自定义列表 (dl-dt-dd)

<!--title-->
<!--无序  ul-li
导航
侧边栏新闻
在文章中，一般会使用它来排列
-->
<ul>
    <li>语文</li>
    <li>数学</li>
    <li>英语</li>
    <li>Java</li>
</ul>

<hr>

<!--有序 ol-li
问答试卷、测试题....卷子，或者需要排序的。微博热搜，榜单
-->
<ol>
    <li>====</li>
    <li>====</li>
    <li>====</li>
    <li>====</li>
</ol>

<hr>

<!--自定义列表
网站的底部，用于标记项
-->
<dl>
    <dt>水果</dt>
    <dd>苹果</dd>
    <dd>梨子</dd>
    <dd>香蕉</dd>
    <dd>葡萄</dd>
    <dt>水果</dt>
    <dd>苹果</dd>
    <dd>梨子</dd>
    <dd>香蕉</dd>
    <dd>葡萄</dd>
</dl>

在这里插入图片描述

表格

结构简单
通用

基本结构：

表格 table
行 tr rowspan
列 td colspan

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

<!--表格标签table
border="1px" 边框属性
-->
<table border="1px">
    <!--行和列-->
    <!--第一行 tr,列 td-->
    <tr>
        <td>1-1</td>
        <td>1-2</td>
        <td>1-3</td>
    </tr>
    <tr>
        <td>2-1</td>
        <td>2-2</td>
        <td>2-3</td>
    </tr>
</table>


</body>
</html>

跨行

<table border="1px">
    <tr>
        <!--rowspan 所跨的行数-->
        <td rowspan="2">张三</td>
        <td>语文</td>
        <td>100</td>
    </tr>
    <tr>
        <td>数学</td>
        <td>100</td>
    </tr>
    <tr>
        <td rowspan="2">李四</td>
        <td>语文</td>
        <td>0</td>
    </tr>
    <tr>
        <td>数学</td>
        <td>0</td>
    </tr>
</table>

在这里插入图片描述

跨列

<table border="1px">
    <tr>
        <!--实现跨列
        colspan 对应的值:就是要跨几列
        -->
        <td colspan="2">学生成绩</td>
        <td>学生成绩</td>
    </tr>
    <tr>
        <!--科目名称-->
        <td>语文</td>
        <td>100</td>
    </tr>
    <tr>
        <!--成绩-->
        <td>数学</td>
        <td>100</td>
    </tr>
</table>

在这里插入图片描述

音频、视频

音频 audio

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

<!--音频播放-->
<audio src="../statics/audio/ab410f7bbbb0955e7ae476ae89527a5d.m4a" autoplay controls>

</audio>

</body>
</html>

视频 video

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

<!--video 视频标签
src：视频的路径
controls: 提供播放按钮，进度条、下载按钮、全屏按钮、音量控制
autoplay： 自动播放
loop: 循环播放

-->

<!--<video src="../statics/video/china.mp4" controls autoplay></video>-->

<video controls autoplay>
    <source src="../statics/video/china.mp4">
    <source src="../statics/video/china.mp4">
</video>


</body>
</html>

网页结构分析

页面的头部
页面的主体
页面的尾部

html5 标签，没有任何作用，只是让代码结构更好看

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

<!--这些标签都是一些行业规范-->

<header>
    我是头部
</header>

<nav>导航栏</nav>

<aside>侧边栏</aside>

<article>文章主题</article>

<section> 独立区域 </section>

<footer>
    我是尾部
</footer>

</body>
</html>

内联框架

iframe

<!--iframe 内联框架
src： 地址
-->
<!--<iframe src="https://www.baidu.com/" width="1000px" height="600px"></iframe>-->

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

<a href="https://www.baidu.com/" target="mainFrame">点击显示</a>

<!--Ajax-->

三、表单（重要）

在这里插入图片描述

搜索框

在这里插入图片描述

1、基础表单

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

<!--
提交请求：
携带的参数
key: 控件的name。这个属性不要忘记

get：携带参数，参数可以在url中看到，不安全，大小有限
    https://www.baidu.com/?username=kuangshen&password=123456

post：参数不可见、安全，大小没有限制  （表单提交常用方式post）

-->

<!--form 表单
action： 提交地址
method：提交的方式
-->

<form action="test.html" method="post">

    <!--输入框
    input 标签
        name： 必须写上
        type：
            text ： 文本框
            password： 密码框
            submit： 提交按钮
            reset： 重置
    -->
    <p>名字：<input type="text" name="username"> </p>
    <p>密码：<input type="password" name="password"> </p>

    <p>
        <input type="submit" value="提交">
        <input type="reset" value="重置">
    </p>

</form>

</body>
</html>

2、表单元素

所有表单元素都要写在form表单中，必须加上name属性，否则提交的时候取不到值！

文本框（最重要的）

<!--文本框 type="text"
value ：文本框默认的初始值
size： 文本框的长度
maxlength： 文本框的最大输入长度
-->
<p>
    <input type="text" name="username" value="用户名" size="30" maxlength="20">
</p>

密码框

<!--密码框 type="password"
size="20" 密码框的长度
-->
<p>
    <input type="password" name="pwd" size="20">
</p>

单选按钮

<!--单选框type="radio"
value： 表单提交的值
name： 名字相同，则自动分组，必须要分组
checked： 默认选中
disabled： 禁用
注意事项：默认没有值，需要再input type="radio" 后增加单选框的属性
-->
<p>
    <input type="radio" value="男" name="sex" checked>男
    <input type="radio" value="女" name="sex">女
</p>

复选框

<!--多选框 type="checkbox"
name： 必填项，如果是分组，则名称一致
value： 表单提交的值
checked： 默认选中
disabled： 禁用
注意事项：默认没有值，需要再input type="checkbox" 后增加多选框的属性
-->
<p>
    <input type="checkbox" name="hobby" value="code">敲代码
    <input type="checkbox" name="hobby" value="music" checked>听音乐
    <input type="checkbox" name="hobby" value="girl" disabled>女孩
</p>

下拉列表框 select-option

   <!--下拉列表框
   select
   name： 组件名字 必填
   size:  显示的数量，默认为1
   
   option： 选项
   value 必填
   option标签中间写下拉框的值
   selected： 默认选中
   
   -->
   <select name="科目">
       <option value="1"></option>
       <option value="2">数学</option>
       <option value="3" selected>英语</option>
       <option value="4">英语</option>
       <option value="5">英语</option>
   </select>

按钮

在这里插入图片描述

 <!--按钮
   value：按钮上的文字
   -->
   <p>
       <!--提交-->
       <input type="submit" value="登录">
       <!--重置--使用-->
       <input type="reset" value="清空">
       <!--普通按钮：一般后来我们会和javascript结合使用，点击按钮xxx-->
       <input type="button" value="点我">
       <!--图片按钮
           type="image"
           src：图片的路径
       -->
       <input type="image" src="../statics/images/bd.png">
   </p>

文本域

   <!--文本域  cols  rows-->
   <textarea name="textarea" cols="10" rows="10">
   </textarea>

文件域

   <!--
   表单，需要支持提交复杂文件  enctype="multipart/form-data"
   未来：文件上传会用到
   -->
   <form action="test.html" method="get" enctype="multipart/form-data">
       <input type="file" name="video">
   </form>

邮箱（验证）

在这里插入图片描述

       <!--邮箱-->
       <p>
           邮箱：<input type="email" name="email">
       </p>

网址（基本验证）


    <!--url网址-->
    <p>
        url：<input type="url" name="url">
    </p>

数字（上下）

    <!--数字：商品数量，计数  type="number"
    最小值  min="0" 
    最大值  max="100" 
    步长    step="10"
    -->
    <p>
        数字：<input type="number" min="0" max="100" step="10">
    </p>

滑块（可调节）

<!--滑块
默认值0~100
-->
<p>
    <input type="range" name="range" min="0" max="1000" step="2">
</p>

搜索框（带关闭按钮）

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

3、表单的应用

隐藏域

       <!--隐藏域-->
       <p>
           <input type="hidden" name="count" value="10">
       </p>

只读和禁用

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ivceKymM-1576758907904)(1576400730567.png)]

   <p>
       用户名： <input type="text" name="username" readonly>
   </p>
   
   <p>
       密码： <input type="password" name="pwd" disabled>
   </p>

标注

   <p>
       <!--通过 for="name" 来链接到 表单中的指定ID -->
       <label for="name">用户名： </label>
       <input type="text" name="username"  id="name">
   </p>

初级表单验证（重点）

为什么要表单验证？
1. 默认提示

      <!--placeholder="必须是url格式" 默认提示，告诉用户应该这么做-->
      用户名：
      <input type="url" name="username" placeholder="必须是url格式">

必填

      <p>
          <!--required必须要填写这个字段-->
          密码： <input type="password" name="pwd" required>
      </p>

正则表达式

   <p>
       <!--pattern:正则表达式-->
       手机号码： <input type="password" name="tel" required pattern="^1[358]\d{9}">
   </p>

表单的验证，主要在 JavaScript 以及我们后台判断

赤沐

发布了29 篇原创文章 · 获赞 0 · 访问量 330

私信关注

java学习之htlm总结

HTML的基本结构

网站的基本标签（重点）

1、标题标签

2、段落标签

3、换行标签

4、水平线标签

5、字体样式标签

6、特殊符号标签

图像标签

超链接

块元素、行内元素

列表

表格

音频、视频

网页结构分析

内联框架

三、表单（重要）

1、基础表单

2、表单元素

3、表单的应用

猜你喜欢

java学习之htlm总结

HTML的基本结构

网站的基本标签（重点）

1、标题标签

2、段落标签

3、换行标签

4、水平线标签

5、字体样式标签

6、 特殊符号标签

图像标签

超链接

块元素、行内元素

列表

表格

音频、视频

网页结构分析

内联框架

三、表单（重要）

1、基础表单

2、表单元素

3、表单的应用

猜你喜欢

6、特殊符号标签