欢迎光临
我的个人博客网站

HTML学习笔记


html (hyper text markup language)知识点


html文档结构

<!-- 文档注释 --> <!DOCTYPE html> <html lang="en"> <head>     <meta charset="UTF-8">     <title>Title</title> </head> <body> </body> </html> 
  • <!DOCTYPE html> html5固定语法。
  • <!-- 文档注释 --> 文档注释
  • html root标签,通常指定属性 lang="en"
  • head body
  • title 在head内的标签,指定浏览器标题
  • meta 描述性标签,通常有至少有一个指定字符集UTF-8

标签类型

标签的右尖括号前可以有空格

标签也称为元素,有标签值,标签值可以是别的标签元素,可以有属性,多个属性用空格隔开,每个属性都有属性值

  • 自闭合

    • <hr/> 斜杠和右括号中间不可有空格,斜杠前可有空格。
  • 双标签

    • <h2>标题</h2> 右边的闭合标签斜杠两边都不能有空格 。
    • 结构: <标签名称 标签属性=属性值 标签属性=属性值>标签值</标签名称>
  • 块元素

    • 该元素独占一行 如h, p标签
  • 行内元素

    • 如无换行标签,元素将排在一行,源码中换行不影响元素排列,如一些小的标签 a, strang, em ...

常用标签

  • h 标题通常有h1到h6 六级标题
  • p (part) 段落标签
  • a (anchor) 锚标签,用于跳转,超链接
  • br (break carriage return)换行
  • hr (horizontal) 水平分割线换行,不能放入p标签内

常见属性

  • title head中的标题作为浏览器标题,其他元素的标题为鼠标悬停时显示的文本内容

  • alt (alternatively)图片等资源未加载完成时用指定文本代替显示

  • name 标记元素的名称,表单提交时作为key提交,单选框用以分组,等等

  • id 标记元素的ID,作为文档里引用如<label for="eleId"> ,等等

  • width 宽度

  • height 高度

  • border 边界宽度,通常不使用,通过css实现

  • src (source)来源

  • hrefhypertext reference)

  • target 指定链接打开的位置

常用特殊符号

  • 由于html文档中一些字符为标记符号,这些字符作为普通字符时,需要其他表示方法

    使用 &; 两个符号包裹英文单词

    idea 编辑器中 键入and符号后ctrl+回车可进行各种符号预览

  • &nbsp; 空格

  • &gt; 大于 (greater-than)

  • &lt; 小于 (less-than)

  • &eg; 大于 (equal or greater-than)

  • &el; 小于 (equal or less-than)

常规网页布局

网页布局使得文档结构清晰,可读性强,便于维护和扩展。

  • header:标题头部区域的内容
  • footer:标题脚部区域的内容,常见各大网站拉到最下方的区域
  • section:web页中一块独立区域
  • article:独立文章内容
  • code:独立代码内容
  • aside:相关内容或应用,常见于侧边栏
  • nav(navigation):导航类辅助内容

img 图像标签

<img src="../resources/image/1.jpg" alt="高清大图" title="提示"> 

通常的属性有:src, title, alt

次要的属性有:width, height

常见的类型: jpg, gif, jepg, png, bmp(位图)

a (anchor) 标签, 锚标签,链接标签

<a href="http://www....." target="_blank" >   实体内容 </a> 
  • 实体内容点击即可跳转,实体内容可以是普通文本text,也可以是图片img元素

    通常的属性有:href, target, title

    次要的属性有:

    常见的类型:

  • 标记,使用井字符# ,跳转到标记语法为:链接#元素名称,href#name

  • 根据href可以跳转到别的页面

  • 如果跳转本页面的元素井号前面的链接地址可不填

    可使用a标签标记一个位置 <a name="top">这里标记为顶部</a>

    点击跳转为 <a href="#top">点我跳转到顶部</a>

  • 功能性链接

    如邮箱:<a href="mailto:ttaolu.163.com">发送邮件给我</a>

    qq推广:

    <a href="http://wpa.qq.com/msgrd?v=3&uin=469495751&site=qq&menu=yes" target="_blank">   <img border="1" src="http://wpa.qq.com/pa?p=2:469495751:53" alt="点击这里给我发消息" title="点击这里给我发消息"/> </a> 

