【笔记】HTML+CSS基础课程（慕课）-HTML部分

全手打整理笔记加深印象~笔记的话应该不算是原创内容吧……毕竟是把别人的东西整理出来的……可是转载好像也有点奇怪……

本来是记在本子上的……心里明明白白地觉得用键盘敲出来各方面都应该方便得多，速度快又方便查找，可还是惯性地觉得手写才有感觉，直到有一天晚上停电，不得不开了个txt暂时记笔记…………然后才发现之前会觉得手写有感觉完全是因为惯！性！电子笔记简直不要更方便更清楚！

*

1. <em> 强调（默认显示为斜体）
2. <strong> 比<em>更强调（显示为粗体）
3. <span> 没有语义，为了设置单独的样式
4. <q> 引用，用于引用语（自动加引号）
5. <blockquote> 长文本引用
6. &nbsp; 空格
7. <hr /> 添加一条用于分隔的横线
8. <address> 用于标记公司的地址、电邮等
9. <code> 显示一行代码
10. <pre> 常用于显示多行代码。1）用于显示预格式化的文本，被包围在<pre>元素中的文本通常会保留空格和换行符。2）需要在文本中预显示格式都可以使用<pre，不仅仅只用于显示代码。
11. <ul><li></li></ul> 无序列表；<ol><li></li></ol> 有序列表
12. <table summary="表格简介文本">
        <caption>表格标题</caption>
        <tr>
            <th>表头</th>
            <th>表头</th>
        </tr>
        <tr>
            <td>一行的内容一</td>
            <td>一行的内容二</td>
        </tr>
    </table>
    tips：1）<tbody>的作用为，当表格内容非常多时，表格会下载一点显示一点，但如果加上<tbody>标签后，这个表格就要等表格内容全部下载完才会显示。（奇怪的是，在后来使用DOM的时候，发现即使一个表格没有写<tbody>标签，用parentNode还是会取到<tbody>标签，并必须把这个标签考虑进去，因为它在结构中真的存在。好像是被自动添加进去的。）
    2）table表格在没有添加CSS的时候显示没有表格线。（表格边框CSS：table tr td,th {border: 1px solid #000;}
    3）表头，也就是<th>标签中的文本默认为粗体且居中。
    4）summary的内容不会在浏览器中显示，它的作用是增加表格的可读性（语义化），使搜索引擎更好地读懂表格内容，还可以使屏幕阅读器更好地帮助特殊用户读取表格内容。
13. <a href="目标网址" title="鼠标滑过显示的文本" target="_blank"></a> 在新浏览器窗口打开
    <a href="mailto:yy@163.com">发送</a> 链接Email地址
    <a href="mailto:yy@163.com ? cc=xiaoming@163.com & bcc=xiaoyu@163.com & subject=主题 & body=邮件内容"></a>
    cc-填写抄送地址；bcc-填上密件抄送地址；subject-添加邮件主题；body-添加邮件内容
14. <img src="图片地址" alt="下载失败时的替换文本" title="鼠标滑过时的提示文本" />
15. <form>-HTML表单：表单可以把浏览者输入的数据传送到服务器端，这样服务器端程序可以处理表单传过来的数据。
    <form method="传送方式" action="服务器文件"></form>
    action：浏览者输入的数据被传送到的地方，比如一个PHP页面save.php
    method：数据传送的方式（get/post）
    method="get/post"两种方式的区别：
    1）get将表单中的数据按照variable=value的形式，添加到action所指向的URL后面，两者使用“?”连接，各个变量之间使用“&”连接。
    2）get是不安全的。在传输过程中，数据被存放在请求的URL地址中，这样就有可能会有一些隐私的信息被第三方看到。
    3）get方式传输的数据量非常小，一般限制在2KB左右，但是执行效率却比post方法好。而post方法传递的数据量相对较大，它是等待服务器来读取数据，不过也有字节限制，这是为了避免对服务器用大量数据进行恶意攻击。
表单：
1. 输入框（文本/密码）
    <form>
        <input type="text或password" name="名称" value="文本" /> value为文本框默认值（一般起到提示作用）
    </form>
    1）name：为文本框命名，以备后台程序ASP、PHP等使用。
    2）value：文本框默认值，一般起到提示作用。
2. 文本域（支持多行文本输入）
    <textarea rows="行数" cols="列数">文本</textarea>
    1）rows/cols：多行文本输入域的行数/列数（可用CSS样式的width和height-等同于行数和列数-表示）。
    2）文本为文本输入域的默认值。
3. 单选框和复选框
    <input type="radio或checkbox" value="值" name="名称" checked="checked" />
    1）radio-单选；checkbox-多选。
    2）value：被选择后提交数据到服务器的值。
    3）name：单选的同一组，name相同。
    4）checked="checked"：代表默认被选中。
    5）要记得，单选框和复选框没有专门显示相应的提示文本的地方，需要自己在标签外输入提示文本。value是会被提交到服务器的数据，并不会显示在网页。
4. 下拉列表框
    <form name="iForm">
        <label>爱好：</label>
        <select>
            <option value="看书">看书</option>
            <option value="下棋" selected="selected">下棋</option>
        </select>
    </form>
    1）value：向服务器提交的值。
    2）<option>看书</option>：“看书”为显示的值。
    3）selected="selected"：代表默认被选中。
    4）下拉列表框多选：<select multiple="multiple"></select>，按下Ctrl同时单击可进行多选。
5. 表单按钮
    1）<input type="submit" value="提交" /> 提交数据（提交表单信息到服务器）
    2）<input type="reset" value="重置" /> 重置表单信息
5. form表单中的label标签
    label标签不会向用户显现任何特殊效果，它的作用是为鼠标用户改进可用性。用户单击label标签，浏览器自动将焦点转到和标签相关的表单控件上。
    <form>
        <label for="控件id">请输入：</label>
        <input type="text" id="控件id" />
    </form>