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:475537133@qq.com">联系我们</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=123456post：参数不可见、安全，大小没有限制  （表单提交常用方式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

   <!--下拉列表框selectname： 组件名字 必填size:  显示的数量，默认为1option： 选项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 以及我们后台判断

java学习之htlm总结相关推荐

Java学习路线图，如何学习Java事半功倍？
作为一个初学者想掌握Java并不是很容易,Java本身是具有一定难度的,虽然说兴趣这东西可以让我们学习不累,但是有多少人学习是因为兴趣,或者有多少人知道自己的兴趣在哪?所以我很明确的告诉你学习这事本来 ...
Java学习必不可少的网站，快收藏起来
java技术在IT互联网行业的发展前景一直在提升,越来越多的人都在学习java技术,今天小编来给大家提供一些学习Java的网站集合,希望能够帮助到正在学习java技术的同学. Java学习必不可少的网 ...
分享五款java学习辅助工具，总有你用的上的~
想要学好java技术,除了自身的努力,辅助工具也不缺少,辅助工具可以帮助大家在今后的工作中可以提高工作效率,下面小编就来分享五款java学习辅助工具,总有你用的上的~ 五款java学习辅助工具: 1. ...
Java学习从入门到精通的学习建议
想要学好java技术,首先打好基础很重要,不论学什么基础都是重中之重,学习Java更是如此.如:基础语法.核心类库.面向对象编程.异常.集合.IO流等基础如果学不好,那么后边更深入的语法也不容易学会. ...
java学习笔记11--Annotation
java学习笔记11--Annotation Annotation:在JDK1.5之后增加的一个新特性,这种特性被称为元数据特性,在JDK1.5之后称为注释,即:使用注释的方式加入一些程序的信息. j ...
java学习笔记13--反射机制与动态代理
本文地址:http://www.cnblogs.com/archimedes/p/java-study-note13.html,转载请注明源地址. Java的反射机制在Java运行时环境中,对于任意 ...
JAVA学习资源网站
中文java技术网--http://www.cn-java.com/ 灰狐动力(http://www.huihoo.com/)-- 该站点有许多的开源的项目的介绍和学习,涉及操作系统,数据库等许多方向 ...
我的WEB之路（一）-2.JAVA学习路线
第一阶段:针对性夯实JAVA基础课程名称核心要点完成目标 Java基础入门搭建Java开发和运行环境等,IDE工具的学习和使用,Java语言基础,数据类型,运算符,条件和循环,数组使用等,Ja ...
准备写java学习笔记
准备写java学习笔记 java int 转载于:https://blog.51cto.com/cryingcloud/1975267
Java学习笔记--StringTokenizer的使用
2019独角兽企业重金招聘Python工程师标准>>> Java Tips: 使用Pattern.split替代String.split String.split方法很常用,用于切割 ...

java学习之htlm总结

HTML的基本结构

网站的基本标签（重点）

1、标题标签

2、段落标签

3、换行标签

4、水平线标签

5、字体样式标签

6、特殊符号标签

图像标签

超链接

块元素、行内元素

列表

表格

音频、视频

网页结构分析

内联框架

三、表单（重要）

1、基础表单

2、表单元素

3、表单的应用

java学习之htlm总结相关推荐

最新文章

热门文章

java学习之htlm总结

HTML的基本结构

网站的基本标签（重点）

1、标题标签

2、段落标签

3、换行标签

4、水平线标签

5、字体样式标签

6、 特殊符号标签

图像标签

超链接

块元素、行内元素

列表

表格

音频、视频

网页结构分析

内联框架

三、表单（重要）

1、基础表单

2、表单元素

3、表单的应用

java学习之htlm总结相关推荐

最新文章

热门文章

6、特殊符号标签