list 列表标签 order,unordered,definition

  • 有序列表 ol (order-list)

    • <ol>有序列表     <li>内容1</li>     <li>内容2</li>     <li>内容3</li>     <li>内容4</li> </ol> 
  • 无序列表 ul (unordered-list)

    • <ul>无序列表     <li>内容1</li>     <li>内容2</li>     <li>内容3</li>     <li>内容4</li> </ul> 
  • 自定义列表dl (definition-list)

    • dt (definition-list-title)

    • dd (definition-list-data)

    • <dl>自定义列表     <dt>列表头dt</dt>     <dd>内容dd1</dd>     <dd>内容dd2</dd>     <dd>内容dd3</dd>     <dd>内容dd4</dd>     <dt>列表头dt333</dt>     <dd>内容dd3331</dd>     <dd>内容dd3332</dd>     <dd>内容dd3333</dd> </dl> 

table 表格

  • 行 tr : table row

  • 列 td : table data, (数据)每一行存放的数据

    • table 的属性有

      title

    • td 的属性有:

      rowspan: 该数据跨几行,如果跨两行,则下一行的数据从第二列开始排列(第一列位置被占用)
      colspan: 数据跨几行,如果跨两列,则该行剩下的数据全部往后一格

    <table border="1px" title="学生成绩表格">   <tr >     <td colspan="3">学生成绩</td>   </tr>   <tr>     <td rowspan="2">大乔</td>     <td>语文</td>     <td>100</td>   </tr>   <tr>     <td>数学</td>     <td>99</td>   </tr>   <tr>     <td rowspan="2">周瑜</td>     <td>语文</td>     <td>89</td>   </tr>   <tr>     <td>数学</td>     <td>102</td>   </tr>  </table> 

学生成绩表
大乔 语文 100
数学 99
周瑜 语文 89
数学 102

audio 音频

  • 常见属性:

    src : 资源路径

    title:悬停提示

    controls :控制台

    autoplay :自动播放

    loop:循环播放

    muted:静音

    <audio src="../resources/media/audio/G.E.M.邓紫棋-来自天堂的魔鬼.mp3" controls autoplay loop title="邓紫棋-来自天堂的魔鬼"></audio> 

video 视频

  • 常见属性:参考音频

    <p>     <video width="500" height="300" title="花朵视频" controls autoplay>         <source src="../resources/media/video/flower.mp4" type="video/mp4">         <source src="../resources/media/video/flower.mp4" type="video/ogg">         <source src="../resources/media/video/flower.mp4" type="video/webm">         <!-- 以下两个不行 -->         <!--    <source src="../resources/media/video/flower.mp4" type="video/avi">-->         <!--    <source src="../resources/media/video/flower.mp4" type="video/application/octet-stream">-->     </video>     <br> </p> <p>     <video src="../resources/media/video/flower.mp4" width="500" height="300" title="花朵视频2" autoplay loop></video>     <br> </p> <p>     <video src="../resources/media/video/flower.mp4" width="500" height="300" title="花朵视频3" autoplay loop></video>     <br> </p> 
  • 无法播放问题:

    • windows系统设置问题-windows功能未启用或MIME类型未配置

      control-程序-卸载程序-侧边栏的启动或关闭windown功能

      专业版打开Windows功能:运行-OptionalFeatures

      勾选两项:

      Internet Information Services/Web 管理工具/IIS 管理控制台 (勾选)
      Internet Information Services/万维网服务 (勾选),该选项不用进行展开了


      按下win键-输入IIS打开控制台

      专业版打开IIS控制台:运行-inetmgr

      双击MIME类型-检查.mp4是否有配置,如无,右侧操作栏点击添加-输入扩展名.mp4和mime类型video/mp4

      其他参考命令:

      本机的IIS服务重启,停止,启动: iisreset, net stop iisadmin /y, net start iisadmin

      重启或者停止w3服务: net start w3svc, net stop w3svc

    • 视频本身问题-由视频本身无法被浏览器解析的情况

      通过各种转码软件重写视频源件

      放弃该视频,更换其他视频

