关于HTML：续知识点

2017-12-08 本文已影响0人阿鲁提尔

HTML知识点

HTML规范由W3C组织制定的。
W3C的创始人是Sir Timothy John Bermers-Lee (李爵士)
命令行whois用来查看某个域名拥有者的身份
Dribbble.com (追波网)设计师的社交网络，查看优秀的设计作品，可以仿项目提升css水平。
<b>表示加粗，<strong>表示内容重要。
p标签的英文全称是paragraph
a标签的英文全称是anchor
不能有内容的标签[空元素]：img、input、meta、link、hr、br、col、colgroup
HTML5不推荐使用闭合的标签，推荐:<input type = " text ">
可以出现在<head>内的元素：base title meta link script noscript

noscript标签(历史遗留标签)作用是当用户浏览器不支持script，则会显示noscript中的内容，禁用script设置在

iframe: iframe可以拥有一个name，a标签的target可以通过name指向这个iframe;现代前端开发中，iframe很少用；iframe用于在当前页面里嵌入一个页面。
meta声明当前页面的charset:

<meta charset="utf-8">
<meta http-equiv="content-type" content="text/html;charset=utf-8">

body标签的默认margin是8像素。
div,ul,h1默认display为block。
img input video 是可替换元素，宽高由自己决定，也可以通过属性和样式改变大小。
HTML代表什么意思：Hyper Text Markup Language
谁在制定Web标准：The World Wide Web Consortium(W3C)
李爵士发明了HTML，他的同事后来发明了CSS
<em>标签表示语气重，<strong>标签表示地位重。
在新窗口打开链接：<a href="url" target="_blank">
内联元素展示的时候不需要另起一行。
有序列表<ol>
子弹列表<ul>
CheckBox：<input type = "checkbox">
text input: <input type="text">
drop-down list: <select>
text area: <textarea>
插入一个标签：<img src="image.gif" alt="MyImage">
插入背景图片：<body style = "background-image:url(background.gif)">
HTML注释：
块级元素是另起一行的。
<title>定义了文档的title。
HTML5的doctype: <!DOCTYPE html>
<footer>定义了HTML页脚。
可以嵌入一个svg直接到页面里。
正确的播放video： <video>
正确的播放audio：<audio>
内容可编辑contenteditable属性：<div contenteditable>你好</div>
svg是XML形式。
<canvas>元素用来画图。
在HTML中，required属性被用来input必须被填充。
<input type="search"> 搜索框，圆角边框，多出一个清空按钮。
<input type="range"> 滑动块。
<nav>定义了一个导航链接。
<aside>定义了和文章不相关的内容。
<header>定义了header。
<a>标签和<button>的区别：到一个新页面用a标签，打开一个弹框，用button。
<section>表示一个章节。
&要写成&

常见标签

iframe 标签
iframe也是一个可替换标签，默认高度50，宽度100

点击标签时，iframe变换为相应页面
frameborder消除边框
name要结合a标签才有用

嵌套页面

<iframe src="https://www.baidu.com" name="xxx"></iframe>

a 标签
跳转页面（HTTP GET 请求）

<a href="http://qq.com" target = "_blank">QQ</a> //新窗口打开
<a href="http://qq.com" target = "_self">QQ</a> //本窗口打开
<a href="http://qq.com" target = "_parent">QQ</a> //在父页面打开
<a href="http://qq.com" target = "_top">QQ</a> //在顶层窗口打开

download属性

<a href = "http://qq.com" download>下载</a>
content-type: application/octet-stream 浏览器就会以下载的形式接受请求,而不是在页面上展示。
如果没有写，就content-type: text/html,就在a标签上写 download 强制下载。

href

<a href = "qq.com" >QQ</a>  //相对地址，当做当前子页面
<a href = "http://qq.com" >QQ</a>  //跳转到QQ网站
<a href = "//qq.com" >QQ</a>  //使用当前网站协议，并跳转
<a href = "xxx.com" >QQ</a>  //跳转到/xxx.html
<a href = "#xxx" ></a>  //锚点不发请求，页面内的跳转
<a href = "?name=xxx" ></a>  //跳转到...?name=xxx 发起一个get请求
<a href = "javascript: alert(1);" ></a>  //伪协议，弹出1
<a href = "javascript: ;" ></a>  //和#相比，#会刷新页面，并跳转到页首，javascript: ;不变化

属性见 MDN：https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/a

