前端学习day01

最新推荐文章于 2024-07-11 12:52:11 发布

qq_37623020

最新推荐文章于 2024-07-11 12:52:11 发布

阅读量54

点赞数 1

文章标签：前端学习 html5

本文链接：https://blog.csdn.net/qq_37623020/article/details/130150470

版权

html(H5) git地址：前端学习: 前端学习

基本结构标签

<html></html>根标签

<head></head>文档的头部

<title></title>文档的标题,给页面设置标题

<body></body>放页面内容

<!DOCTYPE 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>

ps: VSCode编辑使用快捷键ctrl+n 新建文件

使用快捷键!快速构建html基本骨架

常用标签

标题标签（分为6级，1级最大）

    <h1>一级标题</h1>
    <h2>二级标题</h2>
    <h3>三级标题</h3>
    <h4>四级标题</h4>
    <h5>五级标题</h5>
    <h6>六级标题</h6>

段落标签

<body>
    <p>1. web端布局：先讲解HTML5常用标签，<br />接着讲解CSS3常见样式增加的H5C3新特性，新语法，最后讲解PC端品优购项目。以及CSS3动画 2d 3d效果</p>
    <p>2. 移动端布局：主要讲解视口、二倍图、流失布局，flex布局，rem布局，响应式布局，还会增加摹客使用等工具。</p>
</body>

<br/>单标签，强制换行

文档格式化标签

    <strong>加粗标签</strong>
    <em>倾斜标签</em>
    <del>删除线</del>
    <ins>下划线</ins>

<div></div>和<span></span>标签,无语义，用来存放内容

<div>独占一行

<span>一行可以写多个

<img src=" "/>图片标签

<img src="路径地址" alt="图片显示不出来时，用来显示的文字" title="鼠标在图片悬停，会出现的提示文字" width="500" height="500" boder="15"/> boder表示边框。

超链接标签

<a href="http://www.baidu.com" target="_blank">超链接打开新窗口</a>

<a href="http://www.baidu.com" target="_self">超链接替换窗口</a>

<a href="#" target="_top">#代表空链接, _top代表返回顶部</a>

<a href="http://www.baidu.com"><img src="xxx"/></a>元素链接

<a href="#id">锚点链接：点一下快速定位到页面的某个位置</a>

< < 小于号

> > 大于号

  空格

表格标签

<!DOCTYPE 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>
    <table>
        <tr>
            <!-- 表头单元格，用于表格第一行，突出重要性，单元格里的文字会加粗居中显示 -->
            <th>姓名</th>
            <th>性别</th>
            <th>年龄</th>
        </tr>
        <tr>
            <td>dd</td>
            <td>男</td>
            <td>18</td>
        </tr>
    </table>
</body>

</html>

<thead>标签表格的头部区域 <tbody>标签表格的主体区域

<!DOCTYPE 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>
    <table align="center" width="500" height="249" border="1" cellspacing="0">
        <thead>
            <tr>
                <th>排行</th>
                <th>关键词</th>
                <th>趋势</th>
                <th>今日搜索</th>
                <th>最近七日</th>
                <th>相关链接</th>
            </tr>
        </thead>
        <tbody>
        <tr>
            <td>1</td>
            <td>鬼吹灯</td>
            <td><img src="images/down.jpg"></td>
            <td>345</td>
            <td>123</td>
            <td><a href="#"><ins>贴吧</ins></a>&nbsp;<a href="#"><ins>图片</ins></a>&nbsp;<a href="#"><ins>百科</ins></a>
            </td>
        </tr>
        <tr>
            <td>1</td>
            <td>鬼吹灯</td>
            <td><img src="images/down.jpg"></td>
            <td>345</td>
            <td>123</td>
            <td><a href="#"><ins>贴吧</ins></a>&nbsp;<a href="#"><ins>图片</ins></a>&nbsp;<a href="#"><ins>百科</ins></a>
            </td>
        </tr>
        <tr>
            <td>1</td>
            <td>鬼吹灯</td>
            <td><img src="images/up.jpg"></td>
            <td>345</td>
            <td>123</td>
            <td><a href="#"><ins>贴吧</ins></a>&nbsp;<a href="#"><ins>图片</ins></a>&nbsp;<a href="#"><ins>百科</ins></a>
            </td>
        </tr>
        <tr>
            <td>1</td>
            <td>鬼吹灯</td>
            <td><img src="images/up.jpg"></td>
            <td>345</td>
            <td>123</td>
            <td><a href="#"><ins>贴吧</ins></a>&nbsp;<a href="#"><ins>图片</ins></a>&nbsp;<a href="#"><ins>百科</ins></a>
            </td>
        </tr>
        <tr>
            <td>1</td>
            <td>鬼吹灯</td>
            <td><img src="images/up.jpg"></td>
            <td>345</td>
            <td>123</td>
            <td><a href="#"><ins>贴吧</ins></a>&nbsp;<a href="#"><ins>图片</ins></a>&nbsp;<a href="#"><ins>百科</ins></a>
            </td>
        </tr>
        <tr>
            <td>1</td>
            <td>鬼吹灯</td>
            <td><img src="images/up.jpg"></td>
            <td>345</td>
            <td>123</td>
            <td><a href="#"><ins>贴吧</ins></a>&nbsp;<a href="#"><ins>图片</ins></a>&nbsp;<a href="#"><ins>百科</ins></a>
            </td>
        </tr>
        </tbody>
</body>

</html>

合并单元格

跨行合并rowspan

跨列合并colspan

<!DOCTYPE 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>
    <table width=" 500" height="249" border="1" cellspacing="0">
<tr>
	<td></td>
	<td colspan="2"></td>
</tr>
<tr>
	<td rowspan="2"></td>
	<td></td>
	<td></td>
</tr>
<tr>
	<td></td>
	<td></td>
</tr>
    </table>
</body>

</html>