Web前端学习笔记

最新推荐文章于 2024-04-22 16:45:06 发布

努力提升的小宇同学

最新推荐文章于 2024-04-22 16:45:06 发布

阅读量2.2k

点赞数 1

分类专栏：小宇的笔记文章标签： javascript web js css

本文链接：https://blog.csdn.net/weixin_43487110/article/details/108390764

版权

本文是一篇关于Web前端学习的详细笔记，涵盖了HTML的基础知识，包括基本标签、HTML5增强标签及多媒体标签。接着介绍了CSS的作用、引入方式和常见属性，以及选择器和定位。此外，还深入讲解了JavaScript的基础，包括变量、运算符、控制语句、事件和DOM操作。最后探讨了jQuery的选择器、事件处理和动画功能。

摘要由CSDN通过智能技术生成

Web前端学习笔记

2020-9-3整理 2019-9月-19学完作者:小宇

HTML 基础知识

互联网中的三大基石

Html (HyperText Markup Language) 超文件标记语言

Http (HyperText Transfer Protocol)超文本传输协议

Url (Uniform Resource Locator) 统一资源定位符

HTML、CSS、JS之间的关系

如果说HTML是肉身、CSS就是皮相、Javascript就是灵魂。没有Javascript,HTML+CSS是植物人，没有Javascript、CSS是个毁容的植物人

HTML 的作用

HTML是一种专门对网页信息进行规范化展示的语言，把网页的信息格式化展现的语言

基本标签一

HTML中 <meta charset="utf-8" />标签的作用

将网页的字符集设置为 UTF-8

<head>标签和<body>标签的作用：

<head> 标签代表了浏览器的头部. 修饰头部的写在 head 中

<body> 标签代表了浏览器的身体. 修饰身体的写在body中.

标题弄标签常用的属性

<meta>的四个作用：

1. 设置 网页的字符集.
2. 搜索引擎优化.
3. 设置 自动刷新网页.
4. 禁止网页缓存.

<hr/> 标签常用属性

水平线

常用属性：

align =”center” 水平居中

color =”red” 颜色设置为 红色

Width = “500px” 宽度设置为 500px

Size =20 px 设置水平线的高度.

基本标签二

<h1> ~ <h6>  :用于设置文本的样式. 每个标签占一行.字体加粗逐渐变小
&nbsp; 空格符
<br> 换行符
<pre> 预文本标签 将输入在 pre 标签中的内容原样不动的显示在浏览器中.

小标签

<u> 给字体添加下划线  

<b> 给字体添加加粗效果

<i> 添加倾斜的效果

<del> 添加删除线的效果

<small> 字体变小的标签

<big> 字体变大的标签

<sup>/<sub> 添加字体的上下标
2<sup>3</sup> = 2³
    
log<sub>2</sub> = log₂
    
<font face:”宋体”> 字体标签 face:设置字体的风格.

//列表标签 (1.有序标签 2.无序标签 3.自定义标签)

<ol type =”a”> 有序标签

<li> 这是子标签<li>

<ol> 设置 从 a 开始排序

<ul> 无序标签 子标签<li>

<dl> 自定义标签

<dt>java</dt> 设置java为一类

<dd>javaSE</dd>

<dd>javaEE</dd>

<dd>javaME</dd>

<marquee> 跑马灯 设置文字滚动的效果

超链接标签的用法

<a href="body常用标签.html">小标签</a>  指向本地资源

<a href="http://www.baidu.com">百度首页</a>  指向网络资源

<a name="top" href="#bottom">返回底部</a>  返回底部

设置返回底部锚点时,需要给返回的位置的标签设置name,返回在超链接中 #name,单击即可到达超链接的位置.

target="_blank" 设置在新网页中打开.

图片标签
- 网络路径
- 相对路径
- 绝对路径

图片常用属性：

<title> 设置鼠标移动到图片上显示的文字

<height> <width> 设置图片的长宽 若只改变个,另一个等比例自动改变.

<border> 设置网页的边框

<alt> 设置图片加载错误后显示的文字

<align> 设置图片的水平位置 ,但是需要一个参照,不然没有效果.

表格标签

table>tr*3>5*th 快捷生成一个 3行5列的表格.

tr 行标签  td 列表签

th 列标签 一般作为表头使用,th 中的内容自动居中加粗.

Bgcolor : 设置表格的背景色.

<td Rowspan =” 2”> : 设置列标签占2列

<tr colspan =” 2”>: 设置列占2行

表格会对内容自适应,如果没有内容表格将会很小.

表单标签

action : 表单体检的地址.可以是本地的也可以是网络的.

<form action="https://so.csdn.net/so/search/s.do?" method="get">

<input type="text" name="q" />

<input type="submit" value="CSDN一下"/>

</form>

使用csdn搜索案列.

常用表单项的属性

账号: <input type="text" name="zh" value="123" /><br/>

密码: <input type="password" name="psd" value="123" /><br/>

男<input type="radio" name="sex" value="1" />

女<input type="radio" name="sex" value="0" /><br />

中国<input type="checkbox" checked="checked"/>

美国<input type="checkbox" /><br />

<select name="">

<option value="1">吸烟</option>

<option value="2" selected="selected">烫头</option>

</select><br />

<!-- 文本域-->

<textarea rows="13" cols="15">这是默认值</textarea><br />

<input type="file" name="file" id="file" value="file" />

<input type="hidden" /> 隐藏域

type=”button“ 和 type=”submit“的区别

Button 只是普通的按钮.

Submit 是可以提交数据的按钮，通常用于表单中。

IFrame 标签

在一个网页中嵌套另一个网页. 让网页在 iframe 框架中显示.

最低0.47元/天解锁文章

努力提升的小宇同学

关注

1
点赞
踩
11

收藏

觉得还不错? 一键收藏
0
评论
Web前端学习笔记

Web前端学习笔记2020-9-3整理 2019-9月-19学完作者:小宇HTML 基础知识互联网中的三大基石Html (HyperText Markup Language) 超文件标记语言Http (HyperText Transfer Protocol)超文本传输协议Url (Uniform Resource Locator) 统一资源定位符HTML、CSS、JS之间的关系如果说HTML是肉身、CSS就是皮相、Javascript就是灵魂。没有Javascript,HTML+C
复制链接

扫一扫