跳转到帖子

  • 游客您好，欢迎来到黑客世界论坛！您可以在这里进行注册。

    赤队小组-代号1949（原CHT攻防小组）在这个瞬息万变的网络时代，我们保持初心，创造最好的社区来共同交流网络技术。您可以在论坛获取黑客攻防技巧与知识，您也可以加入我们的Telegram交流群 共同实时探讨交流。论坛禁止各种广告，请注册用户查看我们的使用与隐私策略，谢谢您的配合。小组成员可以获取论坛隐藏内容！

    TheHackerWorld官方

前端HTML5基础

 分享
NedK7

由 NedK7，
在 Html5

推荐的帖子

NedK7 Community Regular

NedK7

发布于
发布于

 

准备阶段：

前端软件：visual studio code
笔记软件：Typora
安装插件：

 ?i=20210802181630149.png

前端的框架代码

<html>        

<head>

    <title>标题</title>

</head>

<body>

    主要内容

</body>

</html>

说明：

<html></html>可以比喻成一个人

<head></head>是人的头部

<title><title>是人的眼睛，里面主要写页面的头部标题，如下图所示位置

?i=20210802182357149.png

 <body></body>是人的身体，人最重要的部位，html5的主要代码就是写在这里面，也是页面上显示的内容。

 

一般代码格式都是：<代码>书写内容</代码>

标签：

标题标签

<h1>一级标题标签</h1>

<h2>二级标题标签</h2>

效果图：

?i=20210802183004116.png

 

介绍常用标签(普通标签)

<p>今天天气怎么样？</p>

?i=20210802183127235.png

 

文本加粗标签

<b>今天天气怎么样？</b>

 ?i=20210802183148391.png

 

强调文字标签(加粗)

<strong>今天天气怎么样？</strong>

?i=20210802183939804.png

 

 斜体标签

<i>今天天气怎么样？</i>

?i=20210802183216611.png

 

一般强调标签(斜体)

<em>今天天气怎么样？</em>

?i=2021080218325164.png

 

下划线标签

<u>今天天气怎么样？</u>

?i=202108021838266.png

 

超链接标签

<a href="跳转的页面名称">超链接</a>

href后面的引号中可以放：

1、网址，比如百度连接

        <a href="http://www.baidu.com">百度</a>

2、自己制作的页面名称

        <a href="HelloWorld.html">跳转</a>

3、某个标签的id名称(锚点的使用，点击可以直接跳转锚点内容所在的位置)

        <a href="demo">跳转锚点</a>

?i=20210802183312205.png


换行标签

</br>


特殊符号：

空格：&ensp;(空半格)    &ensp;(空一格)    &nbsp;(不断行空格)    
&lt;(小于号)        &gt;(大于号)        
&amp;(符号&)
&quot;(引号)        
&reg;(已注册)        
&copy;(版权)
&trade;(版权)

?i=20210802195143818.png?,type_ZmFuZ3poZ

 

图片

<img src="图片存放路径" />
移动图片位置：
1、style="margin: 15px 20px 25px 30px;"四个数字分别代表上下左右的距离
 <img src="图片存放路径" style="margin: 15px 20px 25px 30px;"/>
2、style="padding: 15px 20px 25px 30px;"
3、style=" position:absolute;  top:200px;  left: 900px;"

?i=20210802192902691.png?,type_ZmFuZ3poZ

 
音频标签

 controls:控制按钮  loop:循环播放  autoplay:自动播放 src后面的引号里是音乐存放的地址路径
 <audio src="music/aa.mp3" controls loop autoplay alt="">

?i=20210802192131847.png

 

视频标签

<video src="视频存放路径" controls height="400px" width="400px"></video>
height：高度。width：宽度。

 排版类型标签：

1、ol有序列表

type:规定列表的项目符号的类型： A  a  1  I
<ol type="I">
    <li>111</li>
    <li>2222</li>
    <li>333</li>
</ol>

?i=202108021923122.png
 2、ul无序列表

 list-style:none:去掉圆点  circle圆圈  disc实心圆  square正方形
<ul style="list-style:none">
    <li type="circle">111</li>
    <li type="disc">222</li>
    <li type="square">333</li>
</ul>

?i=2021080219232675.png

 

 表格

1、格式

<table> 
        <thead>  
            <tr> 
                <th>内容</th>        
            </tr>
        </thead>
        <tbody>    
            <tr>
                <td>内容</td>
            </tr>
        </tbody>
</table>


table：表格标签
thead：表头单元格（头，可不要）
th：表头中的单元格
tbody：表格的主体（身体，主要部分）
tr：表格中的行（纵行）
td：标准单元格（横行）

主要格式(其余可要可不要)

<table> 
      <tr>
           <td>内容</td>
      </tr>
