学习和了解web前端的学习,学习前端主要是利于我们以后再编写程序,处理数据能够更流畅也方便自己的调试
01-HTML:
概念:超文本标记语言
作用:用于静态页面的制作
02-HTML的基本语法:
1.HTML文件以.html或者.htm结尾
2.HTML的结构标签
跟标签:<html>
头标签:<head>
体标签:<body>
3.HTML的页面标题
<title>页面标题</title>
4.HTML的排版标签
标题标签:<h1> 【范围h1 - h6】 heading
段落标签:<p> paragraph
居中标签:<center>
5.字体相关的标签
a.HTML的字体标签
<font>文字</font>
属性:
color=颜色
size=字体大小【默认是3,范围1-7】
例子:
<font color="red" size="4">
b.字体粗,斜,下划线标签
粗体标签:<b> 【bold】
斜体标签:<i> 【Italic】
下划线标签:<u> 【Underline】
6.其他标签
<hr/>:横线
<pre>:原生标签
HTML的标签不区分大小写,但是推荐小写。
HTML的属性可以不加双引号,但是推荐加。
如何查看标签单词缩写:HTML中的<ol>是什么单词的缩写
7.资源标签
<img> :图片 【属性:src=来源,width=x宽像素(%百分比),height=x高像素(%百分比),alt=提示】
<video>:视频 【属性:controls=显示播放器】
<audio>:背景音乐 【属性:autoplay=自动播放,loop=循环播放】
8.列表标签
有序标签:<ol><li>11111</li> 【ol:order list】
<li>22222</li> 【li: list item 】
</ol> 【属性:type=显示样式】
无序标签:<ul> 【ul:unorder list】
<li>11111</li>
<li>22222</li>
</ul>
*9.超链接标签
<a>:点击打开网页 【属性:href=网页路径,target=(_bank-新窗口打开,_self-在自身页面打开,_parent-在父窗口中打开)】
*10.表格标签
<table> 【border=边框大小 align=(left,right,center-表格水平位置),width宽,height高,bgcolor=背景颜色 cellspacing=设置表单距离】
<tr> 【tr:table row(表格行),align=(left,right,center-tr的内容)】
<td> 【tr:table data(表格数据),colspan=占几列,rowspan=占几行,align=(left,right,center-td的内容)】
【注:如果要固定表格高度必须在table设置总高度,tr设置每行高度,
如果table高度比tr加起来大,这tr按照比例分配,否则以tr高度为准】
****11.表单标签
<form> 【action=提交路径,method=请求方式(POST/GET)】
表单元素:
<input type="text"> :文本框 【name=数据,value=默认值,size=框长度,maxlength=输入长度 readonly=只读】
<textarea> :文本域 【name=数据,cols=宽,rows=高
<input type="password"> :密码框
<input type="radio"> :单选框 【name=所属单选的name值一致,value=选项,checked=选中】
<select> :下拉列表 【name=数据】 【multiple=显示所有数据】
<option> :下拉选项 【value=选项 selected=选中】
<input type="checkbox"> :多选框 【name=所属多选的name值一致,value=选项,checked=选中】
<input type="button"> :普通按钮 【value=按钮名称】
<input type="sumbit"> :提交按钮
<input type="reset"> :重置按钮
<input type="file"> :上传文件 【name=数据】
<input type="image"> :图片按钮
<input type="hidden"> :隐藏字段
了解HTML5的特有标签
<input type="email">
<input type="number">
<input type="date">
<input type="color">
*12.框架标签(后台页面 注:body标签冲突)
<frameset> 【cols(纵切)="50%,*",rows(横切)="15%,50%,*"】
<frame> 【src=内容页面,name=用于target指定跳转页面】
03-如何区分HTML4和HTML5?
HTML4的声明文档:<!DOCTYPE html PUBLIC ...4.01//EN...>
HTML5的声明文档:<!DOCTYPE html>
04-文件路径问题:
当前路径:./文件名or文件名
上一级路径:../文件名
下一级路径:文件夹/文件名
05-POST/GET请求的区别:
GET: 会将提交的数据显示在地址栏, 有大小限制。
POST:不会将提交的数据显示在地址栏,没有大小限制。
06-HTML的特殊
空格
> 大于
< 小于
其中重点记忆表单标签的作用
|
|