HTML基础

DRF满天星辰

已于 2023-08-09 22:07:43 修改

阅读量41

点赞数 1

文章标签： html5 前端框架

于 2023-07-10 20:54:32 首次发布

本文链接：https://blog.csdn.net/m0_74797753/article/details/131628225

版权

1.HTML 结构 CSS外观装饰 JS动态

2.VScode常用快捷方式：

剪切行：ctrl+X 复制行：ctrl+C 粘贴：ctrl+V

删除行：ctrl+shift+K 注释：ctrl+/

快速复制一行：shift+alt+↓（↑）光标在被复制的那一行撤销上一步：ctrl+Z。

自定义快捷方式：管理,键盘快捷方式，找到快捷键，修改保存。

3.VScode 中！生成框架

英文：lang=“en”，中文：lang=“ch-CN” 万国码:UTF-8

<!DOCTYPE html>
<html lang="ch-CN">

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

4. HTML结构标签

<heml>
 <head>
  <title>第一个页面</title>
 </head>
 <body>
  你好
 </body>
</html>

5.标题标签

<h1>-<h6>字体依次减小用法：<h1>你好</h1>

分段<p>内容</p> 强制换行<br/> 加粗<strong>内容</strong>

倾斜<em> 内容 </em> 删除线<del>内容 </del> 下划线<ins>内容</ins>

大盒子：<div>内容</div>一行只能放一个小盒子：<span></span>一行可以放多个

6.css基础：

<!DOCTYPE html>
<html lang="ch-CN">

<head>
    <meta charset="UTF-8">
    <title>小米官网</title>
    <style type="text/css">
        #menu{        /*#号是用来选择id这个标签*/
                background-color:yellow;
                height:80px;
            }

        #side_bar{
                background-color:orange;
                height:500px;
                width:200px;
                float:left;
            }

        #content_box{
                background-color:greenyellow;
                height:800px;
                width:100%;
                float:left;
            }

        #footer{
                background-color:black;
                height:100px;
                clear:both;    /*不再按浮动排序*/
            }        

    </style>
</head>

<body>
    <div id="menu>
        <p>首页</p>
        <p>电视</p>
    </div>

    <div id="side_bar">
        <ul>
            <li>手机</li>
            <li>电视</li>
            <li>小家电</li>
        </ul>
    </div>

    <div id="content_box">
        <h2>大广告</h2>
    </div>

    <div id="footer">
        <h3>footer</h3>
    </div>

</body>
</html>

7.图片插入

<img src="2.jpg" title="这是一张图片" alt="图片出错" width="200" border="10">

<img src="图片名"/> 图片须和链接在同一个文件夹里

alt是替换文本，图像显示不出来用文字替换 title是提示文本，鼠标放在图片上出现的提示

width是设定图片宽度 height是设定图片高度一般只改一个另一个自动调整

border是设定边框粗细标签可累加，中间只需空一格

8.相对路径与绝对路径

相对路径：若图片与网页同一路径 <img src="图片名">

若图片位于网页下一路径 <img src="同一级文件夹名/图片名"/>

绝对路径:图片在电脑中的位置(只有自己电脑才能看见，别人看不见，很少使用)

图片存在于网络中，复制图片网址 <img src="地址"/>

9.超链接

<a href="跳转到的网址" target="窗口弹出方式">文本或者图像(链接以什么形式呈现)</a>

<a href="https://www.baidu.com/" target="-blank">百度一下</a>

target窗口弹出方式：-self为当前页面打开，-blank为新建一个窗口打开

图片链接 <a href ="跳转地址"><img src="图片名或者地址"/></a>

下载链接 <a href="img,zip(文件名)">下载文件</a>

锚点链接（跳转到页面某个位置) <h3 id="名字">个人生活</h3>

<a href="#名字">个人生活</a> 名字要求一致

10.符号

空格：  小于号：< 大于号：> 符合之间要有分号

11.表格格式

<table align="center" border="1" cellpadding="0" width="500">
 <tr>
  <td>单元格内文字</td>
  ...
 </tr>
 ...
</table>

<table></table>定义表格 <tr></tr>定义行 <td></td>定义行中的小格

<th>内容</th> 内容加粗居中显示(把td换成th）

<thead>表示表头部分 <tbody>表示主体部分

align="left"(或"center"，"right）表示对齐方式 border="1"表示是否拥有边框

cellpadding内容与边框的距离 cellspacing单元格间距离 width height表格的宽高

12.合并单元格

跨行rowspan 跨列colspan 合并方式=合并单元格数量：<td colspan="2">内容</td>

然后删除被合并的单元格

<table border="1" width="500"  hight="500" cellspacing="0">
<thead>
   <tr>
        <th colspan="2">1</th>
        <th>2 </th>
   </tr>
</thead>
<tbody>
   <tr>
        <td rowspan="2">1</td>
        <td>2</td>
        <td>3 </td>
   </tr>
   <tr>
        <td>2 </td>
        <td>3</td>
   </tr>
</tbody>

13.列表

无序列表

<ul>                                                                                                   
 <li>篮球</li>                                                                                                 
 <li>羽毛球</li>                                                                                                  
 <li>乒乓球</li>                                                                                                                                                                                                    </ul>

有序列表 <ul></ul>替换为<ol></ol>

自定义列表

<dl>
 <dt>名词1</dt>
 <dd>名词1解释1</dd>
 <dd>名词1解释2</dd>
</dl>

DRF满天星辰

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
1
评论
HTML基础

1.HTML 结构 CSS外观装饰 JS动态　　2.VScode常用快捷方式：　　3.VScode 中！生成框架　　4. HTML结构标签　　5.标题标签　　6.css基础：　　7.图片插入　　8.相对路径与绝对路径　　9.超链接　　10.符号　　11.表格格式　　12.合并单元格　　13.列表
复制链接

扫一扫