BleShi

网页制作笔记
背景高三党的一个漫长的暑假,打算系统地学习一下基础的前端技术,所以就开了这个坑啦!希望能够在 11 天学会吧!完整...
扫描右侧二维码阅读全文
15
2019/06

网页制作笔记

背景

高三党的一个漫长的暑假,打算系统地学习一下基础的前端技术,所以就开了这个坑啦!

希望能够在 11 天学会吧!

完整历程与代码可参阅 GitHub

环境搭建

我们选择了微软的免费编辑器 Visual Studio Code

并安装了如下插件:

Pic1

具体功能为:

  • 显示简体中文;
  • JS代码错误自动检测;
  • CSS自动补全;[ Tab ]
  • 代码从浏览器直接打开;[ Alt+B ]

HTML部分笔记

HTML基本概念

元素/标签:<tag>内容</tag>

标签一般是成对出现的。

属性:<tag name="value"></tag>

在元素中添加的附加信息,在开始标签内出现,名称="值"

这里主要有 7 种标签:文本标签,图片标签,链接标签,列表标签,表格标签,框架(嵌套页面)标签。

语法:

  • 从上往下解析(不然还从右往左么)
  • 元素可以互相嵌套如:

Pic2

但如下写法不被允许:

PIC3

  • HTML的固定结构

Pic4

HTML基本结构

HTML声明:因为历史原因,我们存在多个HTML版本,因此,我们需要先写声明,让浏览器知道我们用的是这套规范。

 <!DOCTYPE html>

HTML注释:不会被浏览器执行,就是便于给程序员小哥哥阅读用哒!

 <!-- 我是可爱的蓝小柠 -->

根标签:所有的网页内容都必须要放在这里面

 <html lang="zh">    <!-- 同时声明了这是中文语言[英语是en] -->
 <meta charset="UTF-8">   <!-- 声明用UTF-8编码 -->
 </html>

头部:设置网页

 <head>

 </head>

主体:设置内容

 <body style="background-color:blue">  <!-- 还是蓝色的背景耶ヾ(≧∇≦*)ゝ 强烈吐槽不是Colour而是Color -->
    Hello World!   <!-- 按照惯例向世界问好|´・ω・)ノ -->
 </body>

HTML基本标签-文本

段落标签

 <p>段落1</p>
 <p>段落2</p>

标题标签

 <h1>标题1</h1>
 <h2>标题2</h2>
 <h3>标题3</h3>
 <h4>标题4</h4>
 <h5>标题5</h5>
 <h6>标题6</h6>

换行标签

 <br>

一个换行标签就是一行。空格用   即可。

文本格式化标签

 <strong>加粗字体</strong>
 <em>倾斜字体</em>
 <del>删除线标签</del>
 <span>挂载CSS属性标签</span>

HTML基本标签-图片

图片标签

 <img src="Demo.jpg" alt="Name" title="Text">

图像位置有绝对路径(从盘符开始)和相对路径(从当前文件夹开始 ../ 可回到上一级目录)以及网络图片三种形式

常用的图片格式:jpg(有损压缩),png(相对压缩较少,支持透明通道
),gif(动图)

HTML基本标签-A标签与超级链接

超级链接

 <a href="http://yourdomain.com">超级链接</a><!-- 直接打开超链接 -->
 <a href="http://yourdomain.com" target="_blank">超级链接</a><!-- 新页面打开超链接 -->

含超级链接的图片

 <a href="http://yourdomain.com" target="_blank">
     <img src="Demo.jpg" alt=" "><!-- 显示含超链接的图片 -->
 </a>

锚点标记

 <a href="#end">切换到最后一行的位置</a>
 <br>第1行
 <br id="mid2">第2行
 <br>第3行
 <br>第4行
 <br>第5行
 <br>第6行
 <br>第7行
 <br id="end">第8行
 <a href="#mid2">切换到第二行的位置</a>
 <a href="#">回到页面顶部</a>

HTML-列表

