##狂神##

初始HTML

HTML是什么？

 

HTML (Hyper Text Markup Language)超文本标记语言

 

超文本包括：文字，图片，音频，视频，动画等

 

HTML 5提供了一些新的元素和一些有趣的新特性，同时也建立了一些新的规则。这些元素、特性和规则的建立，提供了许多新的网页功能，如使用网页实现动态渲染图形、图表、图像和动画，以及不需要安装任何插件直接使用网页播放视频等。

 

HTML的优势

 

  • 世界知名浏览器厂商对对HTML5的支持
  • 市场的需求
  • 跨平台

 

W3C标准

 

W3C

 

World Wide Web Consortium (万维网联盟)

 

成立与1994年，Web技术领域最具权威和影响力的国际中立性技术标准机构

 

http://www.w3.org/

 

http://www.chinaw3c.org/

 

W3C标准内容

 

  • 结构化标准语言（HTML，XML)
  • 表现标准语言(CSS)
  • 行为标准语言（DOM,ECMAScript)

 

常见IDE

 

  • 记事本
  • DreamWeaver
  • IDEA
  • WebStorm
  • ......

 

HTML信息

浏览器配置

setting/Tools/web Browsers

基本结构

狂神说spring笔记 狂神说html笔记_狂神说spring笔记

 

<!--DOCTYPE:告诉浏览器，我们要使用什么规范 -->
 
 <!DOCTYPE html>
 
 <html lang="en">
 
 <!--head标签代表网页头部-->
 
 <head>
 
     <!--meta 描述性标签，它用来描述一些网站信息    -->
 
     <!--meta一般用来做SEO -->
 
     <meta charset="UTF-8">
 
     <meta name="keywords" content="HTML笔记">
 
     <meta name="description" content="学习">
 
 
     <!-- title是网页标题    -->
 
     <title>Title</title>
 
 </head>
 
 <!--body是网页主体-->
 
 <body>
 
 Hello World!!
 
 </body>
 
 </html>

网页基本标签

<!DOCTYPE html>
 <html lang="en">
 
 <head>
     <meta charset="UTF-8">
     <!-- 用做网站SEO -->
     <meta name="keywords" content="基本标签">
     <meta name="description" content="笔记">
     <title>基本标签</title>
 </head>
 
 <body>
 <!-- 标题标签 -->
 <h1>一级标题</h1>
 <h2>二级标题</h2>
 <h3>三级标题</h3>
 <h4>四级标题</h4>
 <h5>五级标题</h5>
 <h6>六级标题</h6>
 <!-- 段落标签 -->
 <p>第一段落</p>
 <p>第二段落</p>
 <!-- 换行标签 -->
 <!-- 换行标签比较紧凑，段落标签有明显段落间距-->
 准备换行，这是行尾<br>新行开头<br>
 <hr>
 <!-- 水平线标签 -->
 分隔符
 <hr>
 <!--  -->
 <!-- 粗体、斜体、粗斜体 -->
 <strong>I Love You</strong>
 <em>I Love You</em>
 <strong><em>I Love You</em></strong>
 <!-- 特殊符号 -->
 <br>特殊符号:<br>
 空格：1 2 3 4 5 <br>
 手动空格：1 2 3 4 5<br>
 大于号：><br>
 小于号：<<br>
 版权符号：totoroBlog©2020<br>
 </body>
 
 </html>

图片标签

狂神说spring笔记 狂神说html笔记_Java_02

<!DOCTYPE html>
 <html lang="en">
 
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>图像标签</title>
 </head>
 
 <body>
 <!-- 图像标签 -->
 <!--
     src:资源地址
     相对地址，绝对地址
     ../上级地址
     alt：在图片加载失败的时候，就会用文字代替
     title:鼠标悬停在图片上时，所显示的名字
     width height: 图片的高和宽
 -->
 <img src="../resourses/img/a.jpg" alt="(　o=^•ェ•)o　┏━┓)" title="天红666" width="128" height="128">
 <img src="./src/img/b.jpg" alt="路径有问题了o(*￣▽￣*)o">
 </body>
 
 </html>

