3

Web前端-HTML篇

 1 year ago
source link: https://qwzf.github.io/2019/03/25/Web%E5%89%8D%E7%AB%AF-HTML%E7%AF%87/
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.

最近学习了Web前端的入门课程，深有感触，于是写了这篇学习笔记总结了一下，希望能加深自己的理解，而在此之前，为了写一个表单提交页面，学习了一些html的基础知识。在这些基础上学习Web前端，感觉学习轻松多了有么有？感觉真好！

一、前端介绍

  1. 前端包括：html、css、javascript
  2. 入门阶段：改一般页面和动效
  3. 前端历史：第一个网站→table表格→JavaScript→Flash→CSS→栅栏与框架→响应式→ H5(HTML5)

二、Web编程-环境搭建

1、网页浏览器：

  • 谷歌、火狐、IE、苹果Safari
  • F12打开控制台

2、代码编译器

  • vscode、sublime、atom、webstorm、dreamwarver
  • 设置Tab、插件

3、git代码管理

1.代码仓库

统一保存、管理代码的地方 如：github

2.git及简单操作

  • cd C: 进入到c盘

  • cd Users/Test 进入到当前盘的Users/Test文件夹

  • git init 创建代码仓库

  • git init 在一个文件目录执行该指令，会把该目录快速设置成git的代码仓库。

  • git clone 仓库地址 克隆仓库到本地

  • git config --global user,name "XX" 配置身份信息

  • git config --global user.email "[email protected]" 配置身份信息

  • git add xx.xml 后面可以加单独的文件

    git add app app是一个文件夹

    git add . 全部文件

    add这个只是添加，我们还需要提交

  • git commit -m "First commit" 双引号之中是相关的描述,提交(提交到本地缓存的仓库)更新文件

  • git push 提交到远程仓库

三、网页基本概念与基本结构

1、基本概念

  • 网页是构成网站的基本元素，是承载各种网站应用的平台

    是html文档经过浏览器渲染以后展示出来的页面 html文档：后缀为.html

  • 渲染：代码经过浏览器处理，产生人正常能看懂的页面

  • 编码：通过代码形式，把要展示的页面写到html文档

1.html+css页面内容
html：负责页面结构

文本内容：能被浏览器直接显示出来的文字和符号

标签：不能被浏览器直接显示出来的、具有特殊意义的，用尖括号括起来的字符

主要标签包括：文本、图片、链接、列表、表格、表单、框架(嵌套页面)

语法：

  1. html从上往下解析
  2. 元素可以互相嵌套
  3. html的结构
css负责页面样式
2.javascript页面行为

2、基本结构

<!DOCTYPE html>
<html lang="zh">    <!-- lang属性声明主要语言，属性值zh：中文，属性值en：英文 -->
<head>                <!-- 主要配置信息,设置 -->
<title>标题</title>
<meta charset="utf-8"/>    <!-- 属性值还有gbk和gb2312 -->
</head> 
<body>                 <!-- body标签可以写css属性 -->
<h1>我的第一个标题</h1>
<p>我的第一个段落</p>
</body>    
</html>
html xml复制代码
在这里插入图片描述
在这里插入图片描述

四、前端基础HTML

1.水平线

单纯水平线：<hr /> 类型：单标签

2.主题内容中的标题
    <h1></h1>        <!-- 一级标题 -->
    <h2></h2>        <!-- 二级标题 -->
    <h3></h3>        <!-- 三级标题 -->
    <h4></h4>        <!-- 四级标题 -->
    <h5></h5>        <!-- 五级标题 -->
    <h6></h6>        <!-- 六级标题 -->
html xml复制代码

类型：双标签

<p></p>类型：双标签

<br /> 类型：单标签

（1）&nbsp 不是标签，可以当做特殊字符。

（2）输入法用全角

    <img src="" alt="" width="" height="" />
html xml复制代码

属性src里填图片路径
图片路径分为：绝对路径和相对路径<!--相对路径：相对于当前html文件路径-->

./当前目录../上一级目录
在当前目录建一个文件夹：images 将所展示图片都放在里面

属性alt里填图片说明
属性width里填图片长度：也可以用百分比表示
属性height里填图片高度：也可以用百分比表示
类型：内联元素
实例

    <img src="1.jpg" alt="哈士奇" width="100" height="100"/>
html xml复制代码
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
    <a href="http://www.baidu.com/" title="鼠标悬停显示" target="_blank">百度一下</a>
html xml复制代码
在这里插入图片描述
在这里插入图片描述

属性href：需要连接的网址，网站建设初期用#链接表示空链接

属性title：鼠标悬停显示

属性target：设置_blank，在新窗口打开链接地址

类型：内联元素

4、图片映射

（1）为map标签加上id属性，定义一个唯一属性
（2）为保证兼容性加name属性，属性值与id值相同
（3）为map标签所作用图片img标签加usemap属性，属性名为#id名称
（4）在map标签内嵌套area标签实现给指定区域加链接

    <area shape="" coords="" href="" alt="" />
html xml复制代码
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
属性shape：定义链接区域形状，常用值rect（矩形）circle（圆形） poly(多边形)
属性coords：确定区域精确位置，填坐标<!--以左上角为原点-->
属性href：链接地址
属性alt：链接说明
1.有序列表
    <ol>
        <li></li>
        <li></li>
    </ol>
html xml复制代码

子元素，父元素，后代元素，兄弟元素

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
2.无序列表
<!-- 列表需要嵌套写法 -->
    <ul>
        <li></li>
        <li></li>
    </ul>
html xml复制代码
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
3.定义列表
    <dl>
        <dt></dt>
        <dd>

        </dd>    
    </dl>
