202209 week1 day1~day2 前端学习
1 关于blog
进入技术部学习期的第一篇blog，主要是对于第一周学习内容的记录，包括学习清单、学习任务完成情况、学习总结与收获。week1主要复习html和css相关重点知识，学习js，完成作业。
2 学习计划清单
计划 “1+2+4” 分配学习时间，重点任务放在JavaScript上，前面的html以及css只做简单的复习巩固。day1复习html，重点复习表单标签，day2复习css样式部分。
2.1 HTML部分
2.1.1 各类网页标签
开始的时候简单看了以下表单之前的内容，通过慕课的课程学习到表单之前。主要是一些基本标记，比如标题<hn>段落<p>换行<br/>块标记<div> <span>超链接<a>，要注意的是，很多标签都是双标签，虽然编译器会自动补充另一半，但也要注意标签的使用和嵌套。
HTML文件的标记：
- 用于描述功能的符号称为“标记”，也称标签。
- 标记必须用尖括号“<>”括起来，比如
<html>、<head>等。
HTML文件的书写规范：
- 标记要用尖括号括起来
- 标记可以嵌套
- 标记名称不区分大小写
- 标记中不要有空格
标题标签
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<!-- 各级标题标签的使用-->
<h1>旅游快讯</h1>
<h2>2015大连国际沙滩文化节</h2>
<h3>时间：2015-06-11至2016-07-11</h3>
<h4>地点：中国山东省大连市</h4>
<h5>联系方式：18888888888<h5>
</body>
</html>
运行结果
段落标签与换行标记
- 段落标记使用
<p>表示，全称：paragraph - 合理的使用段落会使文字的显示更加美观，要表达的内容也更加清晰。换行标记使用
<br/>,它表示另起一行。全称：break
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<p>满江红</p><!-- 段落标签的应用-->
<!-- 换行标签的应用 换行标签为单标签-->
怒发冲冠，凭栏处，潇潇雨歇。<br/>
抬望眼，仰天长啸，壮怀激烈。<br/>
三十功名尘与土，八千里路云和月。<br/>
莫等闲，白了少年头，空悲切。<br/>
</body>
</html>
运行结果
块标记（vital）
块标记有两个分别是<div>和<span>。
- 它们都是容器，用于定义页面的内容
- 块标记本身没有具体的显示效果，标记的显示效果由style属性或CSS来定义
- 在浏览器中
<div>标签里面的内容独占一行，一行只能显示一个div - 在浏览器中
<span>标签的内容，可以在一行显示多个 - 可以理解成
<div>用于分割分区，<span>则是让数据在一行显示
<!DOCTYPE html>
<html>
<head>
<title>div和span标签</title>
</head>
<body>
<div style = "background-color:#3399FF">div1 块状区域</div>
<div style = "background-color:#99DDEE">div2 块状区域</div>
<span style = "background-color:#FFCCFF">span1 行间区域</span>
<span style = "background-color:#993399">span2 行间区域</span>
</body>
</html>
运行结果
列表标记
列表可以对网页文字进行更好的布局。HTML中有3种列表形式：有序列表<ol>、无序列表<ul>和自定义列表<dl>。
有序列表
有序列表是一个项目的序列，每个列表项按照数字或者字母顺序排列，ol全称：ordered list，li全称list。语法格式如下:
<ol>
<li>列表信息</li>
<li>列表信息</li>
<li>列表信息</li>
</ol>
注意：<li>标签不能独立使用，必须嵌套在<ol>里面
为<ol>标签的type属性设置指定的值。让列表按照小写英文字母顺序进行排列。
<!DOCTYPE html>
<html>
<head>
<title>有序列表</title>
</head>
<body>
四大美女
<!--type="a" 列表项按照小写英文字母进行排列-->
<ol type="a">
<li>沉鱼</li>
<li>落雁</li>
<li>闭月</li>
<li>羞花</li>
</ol>
</body>
</html>
运行结果
无序列表
<!DOCTYPE html>
<html>
<head>
<title>无序列表</title>
</head>
<body>
唐宋八大家
<ul type="circle"> <!-- 显示空心圆圈-->
<li>韩愈</li>
<li>柳宗元</li>
<li>欧阳修</li>
<li>苏轼</li>
<li>苏洵</li>
<li>苏辙</li>
<li>曾巩</li>
<li>王安石</li>
</ul>
</body>
</html>
运行结果
超链接标签
在浏览网页时，单击图片或者文字就可以跳转到其他页面，就是通过超链接来实现的。
超级链接标记<a>，使用格式：
<!--
href属性：链接标题所指向的目标文件的URL地址。
target属性：用于打开链接的目标窗口，默认方式是原窗口。
-->
<a href="url" target="self" >链接标题</a>
新增标签
artical标签
<article> 用来定义独立的内容。标签定义的内容本身必须是有意义的且必须是独立于文档的其余部分。例如：一篇文章或者一篇论坛帖子。
<article><p>庆历四年春，滕子京谪守巴陵郡。</p></artical>
section标签
<section> 标签定义了文档的某个区域。比如章节头部、底部或者文档的其他区域。
<section><center>北宋 范仲淹</center></section>
nav标签
<nav> 标签定义导航链接的部分，它只是作为标注一个导航链接的区域。
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<nav>
<ul>
<li><a href="https://www.sina.com.cn">新浪</a></li>
<li><a href="https://www.sohu.com">搜狐</a></li>
<li><a href="https://www.qq.com">腾讯</a></li>
</ul>
</nav>
</body>
</html>
运行结果
aside标签
<aside>元素用来表示当前页面附属信息，例如：广告、侧边栏等等。
header标签
<header>元素通常用来放置页面的标题。使用下面的方式书写页面的标题更有助于理解。
<header><center><h3>岳阳楼记</h3></center></header>
footer标签
<foot>元素用于页面的注脚信息。例如：作者、版权等信息。
<footer><p>公众号：江南一叶</p></footer>
2.1.2 问题和对应知识点
超链接路径
学到图像标记<img>的时候，我明白了之前一直困惑的一个问题——为什么每次引用的路径是正确的，但是图片无法显示。经过学习我发现，路径也分为几种，每一种路径对应的表示语法也不相同。
HTML文件中提供了三种路径——绝对路径 相对路径 根路径（一般较少使用）
绝对路径
文件的完整路径，从盘符开始，一般用于网站的外部链接。
<img src = "http://www.qq.com">
相对路径
相对于当前文件的路径，包含了从当前文件指向目的文件的路径，适用于网站的内部链接。
相对位置的输入方法
<!-- ../表示返回当前目录的上一级目录(day3)
../images/header.jpg表示返回当前目录的上一级目录，然后进入images目录。最后打开header.jpg文件-->
<!-- 同一目录下的输入方式-->
<img src = "index.html">
<!-- 链接上一目录的输入方式-->
<img src = "../images/header.jpg">
<!-- 链接下一目录的输入方式-->
<img src = "images/header.jpg">
| 相对位置 | 输入方法 | 举例 |
|---|---|---|
| 同一目录 | 直接输入要链接的文档名 | index.html |
| 链接上一目录 | 先输入../，再输入目录名 | ../images/pic1.jpg |
| 链接下一目录 | 先输入目录名，后加入/ | videos/v1.mov |
image标签常用属性
在网页的制作中为使网页炫丽美观，肯定是缺少不了图片，可以使用标签来插入图片。
| image标签常用属性 |
|---|
语法 <img src="图片地址" alt="下载失败时的替换文本" title = "提示文本"> |
举例 <img src = "myimage.gif" alt = "My Image" title = "My Image" /> |
| 讲解 1、src：标识图像的位置；2、alt：指定图像的描述性文本，当图像不可见时（下载不成功时），可看到该属性指定的文本； 3、title：提供在图像可见时对图像的描述(鼠标滑过图片时显示的文本)； 4、图像可以是GIF，PNG，JPEG格式的图像文件。 |
2.2（重点）表单标记
表单（Form）是网页提供的一种交互式操作手段，表单主要用于采集用户输入的信息，浏览器通过表单将采集的信息发送给服务器。QQ登录就是一个表单。
2.2.1 form标记
form标记用来定义表单，常用的属性如下
<form name="formName" method="post|get" action="url"></form>
定义一个登录表单
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<form name="loginForm" method="post" action="success.html">
</form>
</body>
</html>
运行结果是一个空表单。
小结：一个表单里面必须嵌入“输入”或者“选择”元素，否则这个表单毫无用处。
2.2.2 输入标记input
<input>标记是表单中输入信息常用的标记。该标记通常嵌套在form标记里面使用。
<form>
<input name="输入框名称" type="输入框类型">
</form>
使用表单模拟QQ登录
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<form name="loginForm" action="login_success.html" method="post">
用户名：<input type="text" name="userName" /><br/>
密码：<input type="password" name="userPwd"/><br/>
<input type="submit" name="submit" value="登录"/>
<input type="reset" name="reset" value="重置"/>
</form>
</body>
</html>
运行结果
2.2.3 下拉列表框标记
列表框标记使用<select></select>表示，它是一个双标签。通常提供多个选项让客户进行选择。
<form>
<select name="列表框名称">
<option value="选项值">选项显示内容</option>
<option value="选项值">选项显示内容</option>
</select>
</form>
运行结果
2.2.4 文本域标记
文本域标记使用<textarea></textarea>表示，它是一个双标签。通过设置rows和cols属性可以输入多行文本。
<form>
<!--默认5行，每行可以输入100个字符-->
自我介绍：<textarea name="mytext" rows="5" cols="100" ></textarea>
</form>
运行结果
2.2.5 新增input类型
数值输入域—number
<input type="number" min="" max="" step="" >
滑动条—range
<input name="" type="range" min="" max="" step="" value="">
日期选择器
<form>
请选择日期: <input name="user_date" type="date" />
</form>
type属性设置为以下类型:
- date——选取日、月、年
- month——选取月、年
- week——选取周、年
- time——选取时间（小时和分钟）
- datetime——选取时间、日、月、年（世界标准时间UTC）
- datetime-local——选取时间、日、月、年（本地时间）
email类型
<input name="email1" type="email" value=fengning@163.com />
2.3 表格（vital）
表格是行和列的集合。表格用于网页布局。
2.3.1 表格常用标记极其说明
| 标签 | 说明 |
|---|---|
<table> | 表格标记 |
<tr> | 行标记 |
<td> | 单元格标记 |
<th> | 表头标记 |
2.3.2 定义表格的基本语法格式
<table>
<tr>
<td>
</td>
</tr>
</table>
<table></table>用来定义表格，整个表格应该包含在标记对中。<tr></tr>用来定义表格中的一行，可以通过在<tr>标记中设置属性来修改该行的显示效果。<th>和<td>用来定义单元格，表格的每一行都可以包含若干单元格，其中可能会包含两种类型的单元格，对应两种信息，一种是数据，另一种是头信息。
<table>
<tr>
<th>学科</th>
<th>分数</th>
</tr>
<tr>
<td>数学</td>
<td>100</td>
</tr>
</table>
运行结果
2.3.3 HTML的表格属性
表格边框宽度 border
默认情况下，表格的宽度为0，即不显示边框线。可以用border属性指定表格边缘线的宽度。单位为像素px。
<table border = "2"> <!--设置表格边框线的宽度为2px-->
单元格跨列 colspan
单元格可以向右跨多个竖列，跨数列的数量通过th或td元素的colspan属性可以设置。
<td colspan = "value"> <!--其中value的值为大于等于2的整数-->
单元格跨行 rowspan
单元格可以向下跨越多个横行，跨越横行的数量通过th或td元素的rowspan属性进行设置。
<td rowspan = "value"> <!--其中value的值为大于等于2的整数-->
其他属性
表格宽度和高度 表格边框颜色 背景颜色等属性 目前都有css来定义。
2.3.4 嵌套表格
表格嵌套：可以在一个表格中嵌套一个或者多个表格
2.3.5 内嵌框架
在一个浏览器窗口中显示多个HTML文件的网页制作技术。
<!DOCTYPE html>
<html>
<head>
<title>框架</title>
</head>
<frameset cols="20%,80%">
<frame src="index1.html"/>
<frame src="index2.html"/>
</frameset>
</html>
- HTML标签分为行级别标签和块级别标签
行级别标签：多个标签可以在一行显示不用换行
<b></b>
<u></u>
<i></i>
<img />
<span></span>
<iframe></iframe>
块级别标签：每个标签独占一行
<h1~h6>
<p></p>
<div></div>
<frameset></frameset>
<hr/>
<br/>
<form></form>
<table></table>
<ol></ol>
<ul></ul>
-
HTML的表格标记
<table>、行标记<tr>、单元格标记<td>、表头标记<th>，以及各标记的用法。 -
在HTML中定义表格时各标记的属性设置，border、bordercolor、width、height、bgcolor等。
-
HTML5中仅保留了表格的border属性，且只允许使用值“”或“1”，还保留了单元格的colspan、rowspan属性
CSS部分
学习css样式部分，剩余部分在day3学习结束后记录。
JavaScript部分
具体学习笔记在day4~day7学习结束后记录。
学习任务情况
情况良好，还有css样式的相关内容未整理
学习总结收获
以上就是前端学习中html部分的相关内容，由本人结合资料笔记和个人所学整理得出。若文章有内容错误，请予以建议，我会进一步修正改进！
7040
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