超链接标签

狂神说spring笔记 狂神说html笔记_HTML_03

QQ链接。。。

<!DOCTYPE html>
 <html lang="en">
 
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>链接标签</title>
 </head>
 
 <body>
 <!--
     链接标签：
     href：跳转页面的地址
     a标签内文字：即显示的文字
         可以把图片放在a标签内，点击图片跳转网页
     title：链接描述
     target:表示在哪打开新网页。_self:当前标签打开 _blank:新的页面中打开
 -->
 <a name="top">这是顶部</a>
 <a href="https://www.baidu.com" target="_blank" title="百度一下">百度一下</a>
 
 <br>
 <a href="https://www.baidu.com"><img src="../resourses/img/c.jpg" alt="🤣图片不见了" title="百度一下"></a>
 
 
 <!-- 锚标签 -->
 
 <a href="#top">回到顶部</a>
 <br>
 <!-- 也可以在网址后添加#号跳到对应网站的对应位置 -->
 <a href="http://www.cyc2018.xyz/#java">Cyc2018#Java</a>
 <br>
 <!-- 功能性链接 -->
 <a href="mailto:957584602@qq.com">邮箱联系</a>
 <br>
 <!-- QQ链接 -->
 
 <a target="_blank" href="http://wpa.qq.com/msgrd?v=3&uin=804328977&site=qq&menu=yes">
     <img border="0" src="http://wpa.qq.com/pa?p=2:804328977:53" alt="点击这里给我发消息" title="点击这里给我发消息"/>
 </a>
 
 <!-- 总结 -->
 <!-- 块元素:无论内容多少，该元素独占一行
     p hr h1~h6
     行内元素:内容撑开宽度，左右都是行内元素的可以排在一行
     a strong em
 -->
 </body>
 
 </html>

行内元素和块内元素

狂神说spring笔记 狂神说html笔记_HTML_04

列表标签

狂神说spring笔记 狂神说html笔记_狂神说spring笔记_05

<!DOCTYPE html>
 <html lang="en">
 
 <head>
     <meta charset="UTF-8">
     <title>列表</title>
 </head>
 
 <body>
 <!-- 有序列表 -->
 <ol>
     <li>Python</li>
     <li>Java</li>
     <li>C/C++</li>
 </ol>
 <!-- 无序列表 -->
 <ul>
     <li>Python</li>
     <li>Java</li>
     <li>C/C++</li>
 </ul>
 <!-- 无序列表嵌套 -->
 <ul>
     <li>Python
         <ul>
             <li>基础部分</li>
             <li>高级部分</li>
         </ul>
     </li>
     <li>Java
         <ul>
             <li>JavaSE</li>
             <li>JavaEE</li>
         </ul>
     </li>
 </ul>
 <!-- 自定义列表 -->
 <!--自定义列表
     dl：标签
     dt：列表名称
     dd：列表内容
 -->
 <dl>
     <dt>学科</dt>
     <dd>语文</dd>
     <dd>数学</dd>
     <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>
         <!-- 跨行 -->
         <td rowspan="2">1-1</td>  <!-- 1-1跨两行 -->
         <td>1-2</td>
         <td>1-3</td>
     </tr>
     <tr>
         <!-- 跨列 -->
         <td colspan="2">2-1</td>  <!-- 2-1跨两列 -->
         <td>2-2</td>
         <td>2-3</td>
     </tr>
     <tr>
         <td>3-1</td>
         <td>3-2</td>
         <td>3-3</td>
     </tr>
 
 </table>
 </body>
 </html>

媒体元素


 <!DOCTYPE html>
 <html lang="en">
 
 <head>
     <meta charset="UTF-8">
     <title>媒体元素</title>
 </head>
 
 <body>
 <!-- 视频元素 -->
 <!--视频
     src 资源路径
     controls 控制面板
     autoplay 自动播放
 -->
 <video src="../resourses/video/gy.mp4" controls width="800" height="600"></video>
 <!-- 音频元素 -->
 <audio src="../resourses/audio/旭日阳刚%20-%20兄弟.mp3" controls></audio>
 
 </body>
 
 </html>

