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> :用于设置文本的样式. 每个标签占一行.字体加粗逐渐变小
空格符
<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 框架中显示.