typescript 解析 html标签 html中type标签的作用

转载

jojo 2023-08-01 12:14:59

文章标签 HTML 属性值表单 文章分类 TypeScript 前端开发

一、什么是HTML

HTML是用来描述网页的一种语言。

HTML是指超文本标记语言（不仅包含纯文本，还包含图片、超链接、音频、视频等）。

HTML使用一套标记标签来描述网页。

二、HTML标签的作用

充当网页骨架。

语义化，使网络爬虫更好的抓取网站信息。

三、HTML骨架

1 <!DOCTYPE html>
2 <html>
3     <head>
4         <!--  作用：配置html文件  -->
5     </head>
6     <body>
7         <!-- 书写标签组成的网页结构 -->
8     </body>
9 </html>

1、DOCTYPE是document type(文档类型)的简写，在网页中用来说明当前使用的XHTML或者HTML是什么版本

2、head是对HTML进行一些附加信息，内容不显示在网页中

3、body是HTML的主体部分，显示在网页中的内容

四、head标签中可以放的元素

1、meta标签

<meta charset = "UTF-8" /> 用于声明字符编码级
　　<meta name="keywords" content = "内容"> 用于提供给搜索引擎关键字
　　<meta name = "discription" content = "内容"> 用于提供给搜索引擎网页简单描述

2、title标签

标识文档标题，该标题会显示在浏览器的标题栏的标签页上

3、style标签

<style type= "text/css"></style> 编写页面内部样式

4、link标签

<link>:用于引入css样式
　 <link rel = "stylesheet" href = "index.css">

5、script标签

<script src=index.js"></script>引入外部js文件

五、HTML语法

1、标签之间对空格，缩进，换行不敏感，浏览器只会当做一个空格处理

2、标签名必须使用一对尖括号包裹，标签一般都是成对出现，单标签除外

常见单标签：<img/> <br/> <hr/>

3、标签属性写法：键值对形势（key="value"）

eg: <img src="1.png" alt="图片" title="我是一张图片"/>

六、HTML中标签分类

1、块级元素：h1-h6、p、div、ol、ul、dl、form、table等

2、行内元素 a、img、span、strong、em等

块级元素特点：

1、独占一行；
2、高度，行高以及外边距和内边距都可控制；
3、宽度缺省是父容器的宽度，除非设定一个宽度；
4、它可以容纳内联元素和其他块元素。（注意：p标签不可包含div）

行内元素特点：

1、设置宽高无效

2、对margin仅设置左右方向有效，上下无效；padding设置上下左右都有效，即会撑大空间

3、不会自动进行换行

七、HTML中常用标签

1、h系列（h1-h6）（headline的缩写） 
   作用：给文本添加标题语义 
  注意：h系列的标签不能相互嵌套，网页一般只有一个h1标签

2、p（paragragh）段落标签

  作用：给文本添加段落语义

  注意：p是文本级标签，内部只能书写文本类的内容，比如：文本，图片，表单元素，废弃标签

3、img标签（单标签）
   <img src="" alt=""/>
   src:路径，插入图片所在的位置
   alt：图片加载失败时显示的文本
   width:设置图片的宽度
   height:设置图片的高度 注意：宽度和高度一般只设置一个让图片按比例缩放
    <img src="images/01.png" alt="图片加载失败，请刷新" width="200px"/>

4、a标签（超链接）  

　　　href: 属性值书写的是要跳转页面的路径（路径可以为相对路径和绝对路径）　　

　　　target: 属性值设置新页面打开方式

     默认值（_self）：在当前窗口打开

　　　_blank: 在新窗口打开

　　　title: 悬停提示文本

    <a href="#id"></a> 可以进行页面内锚链接跳转

5、列表
     5.1无序列表 ul
      作用：给文本添加无序列表语义
      ul:unordered list 无序列表
      li:list item   列表项
      注意：
　　    ul和li是第一个成对出现的标签,出现ul一定有li，有li一定被ul包裹
　    　ul内部只能嵌套li不能出现任何其他标签。

     5.2有序列表 ol 
　　   作用：给文本添加有序列表语义
　　    ol:ordered list 有序列表
　　    li:list item 列表项
　　    每一个列表项之间有顺序之分
　　    ol,li也是一组成对出现的标签，ol一定嵌套li。
　　    ol内部嵌套一个或者多个li

       5.3自定义列表 
　　    作用：给文本添加自定义列表语义
　　    dl: definition list 自定义列表
　　    dt: definition title 标题
　　    dd: definition description 描述
　　    dl嵌套dt和dd，dt和dd是同级关系，dt是标题，dd是对标题解释说明（dl>dt+dd）

6、表单元素
       6.1form  
　　     说明：将所有的表单元素都书写在form标签内部
　　　　　   　form标签是功能标签不是结构标签
　　　　　  　 提交位置：action
　　　　　　   提交方式：method
　　　　　　   <form action="1.php" method="get"></form> 
　　　　　　  表单元素：提供给用户进行输入或者选择控件
　　　　　  　属性：type，根据type属性值，有不同的表单类型 
       6.2单行文本框  <input type="text" name="yonghuming" value="用户名" /> 
　　    6.3密码框  <input type="password" name="mima" /> 
       6.4单选框     
　　　　　　<p>
　　　　 　　请选择性别：
　　　　 　　<input type="radio" name="sex" />男性
　　　　　　 <input type="radio" name="sex" checked="checked" />女性
　　　　　　</p> 
          说明： 
　　　　　　type属性值：radio
　　　　　　同一组单选框，必须设置相同的name属性值
　　　　　　checked: 设置表单被选中checked

　　6.5复选框 
　　　　请选择爱好： 
　　　　<p> 
　　　　　　<input type="checkbox" name="fav" id="study" checked="checked" /><label for="study">学习</label>
　　　　　　<input type="checkbox" name="fav" id="sing" /><label for="sing">唱歌</label>
　　　　</p> 
　　　　说明：type属性值：checkbox
  　　　　　　 同一组复选框，必须设置相同的name属性值
　　　　　　   也具有checked属性
　　　　　　   可以使用label标签