自学前端Day1(常见标签、路径、表格)

最新推荐文章于 2021-03-19 22:13:39 发布

路漫漫`

最新推荐文章于 2021-03-19 22:13:39 发布

阅读量221

点赞数

分类专栏： Web 文章标签： html html5

本文链接：https://blog.csdn.net/qq_39579087/article/details/107176720

版权

Web 专栏收录该内容

23 篇文章 0 订阅

订阅专栏

HTML 笔记

Day1

2020.7.6

插件

open in browser
auto rename tag 同步更改成对标签

DOCTYPE、lang、charset、html/css/js

<!DOCTYPE html>

文档类型声明标签(不是html标签)，告诉浏览器当前html页面使用的是哪个html版本(这句是版本5)，要处于html标签前。
Web标准

lang

用于指定当前文档显示的语言

en为英文
zh-CN为中文

meta charset=“UTF-8”

用于指定字符集

html/css/js

简单理解

常用标签

名称	含义
<h1> - <h6>	标题标签，标题后不能写其他内容(写了会换行)
<p>	段落标签，段落间有间隔
<br />(单标签)	换行标签，不会和上一行有间隔
<strong> or <b>	加粗
<em> or <i>	倾斜
<del> or <s>	添加一条删除线
<ins> or <u>	下划线
<div>	没有具体语义，是一个盒子，单独占一行(大盒子)
<span>	同上，但可以在一行显示(小盒子)
<img src=“url” />(单标签)	图像
<a>	超链接
<!-- xxx -->	注释

img标签更详细的属性如下：

属性间用空格隔开

a标签更详细的属性如下：

a标签

外部链接要写http://
内部链接直接写文件名就行，但要注意路径
空链接，若暂时不知道跳转哪里，可用#号
下载链接，url是文件
网页元素(图片、文本、音频等)都可以添加超链接
- <a href=“https://www.baidu.com”> <img src="./img标签1.png" alt=""> </a>
锚点链接，可以快速定位到某个位置。分两步：
- 在a标签href中写"#xxx"，xxx是自己起的名字
- 到目标位置标签，在里面添加一个id属性，如<h3 id=“xxx”>…</h3>

特殊字符

表格

表格标签

表格标签
一对tr标签表示一行，里面的每对td都是一个格子，每个格子里都可以放若干数据

<table>
        <tr> <td>年龄</td> <td>性别</td> </tr>
        <tr> <td>23</td>  <td>男</td> </tr>
        <tr> <td>19</td>  <td>女</td> </tr>
    </table>

表头单元格

表头单元格
th 突出表格第一行的重要性，里面的文字会加粗居中显示

表格属性

后面用CSS写，这里简单了解一下

表格结构标签

thead和th不一样，th是指表头中一个个单元格，而thead是指表头区域。

<thead>
    <tr> 
        <th>年龄</th> 
        <th>性别</th>
    </tr>
</thead>
<tbody>
    <tr> 
        <td></td> 
        <td></td>
        <td></td>
    </tr>
    <tr> 
        <td></td> 
        <td></td>
        <td></td>
    </tr>
    <tr> 
        <td></td> 
        <td></td>
        <td></td>
    </tr>
</tbody>

合并单元格

比如想合并如下单元格，第一行二三列合并，那么就要在第一行第二列td标签里改代码，并将第三个格子的td标签删去：
在这里插入图片描述

<tbody>
    <tr> 
        <td></td> 
        <td colspan="2"></td>
        <!-- <td></td> -->
    </tr>
    <tr> 
        <td></td> 
        <td></td>
        <td></td>
    </tr>
    <tr> 
        <td></td> 
        <td></td>
        <td></td>
    </tr>
</tbody>

同理，如果向合并第二行第三行第一列的单元格，那么就要在第二行第第一列那个格子中改代码，并将第三行第一列td删去：

<tbody>
    <tr> 
        <td></td> 
        <td></td>
        <td></td>
    </tr>
    <tr> 
        <td rowspan="2"></td> 
        <td></td>
        <td></td>
    </tr>
    <tr> 
        <!-- <td></td>  -->
        <td></td>
        <td></td>
    </tr>
</tbody>