</table>

2、举例

两行三列的表格

<table> 
      <tr>  第一行
           <td>1</td>  第一列
           <td>2</td>  第二列
           <td>3</td>  第三列
      </tr>
      <tr>  第二行
           <td>4</td>  第一列
           <td>5</td>  第二列
           <td>6</td>  第三列
      </tr>
</table>

?i=20210802190208643.png

 

3、表格中简单属性

align：水平位置
valign：垂直位置(top、middle、bottom)
colspan：横向合并单元格 
rowspan：纵向合并单元格
cellpadding：单元格之间的距离
cellspacing：单元格边框与内容之间的距离
border：设置边框(boeder="")
border-top：设置上边框
dashed：虚线
bycolor：背景颜色
background：背景图片(background="img/bb.jpg")

 

<table cellpadding="5px" cellspacing="5px"> 
        <thead>  
            <tr> 
                <th>111</th>        
                <th>222</th>
                <th>333</th>
            </tr>
        </thead>
        <tbody>    
            <tr>   
                <td colspan="2">444</td>   
                <td rowspan="2">666</td>
            </tr>
            <tr>
                <td>777</td>
                <td>888</td>
            </tr>
        </tbody>
</table>

?i=20210802185346728.png?,type_ZmFuZ3poZ

 

练习题：

用代码画出下图样式的表格

?i=20210802191941236.png?,type_ZmFuZ3poZ

 表单

type可以改变表单的样式

文本框

<input type="text"  value="aaaa" />  

value：初始显示内容
效果图：

?i=20210730172126626.png


 密码框(输入的内容会被加密)

<input type="password"/> 

?i=20210730172202696.png


数字框(只能输入数字)

<input type="number"/>

?i=20210730172258343.png最右边的小三角可以调数字的大小


日历框(根据你电脑上的日期显示日历)

<input type="datetime-local"/> 

?i=20210730172433239.png?,type_ZmFuZ3poZ


颜色框

<input type="color"/>

?i=20210730172538257.png


单选框

<input type="radio"  checked />男
<input type="radio"  />女

checked：初始就勾选上

?i=20210730172556732.png


复选框

选择
<input type="checkbox"  checked/>苹果
<input type="checkbox" />香蕉
<input type="checkbox" />西瓜
<input type="checkbox" />桃子

?i=20210730172629610.png


滑块(可滑动)

<input type="range" />

?i=20210730172704386.png


选择框

<select>
       <option">城市</option>
       <option>武汉</option>
       <option>成都</option>
       <option>重庆</option>
</select>   

        ?i=20210730172734598.png


搜素框

<input type="search"/>

?i=20210730173234463.png

 


文本框(带滑轮)

 <textarea name="" id="" cols="30" rows="10"></textarea>

?i=20210730172958922.png


文件框

<input type="file" name="image" id=""/>      

?i=20210730173013146.png


既要数据可以绑定 同时这个框不被人看到

<input type="hidden" /> 


按钮(无功能，点击无效)

value：显示文字  disabled：禁用按钮
<input type="button" value="添加" disabled>
<button type="button">删除</button>

?i=20210730173054902.png


按钮(有功能)

<input type="submit" value="跳转"/>

重置按钮

<input type="reset" value="重置"/>

 ?i=20210730173108314.png

 

 

    <fieldset>

        <legend>个人资料</legend>

        <!-- 搜素框 -->

        <input type="search">

    </fieldset>

?i=20210730173207110.png

 

页面框架

可以把两个页面放在同一个页面中

<iframe src="demo02.html" frameborder="0" style="width: 500px;height: 500px;"></iframe>

<iframe src="demo03.html" frameborder="0" style="width: 500px;height: 500px;"></iframe>

 

常用快捷键

ctrl+S   保存

ctrl+C  复制

ctrl+V  粘贴

ctrl+X  剪切

ctrl+A  全选

ctrl+Z  后撤

Alt+B  运行

 

最后注意事项

保持良好的习惯：

1、html5中的代码大部分都是成对出现的，在写代码的时候最好成对的写出，以防漏写。

        比如<a></a>，以<a>开头，必须以</a>结尾，两者缺一不可。

2、在书写代码的时候最好注意代码排版，确保代码的整洁，以防排版不好容易混乱。

3、代码写完后必须保存才能不会丢失，保存快捷键ctrl+S，最好写一行代码就保存一次，以防电脑突然关机，以至于代码没有保存而白忙活了好久。

链接帖子
意见的链接
分享到其他网站
 分享
转到主题列表

黑客攻防讨论组

黑客攻防讨论组

  
    You don't have permission to chat.

    • 最近浏览   0位会员

      • 没有会员查看此页面。

    黑客世界站内导航 (SITE MAP)

    ×
    ×
    • 创建新的...