2020-12-11 html上课笔记

最新推荐文章于 2024-05-17 15:34:29 发布

廖磊�

最新推荐文章于 2024-05-17 15:34:29 发布

阅读量116

点赞数

文章标签： html css web

本文链接：https://blog.csdn.net/ll31523837790/article/details/111054927

版权

web前端

    web前端开发就是做软件开发、微信小程序 、网页设计、网站建设、APP开发、游戏开发这块的。
    web前端的软件有：1，Sublimie 2，Vscode 3，Hbuilder等等。其中Hbuilder这个软件，专业前端人员使用笔记多。
    学习web前端需要掌握的技术有：
    1.HTML:超文本标记语言(Hyper Text Markup Language)。在web中可以叫结构层,用与描述网页的展示结构。
    2.CSS:在web中叫表现层，用与修释网页的美观度。
    3.JS:JavaScript 行为层，用与完成页面的组件。
    下面要说的是html

1.1HTML

主要作用：做数据展示
在这里插入图片描述
上图中 Document表示文档。Language—lang表示语言，其中en表示英文，zh-cn表示中文。Head表示html的头的部分。body表示html的正文部分。UTF-8----Unicode码全世界的通用码。Meta—Metadata表示源数据。Title表示文档的标题。
hn标签表示文本的标题 n可以取1~6，且数字越大字越小。例下图
在这里插入图片描述

一.html的标签类型有两种：
1.双标签：双标签是由“开始标签”和“结束标签”两部分构成。如在这里插入图片描述

2.单标签：单标签就是由一个标签组成的。如
在这里插入图片描述

二：表单
Form—表单
该标签一般不会单独使用会和input标签一起使用。
属性 action=“路径“ url表示路径。
路径有两种：
1.绝对路径：从盘符开始要描述的文件路径路径+文件的名称。
2.相对路径：当前源文件和目标文件的相对路径位置。
例：https://editor.csdn.net/md?articleId=111054927&PC=U531
路径中的？表示目标文件的结束标识。&表示属性连接符。
HTTP协议：get请求和post请求
虽然两者都可以让后台接收到数据，但是Get请求不安全，会把name属性的值暴露在地址栏上。Post请求安全不会再地址栏上暴露name属性的值。
Target属性
在这里插入图片描述

Method=""请求方式（默认情况是Get请求）
action="url"表示跳转路径

<input type="" name="">

text—文本框
Password—密码框
在这里插入图片描述
submit—提交按钮
Reset—重置按钮

Radio—单选框
Checkbox—多选框
Button—普通按钮
Select标签选择框

<select>
	<option value="重庆">重庆</option>
<option value="四川">四川</option>
<option value="永川">永川</option>
<option value="丰都">丰都</option>
</select>

多选框
使用 multiple属性

<select multiple="multiple">
	<option value="爱钱">爱钱</option>
<option value="看美女">看美女</option>
<option value="读书">读书</option>
<option value="做作业">做作业</option>
</select>

其他标签：
文本域：textarea
在这里插入图片描述
打开得：
rows表示行数 cols表示列数

<br/>

表示换行。
Align="center"表示具中，left居左，right居右。
div标签网页的分区显示
p标签表示对行的控制。看图：
在这里插入图片描述
打开得：

bgcolor—背景颜色：颜色可以用英文单词表示，也可以用十六进制表示
十六进制表示表
Background 使用图片作为背景(不建议使用)因为大部分网站不会使用图片作为背景。
页面跳转：使用form表单 action属性进行页面跳转。
A标签，可进行页面跳转且默认为Get请求。元素最重要的属性是 href 属性，它指示链接的目标。

<a href="url">/*url表示路径/*

Font 标签：可以控制字体的大小和颜色。
锚点：使网页的展示到达某一个定位的地点

<a href=”#D1”></a>

<a name=”D1”></a>

三：img标签
img标签表示页面上的图片。
有两个属性：src和alt。
src—source 指代的是图片的路径 url
aly—表示图像的替代文本。
在这里插入图片描述
可以用width设置图片宽度，也可以用height设置图片的高度。

map标签和area标签：map标签指定图片，area设置图片中的点击区域。

四：表格布局
表格布局：通过表格来对网站进行整体的布局。
表格里常用的标签：
table—表格
Tr—表行
Th—表头
Td—表元

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	<h1>热门电影板块</h1>
	<hr/>
	<table width="800px">
	<tr>
		<td>最近热门电影</td>
		<td>热门</td>
		<td>最新</td>
		<td>豆瓣评分</td>
		<td>冷门佳片</td>
		<td>华语</td>
		<td>欧美</td>
		<td>日本</td>
		<td style="padding-right:60px; padding-left:120px;"><a href="2.html">更多&gt;&gt;</td>
	</tr>
	
	</table>
</body>
</html>

打开得：
在这里插入图片描述
五：列表
1.无序列表：

<ul>
<li></li>
<ul/>

2.有序列表：

<ol>
<li></li>
</ol>

3.定义列表：
在这里插入图片描述
打开得：

六，音频和视频
视频 vedio:

<vedio src="url" controls="controls"></vedio>

音频 audio：

<audio src="url" controls="controls"></audio>

七.多窗口框架
指一个页面上有多个窗口。
4.0 版本多窗口
5.0版本中内嵌窗口
注意：frameset 不能和body标签一起使用。

廖磊�

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
2020-12-11 html上课笔记

web前端 web前端开发就是做软件开发、微信小程序、网页设计、网站建设、APP开发、游戏开发这块的。 web前端的软件有：1，Sublimie 2，Vscode 3，Hbuilder等等。其中Hbuilder这个软件，专业前端人员使用笔记多。学习web前端需要掌握的技术有： 1.HTML:超文本标记语言(Hyper Text Markup Language)。在web中可以叫结构层,用与描述网页的展示结构。 2.CSS:在web中叫表现层，用与修释网页的美观度。
复制链接

扫一扫