百木园-与人分享,
就是让自己快乐。

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)来源

  • href (hypertext 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 标签的值,用于提示用户该选项文本描述信息
  • datalist 元素,选项列表

    • 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

html 名词

元素HTML 文档由 HTML 元素定义

- 元素name 推荐使用小写
- 开始标签/起始标签(opening tag)
- 结束标签/闭合标签(closing tag)
- 元素内容(content)是开始标签与结束标签之间的内容,某些 HTML 元素具有空内容(empty content)
- 空元素在开始标签中进行关闭(以开始标签的结束而结束)
- 大多数 HTML 元素可拥有属性
- 大多数 HTML 元素可以嵌套(HTML 元素可以包含其他 HTML 元素)

常用元素(标签)

  • 标题 (Heading)通过<h1> - <h6> 标签
    浏览器会自动地在标题的前后添加空行
  • head标签:
    可以添加在头部区域的元素标签为: <title>, <style>, <meta>, <link>, <script>, <noscript> 和 <base>
  • 段落通过标签 <p> 来定义块级元素
    浏览器会自动地在段落的前后添加空行
  • 链接通过标签 <a> 来定义
  • 图像通过标签 <img> 来定义
  • base 定义页面中所有链接默认的链接目标地址
  • meta 提供了HTML文档的meta标记
    来描述HTML文档的描述,关键词,作者,字符集等
  • 定义关键词:<meta name=\"keywords\" content=\"HTML, CSS, XML, XHTML, JavaScript\">
    定义描述内容: <meta name=\"description\" content=\"免费 Web & 编程 教程\">
    定义网页作者: <meta name=\"author\" content=\"Runoob\">
    每30秒钟刷新当前页面: <meta http-equiv=\"refresh\" content=\"30\">

    常用标签二

  • b: bold 加粗 <strong> 替换加粗标签 <b>
  • i: italic 斜体 <em> 替换 <i>标签
  • <b> 与<i> 定义粗体或斜体文本
    <strong> 或者 <em>意味着你要呈现的文本是重要的,所以要突出显示。

  • small/big
  • br/hr
  • sub/sup
  • pre: 预格式文本
  • abbr/acronym: 缩写简写/首字母缩写,通常指定titil
  • bdo: 文字方向
  • q/blockquote: 引用语,短/长,相当于引号
  • del/ins: 删除插入,中划线,下划线
  • 表格关键字

    table,caption,th,tr,td,colspan,rowspan,colgroup,col,thead,tfoot,tbody

    列表关键字

    ul,li,ol,type,dl,dt,dd,start,

    表单

    form,fieldset,legend,optgroup,datalist,keygen,output

    HTML 属性

    属性是 HTML 元素提供的附加信息

  • 属性一般描述于开始标签
  • 属性总是以名称/值对的形式出现,比如:name=\"value\"
  • 属性值应该始终被包括在引号内,双引号是最常用的,不过使用单引号也没有问题
  • 在某些个别的情况下,比如属性值本身就含有双引号,那么您必须使用单引号
    例如:name=\'John \"ShotGun\" Nelson\'
  • 属性和属性值对大小写不敏感,推荐小写的属性/属性值
  • 常用属性

  • class :为html元素定义一个或多个类名(classname)(类名从样式文件引入)
  • id: 定义元素的唯一id
  • style: 规定元素的行内样式(inline style)
  • title: 描述了元素的额外信息 (作为工具条使用)
  • 来源:https://www.cnblogs.com/ttaolu/p/15172232.html
    图文来源于网络,如有侵权请联系删除。

    未经允许不得转载:百木园 » html 笔记

    相关推荐

    • 暂无文章