html xml复制代码
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
    <table border="1" cellpadding="2" cellspacing="1">
        <tr>
            <th>姓名</th>
            <th>学号</th>
            <th>年龄</th>
            <th>成绩</th>
        </tr>
        <tr>
            <td>小王</td>
            <td>133</td>
            <td>19</td>
            <td>100</td>
        </tr>
    </table>
html xml复制代码
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

table标签
属性：border 作用：规定表格边框宽度
属性：cellpadding 作用：规定文字和边框的间距
属性：cellspacing 作用：规定每个单元格边框宽度
tr标签：html表格中的行
th标签：表格内表头单元格
td标签：表格内普通单元格
常用属性：
colspan：规定单元格可横跨列数，值为数字
rowspan：规定单元格可横跨行数，值为数字

1.标签<form>：定义供用户输入的html表单

属性：
action：规定提交表单向何处发送表单数据
name：表单命名
target：_blank在新窗口打开
method：提交方式，get或post值
类型：双标签

2.<input>标签:定义表单输入页面
<!-- 通过type属性展示不同输入页面，通过value改变默认值 -->
（1）普通文本框：
    <input type="text" />
html xml复制代码
（2）密码框：
    <input type="password" />
html xml复制代码
（3）文件上传：
    <input type="file" />
html xml复制代码
（4）隐藏的input：
    <input type="hidden" />
html xml复制代码
（5）普通按钮：
    <input type="button" />
html xml复制代码
（6）单选：
<input type="radio" />  <!--通过相同name属性实现单选-->
html xml复制代码
      <input type="radio" name="sex">男<input type="radio" name="sex">女
html xml复制代码
（7）复选框：
    <input type="checkbox" />
`
html xml复制代码
（8）提交：
    <input type="submit" />
html xml复制代码
（9）重置：
    <input type="reset" />
html xml复制代码

属性placeholder 可用值text：规定帮助用户填写输入字段提示
属性checked 可用值checked：用于选择页面（单复选），实现默认选择
属性disabled 可用值disabled：使标签不可用
属性name：给input输入界面起名字
属性readonly 可用值readonly ：使输入界面为只读状态
属性size 值为数字：设置输入框长度
属性value：该属性值为input提交到页面的数据，可通过该属性设置默认值

3.textarea标签：定义多行输入框
    <!--双标签，默认值写标签之间-->
html xml复制代码

属性cols 值为数字
属性rows 值为数字
也可使用disabled name readonly属性
实例

    自我介绍：<textarea cols="20" rows="10"></textarea>
html xml复制代码
4.label标签：提升用户体验

标签for属性与input的id属性相同

5.select标签：配合option实现下拉菜单

可用属性：disabled name multiple

    <select>
        <option></option>
    </select>
html xml复制代码
6.option标签

可用属性：disabled select value

7.optgroup标签
    <!--把相关选项组合在一起-->

属性label：给选项组命名
属性disabled：停用该选项组
实例

       <select>
            <optgroup label="河南省">
                <option value="周口">周口</option>
                <option>郑州</option>
                <option>洛阳</option>
            </optgroup>
        </select>
html xml复制代码
表单提交实例
    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="utf-8" />
            <title>html表单提交</title>
        </head> 
    <body> 
        <h1>账户登录</h1>
        <form name="submit" action="http://www.baidu.com/" target="_blank" method="get">
            <!-- 由于表单提交需要进行数据处理，html语言无法实现，暂且写成向百度提交数据 -->
            账号：<input name="text" type="text" size="20" />
            <br />
            密码：<input name="password" type="password" size="20" />
            <br />
            <input type="submit" value="确认登录" />
        </form>
    </body>    
    </html>
html xml复制代码
在这里插入图片描述
在这里插入图片描述

将小块排列好

1.div容器布局
<div style="background:blue; height:80px;">菜单</div>
<div style="background:yellow; width:50%;">导航</div>
<div style="background:red; width:50%;">关于</div>
html xml复制代码
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
2.table布局
3.iframe布局

作用：嵌套页面

百度一下：<iframe src="http://www.baidu.com" frameborder="0"></iframe>
html xml复制代码
4.frameset布局

作用：管理后台页面

<frameset rows="12%,88%">
    <frame src="frame1.html">
    <frameset cols="20%,80%">
        <frame src="frame2.html">
        <frame src="frame2.html">
    </frameset>
</frameset>
html xml复制代码
在这里插入图片描述
在这里插入图片描述

9、嵌套规则

块元素：独立成一行，可以设置宽高，默认宽高100%

  • 文字类块元素：<p> <h1>~<h6>
  • 容器类块元素：div table tr td th from ul li ol dl dt dd

行元素：不独立成一行，不可以 内容决定

  • a img input strong em del span

特殊字符：文字 br  

1.块元素可以嵌套行元素
<div><a href=""></a></div>
html xml复制代码
2.行元素可以嵌套行元素
<a href=""><strong> a</strong></a>
html xml复制代码
3.行元素不可以嵌套块元素
<a href=""> <div></div> </a>    <!--错误-->
html xml复制代码
4.文字类块元素不可以嵌套块元素
<p>这是一<p></p>句话</p>        <!--错误-->
html xml复制代码
5.容器类块元素可以嵌套块元素
<div><p></p></div>
html xml复制代码

以上便是我学习Web前端HTML部分的学习和练习记录，在总结练习过程中，我收益颇多。小白进阶ing，下一篇我将会把我学习Web前端CSS部分记录一下希望能再次丰富我对Web前端的理解和运用。

转载请注明来源，欢迎对文章中的引用来源进行考证，欢迎指出任何有错误或不够清晰的表达。可以在下面评论区评论，也可以邮件至 [email protected]

report

Recommend

About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK