文章目录
- P3.网页的基本概念
- P4.常用的浏览器
- P5.Web标准
- P10.DOCTYPE和lang语言以及字符集的作用
- P12.标题标签
- P13.段落标签和分行标签
- P15.文本格式化标签
- P16.div和span标签
- P17.图像标签
- P24.超链接标签
- P27.注释标签和字符
- P33表格标签的基本使用
- P40.三种列表
- P44.表单标签大体
- P46.input输入表单元素
- P54.select属性
- P55.文本域
P3.网页的基本概念
1.什么是网页？
2.什么是html?
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-V1jwleLm-1666199716304)(C:\Users\21677\AppData\Roaming\Typora\typora-user-images\image-20221018213726309.png)]
P4.常用的浏览器
1.常用的浏览器
2.浏览器内核
P5.Web标准
1.为什么要Web标准？
2.Web标准的构成
P10.DOCTYPE和lang语言以及字符集的作用
下面要讲的vscode自动生成,基本不用我们自己写,但是需要了解每一个代码的意思和作用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
</body>
</html>
<!DOCTYPE html>:文档类型声明,作用:告诉浏览器使用哪种html版本来显示网页,html版本:html3,html5,xml
<!DOCTYPE html>:声明位于文档的最前面,位于<html>之前
<!DOCTYPE html>:不是一个html标签[位于<html>里的是html标签],他是文档类型声明标签
lang语言:
1.en定义为英文
2.zh-CN定义语言为中文,中-中国
其实对于en的文档,也可以在文档里写中文,反之也可
<meta charset="UTF-8">
charset:字符集采用UTF-8
P12.标题标签
只有6个等级标签:
到
P13.段落标签和分行标签
1.段落标签
<p>印度总理纳伦德拉·莫迪(Narendra
Modi)表示，“对生活在农村和小城镇的人来说，去银行办理业务是非常困难的事情。尽管印度有超过10亿的银行账户，但生活在偏远地区的人们通常不得不从工作中抽出一天时间，到附近的城市去做银行相关的工作。”因此，确保银行服务可以在一公里之内触达消费者需求，就成为印度银行业发展的重中之重。
</p>
2.换行标签
P15.文本格式化标签
<strong>加粗文字</strong>
<em>倾斜文字</em>
<del>删除线文字</del>
<ins>下划线文字</ins>
P16.div和span标签
<div>我是div,我一个人独占一行,大盒子</div>
<div>我是div,我一个人独占一行,大盒子</div>
<div>我是div,我一个人独占一行,大盒子</div>
<span>我是span,我要和别人共一行</span>
<span>我是span,我要和别人共一行</span>
<span>我是span,我要和别人共一行</span>
P17.图像标签
1.图像标签:单标签
<img src="图像url" alt="">
<img src="../Image/mmexport1662308031154.jpg" alt="我是song" title="song"
width="500px">
P24.超链接标签
1.链接的语法格式
<a href="跳转目标" target="目标窗口打开的方式">文本或图像</a>
2.链接分类
a.外部链接
http冒号反斜杠开头 http://
<a href="http://www.baidu.com" target="_blank">腾讯官网</a>
b.内部链接
c.空连接 #
<a href="#">空链接</a>
d.下载链接
<a href="./公司 (1).zip">下载链接</a>
e.网页元素的链接
<a href="http://www.baidu.com"><img src="../Image/mmexport1662308031154.jpg" alt="图片链接"></a>
</body>
f.瞄点链接
P27.注释标签和字符
1.注释标签
<!--开始,-->结束
快捷键:ctrl+/,可以不选中,就注释光标所在行,直接ctrl+/
2.特殊字符
P33表格标签的基本使用
表格作用：显示和展示数据，并非是用来布局页面的
1.基本语法
<table>
<tr>
<td>第一行单元格1</td>
<td>第一行单元格2</td>
</tr>
<tr>
<td>第二行单元格1</td>
<td>第二行单元格2</td>
</tr>
</table>
2.表头单元格
3.表格属性
4.表格结构标签
5.合并单元格
<table align="center" border="1" cellspacing="0" cellpadding="20" width="500px" height="250">
<thead>
<tr>
<th></th>
<th></th>
</tr>
</thead>
<tbody>
<tr>
<td colspan="2"></td>
</tr>
<tr>
<td rowspan="2"></td>
<td></td>
</tr>
<tr>
<td></td>
</tr>
</tbody>
</table>
P40.三种列表
1.无序列表(最重要)
<h4>您喜欢吃的水果</h4>
<ul>
<li>苹果</li>
<li>香蕉</li>
<li>西瓜</li>
<li>葡萄</li>
</ul>
2.有序列表(理解)
<h4>粉丝排行榜</h4>
<ol>
<li>周杰伦</li>
<li>林俊杰</li>
<li>邓紫棋</li>
<li>陈奕迅</li>
</ol>
3.自定义列表(重点)
比如小米官网最下面的信息:
<dl>
<dt>关于小米</dt>
<dd>了解小米</dd>
<dd>加入小米</dd>
<dd>投资者关系</dd>
<dd>环境,社会及管制</dd>
<dd>廉洁举报</dd>
</dl>
P44.表单标签大体
这里主要给大家大体了解一下表单.
1.表单的三部分组成
2.表单域
<form action="url地址" method="提交方式" name="表单域名称">
</form>
3.表单控件
P46.input输入表单元素
一.初谈type属性
1.type属性
<form>
用户名: <input type="text"> <br>
密码: <input type="password"> <br>
单选按钮: <input type="radio"> 男 <input type="radio"> 女 <br>
复选框: <input type="checkbox"> 吃饭 <input type="checkbox"> 睡觉 <input type="checkbox"> 打豆豆 <br>
</form>
2.name属性
修改后:
<form>
用户名: <input type="text" name="username"> <br>
密码: <input type="password" name="password"> <br>
单选按钮: <input type="radio" name="sex"> 男 <input type="radio" name="sex"> 女 <br>
复选框: <input type="checkbox" name="hobby"> 吃饭 <input type="checkbox" name="hobby"> 睡觉 <input type="checkbox" name="hobby"> 打豆豆 <br>
</form>
3.value属性:
但是下面这种提示效果是怎么弄的呐?
<form>
用户名: <input type="text" name="username" value="请输入用户名"> <br>
密码: <input type="password" name="password"> <br>
单选按钮: <input type="radio" name="sex" value="男"> 男 <input type="radio" name="sex" value="女"> 女 <br>
复选框: <input type="checkbox" name="hobby" value="吃饭"> 吃饭 <input type="checkbox" name="hobby" value="睡觉"> 睡觉 <input type="checkbox" name="hobby" value="打豆豆"> 打豆豆 <br>
</form>
4.checked属性;
5.maxlength属性
二.再谈type属性
1.submit属性
我们知道表单域是可以把表单元素送到服务器的,那么什么时候把这些表单元素送到服务器?
答案:添加submit提交按钮
<!-- 表单域 -->
<form action="xxx.php" method="get">
用户名: <input type="text" name="username" value="请输入用户名"> <br>
密码: <input type="password" name="password" maxlength="6"> <br>
单选按钮: <input type="radio" name="sex" value="男"> 男 <input type="radio" name="sex" value="女"> 女 <br>
复选框: <input type="checkbox" name="hobby" value="吃饭" checked> 吃饭 <input type="checkbox" name="hobby" value="睡觉"> 睡觉 <input type="checkbox" name="hobby" value="打豆豆"> 打豆豆 <br>
<!-- 提交按钮: --> <input type="submit" value="免费注册">
</form>
点击免费注册后:
2.reset属性
这的使用场景和submit类似,区别在于这个功能不是提交功能,而是一键清空表单元素信息,一般value设置为“重新提交”或者“重置”
<!-- 重置按钮: --> <input type="reset" value="重新填写">
3.button按钮
<!-- 普通按钮: --> <input type="button" value="获取验证码">
这个阶段点击后,啥也做不了,一般后面结合JS来实现获取验证码的功能.
4.file属性
<!-- 上传文件 --> <input type="file" value="上传文件">
没有点击按钮前效果:
点击按钮后效果:
三.小小总结:
四.label标签
<label for="user">用户名: </label> <input type="text" name="username" value="请输入用户名" id="user">
这是不是和我们之前学过的P24.超链接标签里的锚点链接的标签有点像:
P54.select属性
1.使用场景
2.语法规范
<from>
籍贯:
<select>
<option>江西</option>
<option>北京</option>
<option>上海</option>
</select>
</from>
这是不是和我们之前在input标签的type属性值为radio或者checkbox时[单选或复选框],在input标签中添加checked属性[属性值]即可设置为默认选中.
单选按钮: <input type="radio" name="sex" value="男" checked> 男 <input type="radio" name="sex" value="女"> 女 <br>
复选框: <input type="checkbox" name="hobby" value="吃饭" checked> 吃饭 <input type="checkbox" name="hobby" value="睡觉"> 睡觉 <input type="checkbox" name="hobby" value="打豆豆"> 打豆豆 <br>
P55.文本域
使用场景:当用户输入内容比较多,我们就不能再使用文本框表单,此时我们应该使用文本域
适用在留言,评论,反馈等需求的时候
<form>
<textarea>
文本域书写内容的区域
</textarea>
</form>
<form>
留言板:
<textarea cols="50" rows="50">
文本域书写内容的区域
</textarea>
</form>
