社区微信群开通啦,扫一扫抢先加入社区官方微信群
社区微信群
最近学习了Web前端的入门课程,深有感触,于是写了这篇学习笔记总结了一下,希望能加深自己的理解,而在此之前,为了写一个表单提交页面,学习了一些html的基础知识。在这些基础上学习Web前端,感觉学习轻松多了有么有?感觉真好!
统一保存、管理代码的地方 如:github
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 "xx@qq.com"
配置身份信息
git add xx.xml
后面可以加单独的文件
git add app
app是一个文件夹
git add .
全部文件
add这个只是添加,我们还需要提交
git commit -m "First commit"
双引号之中是相关的描述,提交(提交到本地缓存的仓库)更新文件
git push
提交到远程仓库
网页是构成网站的基本元素,是承载各种网站应用的平台
是html文档经过浏览器渲染以后展示出来的页面 html文档:后缀为.html
渲染:代码经过浏览器处理,产生人正常能看懂的页面
编码:通过代码形式,把要展示的页面写到html文档
文本内容:能被浏览器直接显示出来的文字和符号
标签:不能被浏览器直接显示出来的、具有特殊意义的,用尖括号括起来的字符
主要标签包括:文本、图片、链接、列表、表格、表单、框架(嵌套页面)
语法:
<!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>
单纯水平线:<hr />
类型:单标签
<h1></h1> <!-- 一级标题 -->
<h2></h2> <!-- 二级标题 -->
<h3></h3> <!-- 三级标题 -->
<h4></h4> <!-- 四级标题 -->
<h5></h5> <!-- 五级标题 -->
<h6></h6> <!-- 六级标题 -->
类型:双标签
<p></p>
类型:双标签
<br />
类型:单标签
(1) 
不是标签,可以当做特殊字符。
(2)输入法用全角
<img src="" alt="" width="" height="" />
属性src里填图片路径
图片路径分为:绝对路径和相对路径<!--相对路径:相对于当前html文件路径-->
./当前目录…/上一级目录
在当前目录建一个文件夹:images 将所展示图片都放在里面
属性alt里填图片说明
属性width里填图片长度:也可以用百分比表示
属性height里填图片高度:也可以用百分比表示
类型:内联元素
实例
<img src="1.jpg" alt="哈士奇" width="100" height="100"/>
<a href="https://www.baidu.com/" title="鼠标悬停显示" target="_blank">百度一下</a>
属性href:需要连接的网址,网站建设初期用#链接表示空链接
属性title:鼠标悬停显示
属性target:设置_blank,在新窗口打开链接地址
类型:内联元素
(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:链接说明
<ol>
<li></li>
<li></li>
</ol>
子元素,父元素,后代元素,兄弟元素
<!-- 列表需要嵌套写法 -->
<ul>
<li></li>
<li></li>
</ul>
<dl>
<dt></dt>
<dd>
</dd>
</dl>
实例
<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>
table标签
属性:border 作用:规定表格边框宽度
属性:cellpadding 作用:规定文字和边框的间距
属性:cellspacing 作用:规定每个单元格边框宽度
tr标签:html表格中的行
th标签:表格内表头单元格
td标签:表格内普通单元格
常用属性:
colspan:规定单元格可横跨列数,值为数字
rowspan:规定单元格可横跨行数,值为数字
<form>
:定义供用户输入的html表单属性:
action:规定提交表单向何处发送表单数据
name:表单命名
target:_blank在新窗口打开
method:提交方式,get或post值
类型:双标签
<input>
标签:定义表单输入页面<!-- 通过type属性展示不同输入页面,通过value改变默认值 -->
<input type="text" />
<input type="password" />
<input type="file" />
<input type="hidden" />
<input type="button" />
<input type="radio" /> <!--通过相同name属性实现单选-->
实例
<input type="radio" name="sex">男<input type="radio" name="sex">女
<input type="checkbox" />
`
<input type="submit" />
<input type="reset" />
属性placeholder 可用值text:规定帮助用户填写输入字段提示
属性checked 可用值checked:用于选择页面(单复选),实现默认选择
属性disabled 可用值disabled:使标签不可用
属性name:给input输入界面起名字
属性readonly 可用值readonly :使输入界面为只读状态
属性size 值为数字:设置输入框长度
属性value:该属性值为input提交到页面的数据,可通过该属性设置默认值
<!--双标签,默认值写标签之间-->
属性cols 值为数字
属性rows 值为数字
也可使用disabled name readonly属性
实例
自我介绍:<textarea cols="20" rows="10"></textarea>
标签for属性与input的id属性相同
可用属性:disabled name multiple
<select>
<option></option>
</select>
可用属性:disabled select value
<!--把相关选项组合在一起-->
属性label:给选项组命名
属性disabled:停用该选项组
实例
<select>
<optgroup label="河南省">
<option value="周口">周口</option>
<option>郑州</option>
<option>洛阳</option>
</optgroup>
</select>
<!DOCTYPE html>
<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">
<!-- 由于表单提交需要进行数据处理,html语言无法实现,暂且写成向百度提交数据 -->
账号:<input name="text" type="text" size="20" />
<br />
密码:<input name="password" type="password" size="20" />
<br />
<input type="submit" value="确认登录" />
</form>
</body>
</html>
将小块排列好
<div style="background:blue; height:80px;">菜单</div>
<div style="background:yellow; width:50%;">导航</div>
<div style="background:red; width:50%;">关于</div>
作用:嵌套页面
百度一下:<iframe src="http://www.baidu.com" frameborder="0"></iframe>
作用:管理后台页面
<frameset rows="12%,88%">
<frame src="frame1.html">
<frameset cols="20%,80%">
<frame src="frame2.html">
<frame src="frame2.html">
</frameset>
</frameset>
块元素:独立成一行,可以设置宽高,默认宽高100%
<p> <h1>~<h6>
div table tr td th from ul li ol dl dt dd
行元素:不独立成一行,不可以 内容决定
a img input strong em del span
特殊字符:文字 br
嵌套规则
<div><a href=""></a></div>
<a href=""><strong> a</strong></a>
<a href=""> <div></div> </a> <!--错误-->
<p>这是一<p></p>句话</p> <!--错误-->
<div><p></p></div>
以上便是我学习Web前端HTML部分的学习和练习记录,在总结练习过程中,我收益颇多。小白进阶ing,下一篇我将会把我学习Web前端CSS部分记录一下希望能再次丰富我对Web前端的理解和运用。
如果觉得我的文章对您有用,请随意打赏。你的支持将鼓励我继续创作!