页面结构分析

狂神说spring笔记 狂神说html笔记_Java_06

iframe内联框架

狂神说spring笔记 狂神说html笔记_Java_07

<!DOCTYPE html>
 <html lang="en">
 
 <head>
     <meta charset="UTF-8">
     <title>内联框架</title>
 </head>
 <body>
 <iframe src="https://www.baidu.com" frameborder="0" width="400" height="400"></iframe>
 <!-- bilibili视频分享 -->
 <p></p>
 <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>
 
 <p></p>
 <!-- 自定义跳转 在name=hello的iframe打开博客园 -->
 <iframe src="" frameborder="0" name="hello" width="500" height="1000">
 
 </iframe>
 <a href="" target="hello">点击进入博客园</a>
 <a href="">点击博客园</a>
 
 </body>
 
 </html>

表单语法

狂神说spring笔记 狂神说html笔记_HTML_08

狂神说spring笔记 狂神说html笔记_HTML_09

表单验证

<!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <title>学习表单</title>
 </head>
 <body>
 <!--表单form
     action：表单提交的动作，可以是交给一个网址，也可以是交给一个请求处理地址
     method：post get请求方式
 -->
 <form action="1.SEO与整体结构.html" method="GET">
     <!--文本输入框：input type="text"-->
     <p>用户名:
         <!-- placehoder    输入框内的提示信息 -->
         <input type="text" name="username" placeholder="请输入用户名" maxlength="10" size="20" id="mark">
     </p>
     <p>密码:
         <!-- required  不能为空 -->
         <input type="password" name="password" placeholder="请输入密码" required>
     </p>
     <p>
         <input type="submit">
         <input type="reset">
     </p>
     <!--    radio单选框标签 value即单选框的值，在提交时对应value
         name：单选框组名，在同一个组内的radio标签同时只能选中一个，name值在提交时对应key
         checked:默认被选中
     -->
     <p>性别:
         <input type="radio" name="sex" value="boy" checked >男
         <input type="radio" name="sex" value="girl">女
     </p>
     <p>爱好:
         <input type="checkbox" name="hobby" value="basketball">篮球
         <input type="checkbox" name="hobby" value="dance">跳舞
         <input type="checkbox" name="hobby" value="singe">唱歌
     </p>
     <p>文字按钮与图片按钮:
         <input type="button" name="btn1" value="文字按钮">
         <input type="image" src="../resourses/img/a.jpg" width="200" height="100">
     </p>
     <p>国家选择:
         <select name="location" id="locat">
             <!--下拉框：selected:默认选项-->
             <option value="china" selected>中国</option>
             <option value="USA">美国</option>
             <option value="UK">英国</option>
         </select>
     </p>
     <p>文本域:
         <textarea name="text" id="text0" cols="30" rows="10">文本内容</textarea>
     </p>
     <p>文件域:
         <input type="file" name="files" id="f1">
         <input type="button" name="upload" value="上传">
     </p>
     <!--邮件：会简单验证是否是邮箱地址
         url：会简单验证是否是网络地址
         number：数字验证
     -->
     <p>邮箱:
         <input type="email" name="email">
     </p>
     <p>网址:
         <input type="url" name="url">
     </p>
     <!--数字验证
        max最大数量
        min 最小数量
        step 每次点击增加或减少的数量-->
     <p>商品数量:
         <input type="number" name="num" max="100" min="1" step="1">
     </p>
     <p>音量:
         <input type="range" name="voice" min="0" max="100" step="2">
     </p>
     <p>搜索:
         <input type="search">
     </p>
     <p>增强鼠标可用性(点击跳转):
         <label for="mark">点我试试</label>
     </p>
     <input type="submit">
     <input type="reset">
     <!-- 一些其他属性
         readonly   只读，不可更改
         disable    禁用
         hidden 隐藏，虽然不可见但是会提交
         id 标识符，可以配合label的for属性增加鼠标的可用性
         patten 正则表达式验证
      -->
 </form>
 
 </body>
 </html>