HTML初学笔记（一）

南城不春
291 阅读5分钟

🎈🎈:「这是我的第一篇博客，一起参与掘金新人创作活动，开启写作之路。」

要想成为绝世强者，并非一朝一夕之事，除非天生是武学奇才，但这种人……万中无一。
---包租婆

前言😄

这是关于一个初入前端的小白的学习笔记，其中的部分见解也许有很多不到位的地方，在以后的前端学习之旅上还请见谅，提出建议，万分感谢！👂👂

✨介绍HTML✨

👀
1.HTML是网页的骨架，定义网页的含义和结构；
2.是一种超文本标记语言；
3.通过各种标签统一网络上的文档格式;
4.一个完整的html页面基本步骤：定义，骨架（全包），头（定义格式+标题），身体内容。

👋基础语法及标签👏

基本标签🎉

链接

  • HTML链接通过标签<a>定义
  • 示例👇
<a href="http://www.baidu.com">百度</a>

ps:视频和图片需上传相对或绝对路径

图像

  • 图像标签由<img>定义
  • 示例✌
<img src="/images/logo.png"/>

ps:此处使用的是相对路径，也可使用绝对路径

  • 效果如下✌

文本

  • 各种标签及效果如下💡💡

image.png

标签名称<b><strong><big><em><i><small><sub><sup>
作用加粗加粗（更推荐）放大斜体（更推荐）斜体缩小下标上标

缩略

  • 缩略标签由<abbr>或者<acronym>定义
  • 当把我们把鼠标移至缩略词语上时，title 可用于展示表达的完整版本。
  • 示例：
<abbr title="卑微的小唐">鼠标移动到这里</abbr>
<acronym title="努力奋进的打工人">鼠标移动到这里</acronym>
  • 效果如下👇 鼠标移动到这里

鼠标移动到这里

文字方向

  • 文字方向标签由<bao>标签控制
  • 示例：
<p>该段落文字从左到右显示。</p>
<p><bdo dir="rtl">该段落文字从右到左显示。</bdo></p>
  • 效果如下👇

该段落文字从左到右显示

该段落文字从右到左显示

块引用

  • 块引用标签由<q>控制
  • 示例：
<p>The charterer said:
<q>If you want to become a master,it will not happen overnight,
unless you are born with martial arts wizards,
but this kind of person……there is not one in million</q>
</p>
  • 效果如下👇

The charterer said: If you want to become a master,it will not happen overnight, unless you are born with martial arts wizards, but this kind of person……there is not one in million

ps:系统会自动加上引号（块引用）

表格标签🌞

表格标签很简单，行标签为<tr>，列标签为<td>,加粗标签为<th>,标题标签为<caption>,表格边框标签为<table border="">,还有合并单元格标签（跨行和跨列），横向合并为<td colspan="">,纵向合并为<td rowspan="">,下面我们就来演示一下🤗🤗

  • 一行三列
<table border="1">
<tr>
  <td>100</td>
  <td>200</td>
  <td>300</td>
</tr>
</table>
100 200 300
  • 两行三列（带加粗）
<table border="1">
<tr>
  <td>100</td>
  <td>200</td>
  <td>300</td>
</tr>
<tr>
  <td>400</td>
  <td>500</td>
  <td>600</td>
</tr>
</table>
100 200 300
400 500 600
  • 一列三行
<table border="1">
<tr>
    <td>100</td>
</tr>
<tr>
    <td>200</td>
</tr>
<tr>
    <td>300</td>
</tr>
</table>
100
200
300
  • 加标题
<table border="1">
<caption>这是标题</caption>
<tr>
  <td>100</td>
  <td>200</td>
  <td>300</td>
</tr>
</table>
这是标题
100 200 300
  • 合并单元格（带加粗）
<table border="1">
<tr>
  <th>姓名</th>
  <th colspan="2">电话号码</th>
</tr>
<tr>
  <td>张三</td>
  <td>12345</td>
  <td>56789</td>
</tr>
</table>

<table border="1">
<tr>
  <th>First Name:</th>
  <td>Bill Gates</td>
</tr>
<tr>
  <th rowspan="2">Telephone:</th>
  <td>12345</td>
</tr>
<tr>
  <td>56789</td>
</tr>
</table>
姓名 电话号码
张三 12345 56789
First Name: Bill Gates
Telephone: 12345
56789
  • 表格的嵌套
<table border="1">
<tr>
  <td>
   <p>这是一个段落</p>
   <p>这是另一个段落</p>
  </td>
  <td>这个单元格包含一个表格:
   <table border="1">
   <tr>
     <td>A</td>
     <td>B</td>
   </tr>
   <tr>
     <td>C</td>
     <td>D</td>
   </tr>
   </table>
  </td>
</tr>
<tr>
  <td>这个单元格包含一个列表
   <ul>
    <li>第一个列表</li>
    <li>第二个列表</li>
    <li>第三个列表</li>
   </ul>
  </td>
  <td>HELLO</td>
</tr>
</table>

这是一个段落

这是另一个段落

 这个单元格包含一个表格:
A B
C D
这个单元格包含一个列表
  • 第一个列表
  • 第二个列表
  • 第三个列表
 大家好
\

ps:可以参考一下以下源码社团报名表，效果如下社团报名表（无法显示的时候刷新试试）

选择器

  • 选择器分为基础选择器和复合选择器，其中以基础选择器中的类选择器使用最广泛，具体可参考如下。 基础选择器
基础选择器 作用 特点 使用情况 用法
标签选择器 可以选出所有相同的标签，比如,p 不能差异化选择 较多 p{color: red;}
类选择器 可以选出一个或多个标签 可以根据需求选择 非常多 .nav{color: red;}
id选择器 一次只能选择一个标签 ID属性只能在每个HTML文档中出现一次 一般和js搭配 #nav{color: red;}
通配符选择器 选择所有的标签 选择的太多，有部分不需要 特殊情况使用 *{color: red;}
  • 示例（这里用类选择器举例）

image.png

  • 效果

image.png

复合选择器

复合选择器作用特点使用情况用法
后代选择器用来选择后代元素可以是子孙后代较多.nav a
子代选择器选择最近一级元素只能选择亲儿子较少.nav>p
并集选择器选择某些相同样式的元素用于集体声明较多.nav,.header
链接伪类选择器选择不同状态的链接跟链接相关较多重点记住a{}和a:hover在实际开发中的写法
focus选择器选择获得光标的表单跟表单相关较少input:focus记住这是在表单中的

  • 示例（这里用链接伪类选择器举例，其他部分选择器用法大同小异）

image.png

  • 效果 鼠标移开的时候
    image.png 鼠标放上去的时候

5fbed6cd5a3c69f59f15d123752d1e4.jpg

好了掘友们今天就聊到这里，由于作者只是一个刚入门的前端小白，许多地方还存在不足，欢迎大家指正！拜拜啦！🤞🤞

avatar
文章
阅读
粉丝