Jump to content
  • Hello visitors, welcome to the Hacker World Forum!

    Red Team 1949  (formerly CHT Attack and Defense Team) In this rapidly changing Internet era, we maintain our original intention and create the best community to jointly exchange network technologies. You can obtain hacker attack and defense skills and knowledge in the forum, or you can join our Telegram communication group to discuss and communicate in real time. All kinds of advertisements are prohibited in the forum. Please register as a registered user to check our usage and privacy policy. Thank you for your cooperation.

    TheHackerWorld Official

前端HTML5基础

 Share


NedK7

Recommended Posts

 

准备阶段:

前端软件: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,最好写一行代码就保存一次,以防电脑突然关机,以至于代码没有保存而白忙活了好久。

Link to post
Link to comment
Share on other sites

 Share

discussion group

discussion group

    You don't have permission to chat.
    • Recently Browsing   0 members

      • No registered users viewing this page.
    ×
    ×
    • Create New...