【2018-10-17】【web前端学习】【day1】

最新推荐文章于 2023-12-24 13:24:04 发布

方慕珩

最新推荐文章于 2023-12-24 13:24:04 发布

阅读量223

点赞数

分类专栏： web前端

本文链接：https://blog.csdn.net/qq_42672532/article/details/83111759

版权

web前端专栏收录该内容

2 篇文章 0 订阅

订阅专栏

Html：超文本标记语言
Html的五个规范：

一个HTML文件开始和结束的标签。<html></html>
HTML包含：<head></head> <body></body>
HTML要有开始标签，也要有结束标签。
HTML的代码不区分大小写。
有些标签没有结束标签，例如：换行<br/> 水平线<hr/>

HTML操作思想*

网页中有很多数据，不同的数据可能需要不同的显示效果，这个时候需要用标签把要操作的数据包起来，通过修改标签属性来实现标签内数据样式的变化。

一个标签相当于一个容器，想要修改容器内数据的样式，只需要改变容器的属性值，就可以实现容器内数据样式的变化。

HTML中常用的标签。

文字标签和注释标签：

·文字：修改文字的样式。

-<font></font>

-属性：

·size：文字大小（1-7）超出7还是默认7.

·color：颜色（十六进制数）# （RGB）

·注释：<!—文字-->（！是英文的感叹号）

标题标签：（自动换行）<h1></h1>
水平线标签：<hr size=””/>

-属性：size（水平线粗细） color

特殊字符尖括号等特殊字符进行转义：

< <

> >

空格  

& &

列表标签

<dl></dl>：列表的范围

<dt></dt>：上层内容

<dd></dd>：下层内容（缩进）

如：

<dl>

</dl>

有序列表：

<ol></ol>：范围【属性：type：1（默认） a i（罗马数字）】

<ul></ul>：无序列表的范围

属性：type：空心圆circle、实心圆disc、实心方块square，默认是disc

Ul里面 <li></li>

图像标签

属性：

·src：路径

·width：宽度

·height：高度

·alt：图片上显示的文字（鼠标移动到图片上显示）【兼容性很差】

路径

分类：

·绝对路径（如：c:\…… http：\\）

·相对路径：一个文件相对于另外一个文件的位置。

（1.图片和html文件在一个路径下，可以直接写文件名称。

2.下层目录里：在html中使用img文件中的a.jpg文件：img\a.jpg

3.上层目录里：图片和html文件的关系：图片在html所在目录的上层目录 ../c.png

4.上层的上层：../../）

超链接标签

·超链接资源

target：设置打开方式（默认是当前页面打开）：_blank、_self

<a href=”#”></a>（当超链接不需要到任何的地址时）

·定位资源

<a name=”top”>顶部</a>【先定义一个位置】

<pre></pre>原样输出【就是带有缩进的那些】

【2018-10】

表格标签

对数据进行格式化，使数据显示更加清晰。

<table></table>：表格的范围

table 里面<tr></tr>(代表几行)

tr里面<td></td>（单元格[列]）

例：

cellspacing（单元格间隔）

</tr>

<tr>

</tr>

</table>

th可以居中和加粗。

表格标题：<caption></caption>

合并单元格

rowsoan：跨行

colspan：跨列

表单标签【非常重要】（可以提交数据）

<form action=”路径”></form>：定义一个表单的范围

action是指提交到什么页面。

method表单提交方式：（常用两种）get，post（默认get）

【get post区别：get请求地址栏会携带提交的数据，post不会携带（请求体里面。）

get请求安全级别较低，post较高。

get请求数据大小的限制，post没有限制。】

·enctype：一般请求下不需要这个属性，做文件上传的时候需要设置。

·输入项：<input type=”输入项的类型”/>

·普通：<input type=”text”/>

·密码：<input type=”password”/>

·单选输入项：<input type=”radio”name=”sex”/>女<input type=”radio”name=”sex”/>男

【属性：checked=”checked” 表示默认选择】

【属性：name（属性值要一样）】

·复选输入项：<input type=”checkbox”/>

·文件输入项：<input type=”file”/>

·下拉输入项（不是在input里）

</select>

·文本域：

·隐藏项：

·提交按钮：

【输入项里需要一个name属性，单选里需要一个values来判断是什么内容】

·使用图片提交按钮：<input type=”image” src=”a.jpg”/>

·重置按钮

·普通按钮

其他

b：加粗

s：删除线

u：下划线

i：斜体

pre：原样输出

sub：上标例如：3<sub>100</sub>

sup：下标

p：段落（比br标签多一行）

div：【自动换行】

span：【一行显示】

html头标签

head里的标签。

·title

·meta标签：设置页面相关内容。

·base标签：设置超链接基本属性。

例如：<base target=”_blank”/>

·link：引入外部文件。

框架标签

<frameset rows=”80,*”>（划分为上下两部分）

框架标签不能写在body标签里。

案例：（点击2中的内容，在1中会产生相应的页面）

<frameset rows=”8,*”><!--把页面划分为上下两部分-->

     <frame name=”top” src=”a.html”><!--上下页面-->

     <frameset cols=”150,*”><!--把下面的部分划分为左右-->

         <frame name=”lower_left”src=”b.html”><!--左边的页面-->

         <frame name=”lower_right”src=”c.html”><!--右边的页面-->

</frameset>

</frameset>

<frameset rows=”8,*”>//把页面划分为上下两部分

<frame name=”top” src=”a.html”>//上下页面

<frameset cols=”150,*”>//把下面的部分划分为左右

<frame name=”lower_left”src=”b.html”>//左边的页面

<frame name=”lower_right”src=”c.html”>//右边的页面

</frameset>

·要实现点击2中的超链接在1中展示出来，要在超链接的标签里加入：<a harf =”a.html” target=”right”>