Web前端-HTML篇
Web前端-HTML篇
最近学习了Web前端的入门课程，深有感触，于是写了这篇学习笔记总结了一下，希望能加深自己的理解，而在此之前，为了写一个表单提交页面，学习了一些html的基础知识。在这些基础上学习Web前端，感觉学习轻松多了有么有？感觉真好！
一、前端介绍
- 前端包括：html、css、javascript
- 入门阶段：改一般页面和动效
- 前端历史：第一个网站→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 appapp是一个文件夹git add .全部文件add这个只是添加，我们还需要提交
-
git commit -m "First commit"双引号之中是相关的描述,提交(提交到本地缓存的仓库)更新文件 -
git push提交到远程仓库
三、网页基本概念与基本结构
1、基本概念
-
网页是构成网站的基本元素，是承载各种网站应用的平台
是html文档经过浏览器渲染以后展示出来的页面 html文档：后缀为
.html -
渲染：代码经过浏览器处理，产生人正常能看懂的页面
-
编码：通过代码形式，把要展示的页面写到html文档
1.html+css页面内容
html：负责页面结构
文本内容：能被浏览器直接显示出来的文字和符号
标签：不能被浏览器直接显示出来的、具有特殊意义的，用尖括号括起来的字符
主要标签包括：文本、图片、链接、列表、表格、表单、框架(嵌套页面)
语法：
- html从上往下解析
- 元素可以互相嵌套
- html的结构
css负责页面样式
2.javascript页面行为
2、基本结构
<html lang="zh">
<head>
<title>标题title>
<meta charset="utf-8"/>
head>
<body>
<h1>我的第一个标题h1>
<p>我的第一个段落p>
body>
html>
四、前端基础HTML
1、文本
1.水平线
单纯水平线：
2.主题内容中的标题
<h1>h1>
<h2>h2>
<h3>h3>
<h4>h4>
<h5>h5>
<h6>h6>
类型：双标签
3.段落
类型：双标签
4.换行
5.空格
（1） 不是标签，可以当做特殊字符。
（2）输入法用全角
2、图片
<img src="" alt="" width="" height="" />
属性src里填图片路径
图片路径分为：绝对路径和相对路径
./当前目录…/上一级目录
在当前目录建一个文件夹：images 将所展示图片都放在里面
属性alt里填图片说明
属性width里填图片长度：也可以用百分比表示
属性height里填图片高度：也可以用百分比表示
类型：内联元素
实例
<img src="1.jpg" alt="哈士奇" width="100" height="100"/>
3、链接
<a href="https://www.baidu.com/" title="鼠标悬停显示" target="_blank">百度一下a>
属性href：需要连接的网址，网站建设初期用#链接表示空链接
属性title：鼠标悬停显示
属性target：设置_blank，在新窗口打开链接地址
类型：内联元素
4、图片映射
（1）为map标签加上id属性，定义一个唯一属性
（2）为保证兼容性加name属性，属性值与id值相同
（3）为map标签所作用图片img标签加usemap属性，属性名为#id名称
（4）在map标签内嵌套area标签实现给指定区域加链接
<area shape="" coords="" href="" alt="" />
属性shape：定义链接区域形状，常用值rect（矩形）circle（圆形） poly(多边形)
属性coords：确定区域精确位置，填坐标
属性href：链接地址
属性alt：链接说明
5、列表
1.有序列表
<ol>
<li>li>
<li>li>
ol>
子元素，父元素，后代元素，兄弟元素
2.无序列表
<ul>
<li>li>
<li>li>
ul>
3.定义列表
<dl>
<dt>dt>
<dd>
dd>
dl>
6、表格
实例
<table border="1" cellpadding="2" cellspacing="1">
<tr>
<th>姓名th>
<th>学号th>
<th>年龄th>
<th>成绩th>
tr>
<tr>
<td>小王td>
<td>133td>
<td>19td>
<td>100td>
tr>
table>
table标签
属性：border 作用：规定表格边框宽度
属性：cellpadding 作用：规定文字和边框的间距
属性：cellspacing 作用：规定每个单元格边框宽度
tr标签：html表格中的行
th标签：表格内表头单元格
td标签：表格内普通单元格
常用属性：
colspan：规定单元格可横跨列数，值为数字
rowspan：规定单元格可横跨行数，值为数字
7、表单
1.标签
属性：
action：规定提交表单向何处发送表单数据
name：表单命名
target：_blank在新窗口打开
method：提交方式，get或post值
类型：双标签
2.
（1）普通文本框：
<input type="text" />
（2）密码框：
<input type="password" />
（3）文件上传：
<input type="file" />
（4）隐藏的input：
<input type="hidden" />
（5）普通按钮：
<input type="button" />
（6）单选：
<input type="radio" />
实例
<input type="radio" name="sex">男<input type="radio" name="sex">女
（7）复选框：
<input type="checkbox" />
`
（8）提交：
<input type="submit" />
（9）重置：
<input type="reset" />
属性placeholder 可用值text：规定帮助用户填写输入字段提示
属性checked 可用值checked：用于选择页面（单复选），实现默认选择
属性disabled 可用值disabled：使标签不可用
属性name：给input输入界面起名字
属性readonly 可用值readonly ：使输入界面为只读状态
属性size 值为数字：设置输入框长度
属性value：该属性值为input提交到页面的数据，可通过该属性设置默认值
3.textarea标签：定义多行输入框
属性cols 值为数字
属性rows 值为数字
也可使用disabled name readonly属性
实例
自我介绍：<textarea cols="20" rows="10">textarea>
4.label标签：提升用户体验
标签for属性与input的id属性相同
5.select标签：配合option实现下拉菜单
可用属性：disabled name multiple
<select>
<option>option>
select>
6.option标签
可用属性：disabled select value
7.optgroup标签
属性label：给选项组命名
属性disabled：停用该选项组
实例
<select>
<optgroup label="河南省">
<option value="周口">周口option>
<option>郑州option>
<option>洛阳option>
optgroup>
select>
表单提交实例
<html>
<head>
<meta charset="utf-8" />
<title>html表单提交title>
head>
<body>
<h1>账户登录h1>
<form name="submit" action="https://www.baidu.com/" target="_blank" method="get">
账号：<input name="text" type="text" size="20" />
<br />
密码：<input name="password" type="password" size="20" />
<br />
<input type="submit" value="确认登录" />
form>
body>
html>
8、布局
将小块排列好
1.div容器布局
<div style="background:blue; height:80px;">菜单div>
<div style="background:yellow; width:50%;">导航div>
<div style="background:red; width:50%;">关于div>
2.table布局
3.iframe布局
作用：嵌套页面
百度一下：<iframe src="http://www.baidu.com" frameborder="0">iframe>
4.frameset布局
作用：管理后台页面
<frameset rows="12%,88%">
<frame src="frame1.html">
<frameset cols="20%,80%">
<frame src="frame2.html">
<frame src="frame2.html">
frameset>
frameset>
9、嵌套规则
块元素：独立成一行，可以设置宽高，默认宽高100%
- 文字类块元素：
~
- 容器类块元素：
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>
2.行元素可以嵌套行元素
<a href=""><strong> astrong>a>
3.行元素不可以嵌套块元素
<a href=""> <div>div> a>
4.文字类块元素不可以嵌套块元素
<p>这是一<p>p>句话p>
5.容器类块元素可以嵌套块元素
<div><p>p>div>
以上便是我学习Web前端HTML部分的学习和练习记录，在总结练习过程中，我收益颇多。小白进阶ing，下一篇我将会把我学习Web前端CSS部分记录一下希望能再次丰富我对Web前端的理解和运用。