form 标签
跳转页面（HTTP POST 请求）
如果form表单里面没有提交按钮，就无法提交表单。
get和post区别：get获取内容，post上传内容。
form也有target属性。
密码在http中是明文传输的，只要有人在这中间做监听，就能获取到密码。
传输过程中，一个英文占一个UTF-8字节，一个汉字占3个UTF-8字节，汉字会转义，%加编码x3个。
file协议不支持post
get没有第四部分，post可以有第一部分
没有method就是get请求

属性见 MDN：https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/form

input / button
区别：是否为「空标签」
input按钮，type=button，不会成为提交按钮。type=submit，才会成为提交按钮。

checkbox,点击文字，选中多选框，label的for和input的id是一对，要一起出现
不使用for和id也能点击文字选中input的方法
老司机写法

完整表单

预览图
提交结果
下拉分组
multiple设置可以多选；disabled设置不能选中；selected设置默认选中
多行文本
resize:none设置不能拖拽，rous设置行数，但不准，推荐写宽高

input 的属性见：https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/Input
一个form表单中，只有一个button按钮，会自动提升为提交按钮。如果写了type="button"，就是一个按钮，没有提交按钮。
button 的属性见：https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/button

table 标签示例
用于展示数据

border-collapse:collapse边框合并

属性见：https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/table

知识点：

空标签
可替换标签
全局属性
display 不止 3 种

网站HTML

布局划分

明年会出Grid布局，可以复杂布局。

我的技能

HTML代码

作品集

HTML代码

全部代码

<!DOCTYPE html>
<html>
  <head>
    <title>个人简历</title>
    <link rel="stylesheet" href="./a.css">
  </head>
  <body>
    <div class="topNavBar clearfix">
      <a class="logo" href="#" alt="logo" style="float: left; ">
        <span class="rs">RS</span><span class="card">card</span>
      </a>
      <nav style="float: right;">
        <ul class="clearfix">
          <li><a href="#">关于</a></li>
          <li><a href="#">技能</a></li>
          <li><a href="#">作品</a></li>
          <li><a href="#">博客</a></li>
          <li><a href="#">日历</a></li>
          <li><a href="#">联系方式</a></li>
          <li><a href="#">其他</a></li>
        </ul>
      </nav>
    </div>
    <div class="banner" style="background-image: url(#)"></div>
    <main>
      <div class="card">
        <div class="pictureAndText">
          <div class="picture">
            <img src="" alt="头像">
          </div>
          <div class="text">
            <div class="profile">
              <span class="welcome">Hello</span>
              <h1>XXX</h1>
              <p>前端开发工程师</p>
              <hr>
              <dl>
                <dt>年龄</dt>
                <dd>18</dd>
                <dt>所在城市</dt>
                <dd>北京</dd>
                <dt>邮箱</dt>
                <dd>fangyinghang@foxmail.com</dd>
                <dt>手机</dt>
                <dd>13812345678</dd>
              </dl>
            </div>
          </div>
        </div>
        <footer class="media">
          <a href="#"><img src="#" alt="..."></a>
          <a href="#"><img src="#" alt="..."></a>
          <a href="#"><img src="#" alt="..."></a>
          <a href="#"><img src="#" alt="..."></a>
          <a href="#"><img src="#" alt="..."></a>
          <a href="#"><img src="#" alt="..."></a>
          <a href="#"><img src="#" alt="..."></a>
        </footer>
      </div>

      <a class="button" href="#">下载 PDF 简历</a>

      <p>
         资深前端工程师，资深前端讲师，现在在 饥人谷 教前端课程。<br>
        技能：前端开发，Rails 开发，Node.js 开发
      </p>

    </main>
    <section>
      <h2>技能</h2>
      <ol>
        <li>HTML 5 &amp; CSS 3</li>
        <li>JavaScript</li>
        <li>jQuery</li>
        <li>Vue</li>
        <li>React</li>
        <li>HTTP</li>
      </ol>
    </section>
    <section>
      <h2>作品集</h2>
      <nav>
        <ol>
          <li>所有</li>
          <li>框架</li>
          <li>原生JS&amp;CSS</li>
        </ol>
      </nav>
      <div class="jobs">
        <div class="big"></div>
        <div class="small"></div>
        <div class="small"></div>
      </div>
    </section>
  </body>
</html>

关于HTML：续知识点

HTML知识点

常见标签

网站HTML

猜你喜欢

热点阅读