html、css基础---学习笔记

---

title: VScode编辑同步Markdown文档到印象笔记
tags: Blog,Elegent
notebook: Elegent

超文本标记语言

超文本 : 文本内容 + 非文本内容
所谓HTML语义化指的是，根据网页中内容的结构，选择适合的HTML 标签进行编写。

好处：

1. 在没有CSS的情况下，页面也能呈现出很好的内容结构。
2. 有利于SEO，让搜索引擎爬虫更好的理解网页。
3. 方便其他设备解析（如屏幕阅读器、盲人阅读器等）。
4. 便于团队开发与维护

文本修饰标签

  <h></h>标题标签
  <p></p>段落标签

---

  <strong></strong>： 表示强调，会对文本进行加粗 

  <em></em>： 表示强调，会对文本进行斜体
  <i></i>
   
  <sub></sub>、<sup></sup>： 下标文本、上标文本

  <del></del>、<ins></ins>： 删除文本、插入文本

图片标签与图片属性

  <img>： 图片 (单标签)
  src ：图片位置
  alt ：图片加载失败时显示的文字
  title ：网页显示信息
  width 、height

引入文件的地址路径

  相对路径：
     . 在路径中表示当前路径
     ..在路径中表示上一级路径

  绝对路径：
     E:/
     http://

跳转链接

  标签  <a>
  href：链接地址

  target：可以改变链接打开的方式，默认情况下：在当前页面打开 _self  新窗口打开 _blank

  <base>标签：在head里面写入<base target="_blank">所有a标签都在新窗口打开

跳转锚点

  实现一
  #号
  id属性
  实现二
  #号
  name属性（注意name属性加给的是a标签）

特殊字符

  特殊字符    含义      特殊字符代码
  空格符                   &nbsp；
  ©          版权          ©
  ®         注册商标        &reg；
  <          小于号         &lt；
  >          大于号         &gt;
  &           和号         &amp；
  ¥          人民币        &yen;
  °          摄氏度        &deg；

无序列表

  <ul>、<li> ：列表的最外层容器、列表项
  注：ul和li必须是组合出现的，他们之间是不能有其他标签的

  type属性 : 改变前面标记的样式

有序列表

  ol>、<li> ：列表的最外层容器、列表项
  注：有序列表用的非常少，经常用的是无序列表，无序列表可以去代替有序列表。

 type属性 : 改变前面标记的样式

定义列表

     需要添加标题和对标题进行描述的内容
  <dl>：定义列表
  <dt>：定义专业术语或名词(标题)
  <dd>：对名词进行解释和描述(标题解释)

  列表之间可以互相嵌套形成多层级列表

表格标签

  <table>：表格的最外层容器 
  <tr> ：  定义表格行
  <th>：   定义表头
  <td>：   定义表格单元
  <caption>：定义表格标题 

表格属性

  border ： 表格边框
  cellpadding ： 单元格内的空间
  cellspacing ： 单元格之间的空间
  rowspan ： 合并行
  colspan ： 合并列
  align ： 左右对齐方式
  valign ：上下对齐方式 

语义化标签

  <tHead>、<tBody>、<tfoot> 
  在一个table中，tBody是可以出现多次的，但是tHead、tfoot只能出现一次。

表单标签

  <form> ： 表单的最外层容器
  <input>： 标签用于搜集用户信息，根据不同的type属性值，展示不同的控件，如输入框、密码框、复选框等
  <textarea> ： 多行文本框
  <select>、<option>：下拉菜单
  <label>：辅助表单

---

  type属性          含义
  text        普通的文本输入框
  password       密码输入框
  checkbox        复选框
  radio           单选框
  file            上传文件
  submit          提交按钮
  reset           重置按钮

块和内联

  div （块）：做区域划分的块
  div全称为division，“分割、分区”的意思，<div>标签用来划分一个区域，相当于一块区域容器，可以容纳段落、标题、表格、图像等各种网页元素。即HTML中大多数的标签都可以嵌套 在 <div>标签中，<div>中还可以嵌套多层&