前端 | 青训营笔记

懒洋洋学前端
86 阅读3分钟

这是我参与「第四届青训营 」笔记创作活动的的第1天，今天讲述的内容是前端与HTML。

什么是html？

  • HTML是用于制作网页的计算机语言

  • 网页：用于显示网络资源的载体。网络资源可以是图片、视频、文字、音频、各种框、超链接

  • HTML：hyper-text Markup language：超文本标记语言

    • 超文本：指网页上展示的内容，不仅仅是文本。超文本包含了图片、视频、文字、音频、各种框、超链接。

    • .html文件

      • 每一个页面本质上一个以.html为后缀的文件

一个标准HTML页面的结构

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
</body>
</html>

HTML基础标签

a标签:负责超链接

<a href="跳转的页面地址">文本内容</a>
  • href则指定了当用户点击文本时要跳转到哪个页面

img标签：负责图片

<img src="图片地址" width="200" height="300"/>
  • src属性：负责要展示的图片地址
  • width：设置图片的宽度
  • height:设置图片的高度
  • 建议width和height只设置其中一个，另一个会按照图片比例自动调整

标题标签: <h1>到<h6>

<h1>h1文本内容</h1>
<h2>h2文本内容</h2>
<h3>h3文本内容</h3>
<h4>h4文本内容</h4>
<h5>h5文本内容</h5>
<h6>h6文本内容</h6>
  • 数字越大，字体反而越小

p标签：段落标签

<p>
    段落内容
</p>
  • 每个p标签都是独占一行
  • 不带首行缩进

br换行标签

<br>
  • 一个br换一行

特殊符号-空格: &nbsp;

&nbsp;
  • 一个&nbsp;表示一个空格

span

  • span是一个行内元素，本身不具备任何默认样式。
  • 作用：主要是为了配合css能够对不同的行内元素设置样式

HTML表格

基础标签

  • <table></table>:表示一个表格，表格里的行和列需要使用tr和td来表示，tr和td是写在<table>中

    • border:指的表格的边框，默认是0，以数字为单位

    • width:设置整个表格的宽度，以数字为单位

    • height:设置整个表格的宽度，以数字为单位

    • align:设置整个表格相对于页面的水平对齐方式

      <table borderl="1" width="200" height="300" align="right">
    
</table>

  • <tr></tr>：一个tr表示表格中的 一行，自身不包含单元格，单元格需要td来表示

    • align:设置该行内容 的对齐方式，可以去left、right、center.默认是left

      <th align="center"></th>

  • <td></td>:一个td表示一个单元格，td需写在tr里面

    • width:设置单元格的宽度,以数字为单位

    • height:设置单元格的高度,以数字为单位

    • align:设置该单元格内容的对齐方式

      <td align="left" width="100" height="200"></td>

  • <th></th>：表示表格标题行中的一个单元格

    • td和th的区别：th里文字会自动加粗

表格扩展

  • 合并单元格

    • colspan:针对同一行的单元格的合并：跨列合并,是td，th专属属性，

      <td colspan="3"></td>
      • 跨列合并3个单元格

    • rowspan:针对同一列不同行的单元格的合并：跨行合并,是td，th专属属性，

      <td rowspan="3"></td>

  • 控制单元格的间距

    • cellspacing:<table>标签专属，用于控制单元格之间的距离，以数字为单位

    • cellpadding:<table>标签专属，单元格内容跟单元格边框之间的距离，以数字为单位

    <table cellspacing="2" cellpadding="10">
    
</table>
avatar
文章
阅读
粉丝