HTML知识总结

淡淡的烟草味﹌ 2022-05-13 01:28 208阅读 0赞

**1.1 前端基础三语言**

HTML：hypertext Markup language；超文本标记语言

CSS：cascading style sheet；层叠样式表

JavaScript：基于对象和事件驱动的客户端脚本语言

**1.2 浏览器及内核（shell）**

![70][]

**2. html标签是根标签；head和body标签是结构化标签；**

head标签是编辑给浏览器的，让浏览器识别；body标签编辑给用户看的；

**3. 编码字符集：4种，**gb2312：国标第2312条，只能识别简体中文；gbk：国标扩展版本，包含所有亚洲的字符；Unicode：万国码，所有国家语言都包括；utf-8：8-bit Unicode Transformation Format，8位Unicode转换格式

4. ![70 1][]

让搜索引擎爬虫知道该网站的内容是英文的；lang = ‘zh’，内容是中文；

**5. <meta** http-equiv="参数"content="参数变量值">；

refresh(刷新) ,自动刷新并指向新页面，<meta http-equiv = "refresh" content = "2;url = http://www.jb51.net">

**6. 粗体：strong； 斜体： em； 中划线（删除线）：del； 回车换行：br**

**7. 编辑器中的空格：**英文单词分隔符，不管写几个空格只会显示一个空格的效果，同时，用来分隔单词的，这样溢出才会自动换行。

![70 2][]

没有自动换行。

而让浏览器识别的有：

**空格：&nbsp;**

**>： >（great than）**

**< ：<（less than）**

**8. 有序列表和无序列表**

**有序列表：**<ol>默认按数字1,2,3，，，排序

① 排序方式：type = “1” 、“a”、“A”、“i”、“I”

![70 3][]![70 4][]

②倒叙排列：![70 5][]

③起始数：![70 6][]

注意：type只是排序的类型，只能是1、a、A、等，start才是起始的值

**无序列表：<ul> ** 默认是小黑点

属性：type = "disc" （默认）小黑点；type = “square”方块；type = “circle”圈

**注意：大多数用于ul  li 的父子级的结构**

**9. a标签**：a标签内可以嵌套img标签；可以将a标签改造为块级；

功能一：超链接

功能二：锚点（anchor）a标签的缩写

![70 7][]

功能三：调用电话、邮箱接口

![70 8][]

功能四：JavaScript协议限定符

![70 9][]

当点击“联系客服”的时，弹出框提示：点我作甚？

**10. form表单**

（1）action：提交地址；method：请求方式post或get；target = “\_self”（默认）、“\_parent”父级窗口打开，用于框架页、“\_top”：忽略一切框架，在浏览器中打开。

![70 10][]

（2）input标签：

![70 11][]

**注意：type = submit 和 reset，value默认是“提交”、“重置”；但是通过value修改值；而type = file，value是“选择文件”，不可修改**

**数据包括：数据名和数据值，所以要有name属性和value属性**

**input标签重要属性：**

type：类型；disable：灰色不可用；checked：是否选中状态，用于type = checkbox和radio；width和height；maxlength：字数限制，用于type = text 和 password；readonly：仅读；size：输入字段的宽度，type = text 和 password时，size指文字个数； type 是其他类型时，单位是px；value：值，当type = checkout 和 radio时，不可忽略该属性。

**input内JavaScript代码：**

![70 12][]

**11. 下拉列表 select > option**

下拉列表：
        <br>
     <select name="star">
         <option value="胡歌">胡歌</option>
         <option value="刘亦菲">刘亦菲</option>
         <option value="刘德华">刘德华</option>
     </select>
     <p></p>
     多行列表：
     <br>
     <select name="book" size="2">
         <option value="语文">语文</option>
         <option value="数学">数学</option>
         <option value="英语">英语</option>
     </select>
     <p></p>
     多行列表（可多选）：
    <br>
     <select name="movies" size="3" multiple>
         <option value="大话西游">大话西游</option>
         <option value="战狼2">战狼2</option>
         <option value="一出好戏">一出好戏</option>
         <option value="熊出没">熊出没</option>
     </select>

效果：

![70 13][]

**12. textarea 多行文本标记标签**

与单行文本相比，多行文本可以输入更多的内容，常用于form标签内。

（1）name：值的名字，cols：列数；rows：行数；wrap=hard 默认换行

<textarea name="detail" id="book-detail" cols="30" rows="10" wrap="hard">
            我是一只小小鸟，想要飞呀飞呀飞不高噢噢噢噢
        </textarea>

效果：

![70 14][]

**（2）其实可以通过css属性来控制textarea的宽高**：

![20190306201329240.png][]

（3）HTML <textarea> 标签的 placeholder 属性

![20190306201630601.png][]

（4）注意的是：**textarea标签没有value特性**，但是可以通过js获取textarea的dom元素，dom元素是有value属性的。

<textarea id="userName" name="content" style="width:100px;height:100px;" placeholder="Please enter your name"></textarea>
      <script>
        var username = document.getElementById('userName');
        console.log(username.vaule);
      </script>

![20190306202402750.png][]

13. 表格table

效果：

![70 15][]

[70]: /images/20220513/8d393e9cf20a4a0caae04ed33f2ab23e.png
[70 1]: /images/20220513/ea653655463c461c913fd95931d7252b.png
[70 2]: /images/20220513/70edb968230e4749a43f5defba51b4d7.png
[70 3]: https://img-blog.csdn.net/20180909170156334?watermark/2/text/aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3p5ejAwMDAwMDAw/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70
[70 4]: /images/20220513/3872027e50b14e48b0896985dbf1b73f.png
[70 5]: /images/20220513/b02fd39afe8944438282c8ec14450e03.png
[70 6]: /images/20220513/18b33659676f4470839d2e6dcf810f88.png
[70 7]: /images/20220513/01bdeec6024c41238a7e3f71308d7e22.png
[70 8]: /images/20220513/5f3ad05f22df44c6bff8d569949ed0b1.png
[70 9]: /images/20220513/6dd504cfa6da4db1856f428743210b5b.png
[70 10]: /images/20220513/0baccf258a27496c816e7b78b81eb6c3.png
[70 11]: /images/20220513/426aca67727b4bf396041987c5c7717e.png
[70 12]: /images/20220513/b285ce1ecfbd41ce83459c57823eec92.png
[70 13]: /images/20220513/0255026cab104ace87eb4a553be9e12d.png
[70 14]: /images/20220513/aa16f383ee654c05be3ca38ed1c92cf9.png
[20190306201329240.png]: /images/20220513/aba01fdce4634122b8d3016188cc196f.png
[20190306201630601.png]: /images/20220513/64c54d448d91470b9adb53676ea3f9dd.png
[20190306202402750.png]: /images/20220513/2b5adb8bb77d4981a78f4e7b7503d994.png
[70 15]: /images/20220513/ae071d12e5e5437fb909b6d213a0cdd2.png