HTML 基础总结

作者: 千反田爱瑠爱好者 | 来源:发表于2018-07-28 12:13 被阅读15次

2018web前端最新面试题总结
HTML 基础总结
HTML基础总结
HTML基础总结
HTML基础总结
Html初级知识总结
w3c School读书笔记（一）：HTML基础
html css基础总结
09 html基础总结
HTML基础标签总结

我不记得这是第几次开始学习HTML了，但不得不承认直到现在还是有很多问题都没搞清楚，所以不得不重新梳理一遍...

版本

HTML 4.01
XHTML
HTML 5
HTML 5.1

版本规范文档（W3C制定）：https://www.w3.org/TR/html5/

而所谓H5其实是能运行在微信上的网页的统称。

常用的标签标签：a、form、input、button、h1、p、ul、ol、small、strong、div、span、kbd、video、audio、svg，一般来说从名字判断意思就可以了。
标签用法查询：https://developer.mozilla.org/en-US/
HTML不需要区分块级元素和内联元素（通过CSS控制）；
必须写DOCTYPE，且与版本对应（如HTML 5就是<!DOCTYPE html>），否则会出现奇怪的问题，关于DOCTYPE：https://www.w3.org/QA/2002/04/valid-dtd-list.html
<div>和<span>没有任何意义，需要通过类、样式控制，只有桌面元素没有对应语义的标签时才使用这两个；

一些常见的标签

标签属性、用法见MDN：https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/
重要知识点：
- 空标签
- 可替换标签
- 全局属性
- display 不止 3 种

1. iframe

嵌套页面（目前已很少使用）

<iframe src="#" name="xxx" frameborder="0"></iframe>
<a target="xxx" href="http://qq.com">   <!-- 点击链接在iframe打开页面 -->

2. a

跳转页面（HTTP GET 请求），常用属性：

taget：开启目标链接的位置
- _blank：空页面
- _self：当前页面（iframe）
- _parent：父页面（iframe的父页面）
- _top：顶层页面
href：跳转的链接
- 绝对地址：http://qq.com（安装http-server可通过本地server方式打开：npm i -g http-server; hs -c-1）；
- 相对地址：qq.com（“//qq.com”则根据当前页面的协议，默认为file）；
- 锚点：#xxx（页内跳转，不发起请求）；
- 伪协议：javascript:;（点击后什么都不做，不发请求）
download：下载目标链接（或指定content-type： application/octet-stream）

3. form

跳转页面（HTTP POST 请求），常用属性：

action：提交请求目标链接；
target：与a标签的target属性含义相同；
method：发起请求的类型（可发送get、post请求，默认为get）;
- 其中get方法会把参数放在查询参数（不能放在第四部分），post方法默认把参数放在form data中（也可以放在查询参数，即URL中）。

<form action="index.html" method="post">        <!-- 注意file协议不支持post -->
    <label>用户名：</label><input type="text" value="username" name="username">         <!-- 英文数字以外字符都会转义成unicode -->
    <label>密码：</label><input type="password" value="password"  name="password">     <!-- 注意HTTP是明文传输 -->
    
    <!-- 同一组多选框和单选按钮通过name标识 --> 
    喜欢的水果：
    <label><input type="checkbox" name="fruit" value="banana">香蕉</label>
    <label><input type="checkbox" name="fruit" value="apple">苹果</label>
    
    <!-- for指向<input>的id，也可以直接把<input>包括在<label>中 -->
    <label><input name="ok" type="radio" value="yes">是</label>
    <label><input name="ok" type="radio" value="no">否</label>
    
    <select multiple>
        <option value="">-</option>
        <option value="1">第1组</option>
        <option value="2">第2组</option>
        <option value="3" disabled>第3组</option>
        <option value="4" selected>第4组</option>
    </select>
    
    <!-- 文本框默认可以随意拉动大小，使用css控制 --> 
    <textarea style="resize:none; width: 200px" name="爱好" cols="30" rows="10"></textarea>
    
    <input type="submit" value="提交">           <!-- form标签内部必须又submit类型的input按钮，否则无法发起请求 --> 
    
</form>

4. input / button

区别：是否为“空标签”

当form中只有一个<button>，缺省行为是submit；
当form中只有一个<button type="button">，无缺省行为，该表单无提交按钮；
当form中只有一个<input type="button">，无缺省行为，该表单无提交按钮。

5. table

数据展示

<table border="1" style="border-collapse: collapse">
    <colgroup>
        <col width=100>
        <col width=150>
        <col width=150>
        <col width=100>
    </colgroup>
    <thead>
        <tr>
            <th></th>
            <th>姓名</th>
            <th>班级</th>
            <th>分数</th>
        </tr>
    </thead> 
    <tbody>
        <tr>
             <th></th><td>小红</td><td>2</td><td>3</td>
        </tr>
        <tr>
            <th></th><td>小蓝</td><td>2</td><td>3</td>
         </tr>
         <tr>
             <th>平均分</th><td></td><td>2</td><td>3</td>
         </tr>
    </tbody>
    <tfoot>
         <tr>
             <th>总分</th><td></td><td>2</td><td>3</td>
         </tr>
    </tfoot>