iframe 内联框架

<p>     <iframe src="//player.bilibili.com/player.html?aid=804847829&bvid=BV1ay4y1V7XG&cid=387543623&page=1"             scrolling="no" border="0" frameborder="no" framespacing="0" width="900" height="600"             title="B站小视频" allowfullscreen="true"></iframe> </p> <p>     <iframe name="iframe2" src="https://www.bilibili.com/" width="300" height="200" frameborder="0"             title="B站首页"></iframe> </p> <p>     <!-- 内联框架跳转 src属性可以省略也可以为空src="",src为其他时,点击跳转就会覆盖原iframe的内容 -->     <iframe name="iframe3" width="300" height="200" frameborder="1" title="什么都没有"></iframe>     <a href="https://www.cnblogs.com/ttaolu/" target="iframe3" title="博客">跳转至我的博客</a> </p> 

form 表单

属性

  • name: 表单名称
  • method: 表单提交时,表单中的元素内容以键值对置入url(get ),元素的键值对内容以data方式发送(post)
  • action: 表单提交位置,提交时表单中的元素内容信息发往地址,可以是网站、请求处理地址

表单元素(标签)

  • label 元素

    • for 属性:指定其他元素id
  • select 元素

    • 属性:name,id,
    • 包含元素:option
      • option 属性有: value,selected 并可指定option 标签的值,用于提示用户该选项文本描述信息
  • textarea 元素

    • 属性:name,id,value,placeholder,cols,rows
  • input 元素

    • type 属性

      • text 文本框

      • password 文本框

      • number 文本框

      • search 文本框

      • url 文本框

      • email 文本框


      • checkbox 复选框

      • radio 单选框,单选框多个元素分为一组,指定元素的name属性为相同即可,即相同name的radio元素为一组


      • submit 按钮

      • reset 按钮

      • button 按钮

      • image 按钮

      • file 文件选择按钮,


      • hidden

      • range 滑块

    • name 属性,表单元素key

    • id 属性,表单元素id,用于识别

    • value 属性,表单元素的值,很多元素有默认值,一个元素只有一个值,但是可以多个元素有相同的name,以达到一个key多个value

      如是k1=v1&k1=v2&k1=v2,这里三个元素name都为k1,有三个值分别未v1,v2,v2

    • title 属性,悬停提示,鼠标悬停到该组件时显示的文本,常用于文本框

    • placeholder 属性,用户提示,常用于文本框,内容为空时,文本框内显示文本提示用户输入什么信息

    • maxlength 属性,文本框限制用户输入的字符个数

    • accpet 属性,可接受value的类型,

      可指定后缀”.png”,

      可指定类型”image/*”,

      可指定多个,用逗号分隔”image/gif,image/jpg”, “.csv,.jmx”

      可同时指定类型和后缀,用逗号分隔”image/*,.md”

    • required 属性,非空验证,提交时,如果该元素未被选中或为空未输入,无法进行提交,注意单选框只需指定一个元素即可,指定多个效果相同,

      表示该单选框组内必须有一个元素被选中

    • patten 属性,正则验证,提交时,用正则表达式验证输入框合法性,无法进行提交

    • readonly 属性,使该元素只读,不可修改

    • disabled 属性,使该元素不可互动,如无法输入,点击等

    • hidden 属性,用于隐藏该元素

    • selected 属性,用于单选或复选框被选中,默认未选中,下拉列表框选项,默认第一项,如果指定多个都被选中,那么取最后一个

    • checked 属性,单选、复选框默认为未选中,该属性指定选中

    • multiple 属性,启用复选功能,常用组件类型为为 file

    • size 属性,初始宽度,根据类型type的不同,单位有字符char(如文本框),像素px(如各种按钮大小)

    • rows 属性 用于多行文本框(文本域),指定文本框行数

    • cols 属性,用于文本框,

<h1>用户注册</h1> <form action="1.learn.html" method="get">     <label>名字:<input type="text" name="userName" title="请输入用户名" placeholder="你好啊,朋友"/></label>     <br>     <label>密码:<input type="password" name="passWord"/></label>     <p>         <input type="submit" name="signIn" value="注册B站账户">         <input type="reset" name="reset">     </p> </form> <hr> <!--登录界面2--> <h1>用户登录</h1> <form action="2.list.html" >     <label>名字:<input type="text" name="userName"/></label>     <br>     <label>密码:<input type="password" name="passWord"/></label>     <p>         <input type="submit" value="登录到w3c" name="login">         <input type="reset" name="reset">     </p> </form> <hr> <h2>单选框</h2> <form name="单选框表单" method="get" action="1.learn.html">     <!--  如果都是checked, 那么最后的将覆盖之前的,也就是只有最后一个生效。-->     <p>单选框:         <input type="radio" name="sex" value="male" required>男         <input type="radio" name="sex" value="female" required>女     </p>     <p>单选框:         <label><input type="radio" name="sex1" value="male" required >男</label>         <label><input type="radio" name="sex1" value="female" required>女</label>     </p>     <input type="submit">     <br/> </form> <hr>  <form action="1.learn.html">     <p id="gg">多选框表单:         <!--    <label for="gg">game over:</label> required 属性 必须选中 -->         <label><input type="checkbox" name="hobby" value="sleep">吃饭</label>         <label><input type="checkbox" name="hobby" value="code">睡觉</label>         <label><input type="checkbox" name="hobby" value="game">敲代码</label>         <label><input type="checkbox" name="hobby" value="chat">打游戏</label>         <label><input type="checkbox" name="hobby" value="chat">打游戏</label>     </p>     <input type="submit"> </form> <hr>  <form action="1.learn.html">     <p>         <label for="stat">选择国家:</label>         <select name="location" id="stat">             <option value="china">中国</option>             <option value="us" selected>美国</option>             <option value="wai">外国</option>             <option value="wai">外国</option>         </select>     </p>     <p>         <label for="textarea">说明:</label>         <br>         <textarea name="say" id="textarea" cols="30" rows="10" placeholder="请输入你的意见!"></textarea>     </p>     <p>         <label for="idFile">选择你的头像</label>         <input type="file" name="sFile" id="idFile" multiple accept=".png">         <input type="button" name="upload" id="idUpload" value="开始上传">         <label for="idUpload">上传</label>     </p>      <p><input type="submit"></p>  </form> 

浏览器快捷键

  • Ctrl + U 查看网页源代码 (*****

  • F12 显示/隐藏开发者工具 (*****

  • Ctrl + Shift + I 审查元素(opean drawer) 同上

  • Shift + F5 去缓存刷新 (*****

  • Esc 停止加载 (*****

  • Shift + Esc 任务管理器

  • F6 选中地址栏

  • F5 刷新(重新载入)

  • Ctrl + H 显示历史记录

  • Ctrl + Shift + Del 清理上网痕迹

  • Ctrl + Click 新标签打开不跳转

  • Ctrl+Shift + Click 新标签打开并跳转

  • Alt + Click 图片 快速保持图片

    Idea 编辑 html 技巧

  • tab自动完成标签,如输入h1后按一下tab

赞(0) 打赏
未经允许不得转载:张拓的天空 » HTML学习笔记
分享到: 更多 (0)

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

专业的IT技术经验分享 更专业 更方便

联系我们本站主机

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