无序列表

 <!-- 无序列表无顺序关系 -->
 <ul style="list-style-type:circle">
    <li>无序列表1</li>
    <li>无序列表2</li>
    <li>无序列表3</li>
    <li>无序列表4</li>
    <li>无序列表5</li>
    <li>无序列表6</li>
 </ul>

有序列表

 <!-- 有序列表无顺序关系 -->
 <ol>
    <li>无序列表1</li>  
    <li>无序列表2</li>
    <li>无序列表3</li>
    <li>无序列表4</li>
    <li>无序列表5</li>
    <li>无序列表6</li>
 </ol>

自定义列表

 <dl>
    <dt>标题1</dt>
    <dl>内容1</dl>
    <dl>内容2</dl>
    <dl>内容3</dl>
    <dt>标题2</dt>
    <dl>内容1</dl>
    <dl>内容2</dl>
    <dl>内容3</dl>
 </dl>

HTML-表格

普通表格

        
 <table border="1">
    <tr>
       <!-- 现在是行 -->
       <th>名字</th>
       <th>性别</th>
       <th>年龄</th>
       <th>星座</th>
    </tr>
    <tr>
       <!-- 现在是列 -->
       <td>蓝小柠</td>
       <td>蓝</td>
       <td>18</td>
       <td>射手座</td>
    </tr>
    <tr>
       <!-- 现在是列 -->
       <td>橙小柠</td>
       <td>女</td>
       <td>14</td>
       <td>水平座</td>
    </tr>
    <tr>
       <!-- 现在是列 -->
       <td>紫小柠</td>
       <td>男</td>
       <td>16</td>
       <td>摩羯座</td>
    </tr>
 </table>

单元格横跨表格

 <!-- colspan是每一列合并,rowspan是每一行合并 -->
 <table border="1">
    <tr>
       <!-- 现在是行 -->
       <th>名字</th>
       <th>性别</th>
       <th>年龄</th>
       <th>星座</th>
       <th>是否可爱</th>                            
    </tr>
    <tr>
       <!-- 现在是列 -->
       <td>蓝小柠</td>
       <td>蓝</td>
       <td>18</td>
       <td>射手座</td>
       <td rowspan="3">可爱</td>
    </tr>
    <tr>
       <!-- 现在是列 -->
       <td>橙小柠</td>
       <td>女</td>
       <td>14</td>
       <td>水平座</td>
    </tr>
    <tr>
       <!-- 现在是列 -->
       <td>紫小柠</td>
       <td>男</td>
       <td>16</td>
       <td>摩羯座</td>
    </tr>
    <tr>
       <!-- 现在是列 -->
       <td colspan="2">平均年龄</td>
       <td>16</td>
    </tr>
 </table>

HTML-表单

表单

 <form action="page/action.html" method="POST">
 </form>

普通输入框

 用户名:<br>
 <input type="text" name="usr"><br>

密码输入框

 
 密码:<br>
 <input type="password" name="pwd"><br>

单选框

 性别:<br>
 <input type="radio" name="sex" value="male">男<br>
     <input type="radio" name="loli" value="loliyes">可爱
     <input type="radio" name="loli" value="lolino">不可爱<br>
 <input type="radio" name="sex" value="female">女<br>

复选框

 爱好:<br>
 <input type="checkbox" name="hobby" value="look">看蓝小柠玩<br>
 <input type="checkbox" name="hobby" value="company">陪蓝小柠玩<br>
 <input type="checkbox" name="hobby" value="with">和蓝小柠玩<br>

下拉框

 喜欢谁:<br>
 <select name="ble"><br>
 <option value="blue">蓝小柠</option><br>
 <option value="orange">橙小柠</option><br>
 <option value="purple">紫小柠</option><br>

提交按钮

 <input type="submit"><br>

HTMLDIV+CSS与ifame的区别

 <div style="background:yellow;">蓝小柠最可爱</div>
 <div style="background:greenyellow;">蓝小柠最可爱</div>
 <div style="background:blue;">蓝小柠最可爱</div>
最后修改:2019 年 08 月 14 日 11 : 08 AM
如果觉得我的文章对你有用,请随意赞赏

1 条评论

  1. 丘八

    写的很好,支持一下

发表评论 取消回复