</table>

展示效果：

	姓名	班级	分数
	小红	2	2
	小蓝	2	3
平均分		2	3
总分		2	3

布局

设计标签时可以考虑以后如何更方便设计CSS布局，只使用横向布局或纵向布局（不混合，如横向布局的div加入要换行排放的div时，应该嵌套一层div，与后面的div纵向排放）；
设计页面时先只写HTML，考虑的是使用什么标签、如何排版而忽略样式；

布局设计示例

参考：http://rscardwp.px-lab.com/

<!DOCTYPE html>
<!-- HTML中<html>、<head>都可以省略，<body>在没有注释的前提下可以省略，但<title>是必须存在才合法的； -->
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>YWH的个人简历</title>
</head>
<body>
    <!-- 导航栏 -->
    <div class="topNavBar"> 
        <img src="#" alt="logo"/>
        <nav>
            <ul>    <!-- 无序列表，设计时不需要考虑是竖排还是横排，后面通过CSS控制即可 -->
                <li><a href="#"></a>ABOUT</a></li>
                <li><a href="#"></a>SKILL</a></li>
                <li><a href="#"></a>EXPERIENCE</a></li>
                <li><a href="#"></a>PRICING</a></li>
                <li><a href="#"></a>BLOG</a></li>
                <li><a href="#"></a>CALENDAR</a></li>
                <li><a href="#"></a>CONTACT</a></li>
                <li><a href="#"></a>OTHER</a></li>
                <li><a href="#"></a>ALL DEMOS</a></li>
            </ul>
        </nav>
    </div>
    
    <!-- 横幅 -->
    <div class="banner" style="background-image: url(#)"></div>
    <main>
        <div class="card">
            <div class="picture">
                <img src="" alt="头像">
            </div>
            <div class="text">
                <div class="profile">
                    <span class="welcome">Hello</span>
                    <h1>YWH</h1>
                    <p>前端开发工程师</p>
                    <hr>
                    <dl>        <!-- 定义列表 -->
                        <dt>年龄</dt>
                        <dd>18</dd>
                        <dt>所在城市</dt>
                        <dd>广州</dd>
                        <dt>邮箱</dt>
                        <dd>88803888@qq.com</dd>
                        <dt>手机</dt>
                        <dd>13812345678</dd>
                    </dl>
                </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>
                </div>
            </div>
        </div>
        
        <!-- 注意点击跳转到另一个页面的是链接，弹出对话框之类的才是按钮，而不是根据外观区分 -->
        <a class="button" href="#">下载PDF简历</a>
        <p>
            YWH...
        </p>
    </main>

    <!-- 章节 -->
    <section>
        <h2>专业技能</h2>
        <ol>
            <li>HTML 5 &amp; CSS3</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>原生</li>
            </ol>
        </nav>

        <div class="jobs">
            <div class="big"></div>
            <div class="small"></div>
            <div class="small"></div>
        </div>
    </section>
</body>
</html>

2018web前端最新面试题总结
2018web前端最新面试题总结一、Html/Css基础模块基础部分什么是HTML？答： HTML并不是...
HTML 基础总结
我不记得这是第几次开始学习HTML了，但不得不承认直到现在还是有很多问题都没搞清楚，所以不得不重新梳理一遍... ...
HTML基础总结
html的基本结构语法：<标签> eg：规范：1.用<和>括起来；2.分为双标签和单标签；(...
HTML基础总结
HTML基础知识总结 HTML基本概念什么是HTML？ HTML是用来描述网页的一种语言 HTML指的是超文本标...
HTML基础总结
都是自己学习时候总结的，如有错误以及需要改进的地方，请大家尽管指出，共同进步，谢谢。 HTML(Hyper t...
Html初级知识总结
一、Html初级知识总结 1.基础知识脑图总结 2.基本简介 2.1.什么是Html Html不是编程语言，而是用...
w3c School读书笔记（一）：HTML基础
html的基础知识 w3c_html基础教程总结文档的基本结构脑图常见元素 HTML元素语义的分类结构类 ...
html css基础总结
未完待续 Html css “Html5的使命是详细分析各web浏览器所具有的功能,…” 各大浏览器的特征是什么,...
09 html基础总结
就好比，我们建房子，钢筋水泥是HTML结构;刷漆（红的，绿的等）是css;电梯上下走是我们的js 注意：所有的代码...
HTML基础标签总结
一、HTML基础标签 1、文档声明（1）文档声明，声明当前网页版本html5的文...