web1.0和web2.0的HTML常用标签

最新推荐文章于 2021-10-19 11:22:17 发布

会飞的鱼3YH

最新推荐文章于 2021-10-19 11:22:17 发布

阅读量1.1k

点赞数

本文链接：https://blog.csdn.net/cutcue/article/details/41087857

版权

web1.0标准：让数据和显示效果混合在一起

<font color="#ff0000" size="7" face="黑体">我们要修饰的文字</font>
color、size、face属性，让数据显示的效果发生变化

我们要修饰的文字这就是数据

网站：100网页，每页100行显示效果

HTML基本结构：

</html>

文字标签：

显示标题： <h#>文字</h#> #号取值1~6，1号最大

水平线标签： <hr />

预格式化标签： <pre>文字</pre>

文字修饰标签： <font>文字</font>

font属性：

face="宋体" 修改字体样式

size="#" #号取值1~7，1最小修改字体大小

color="#" #号可以写英文（red，green等等），也可写颜色的十六进制（#000000——#FFFFFF，在网页中只能显示3的倍数安全色）

删除线标签： <del>文字</del>

下标标签： <sub>文字</sub>

上标标签： <sup>文字</sup>

排版标签： <p>内容</p>

实体字符： ©   < >

一、链接的3种形式、以及属性取值说明：
1.<a href="a.html" target="_blank"></a>
2.<a href="#mj"></a> <a name="mj"/>
<a name="" />
3.<a href="mailto:" ></a>
二、图片标签：
<img src="1.jpg" />
三、列表标签：
1.<ol>
<li></li>
<li></li>
</ol>
2.<ul>
<li></li>
</ul>
四、表格标签：
<table>
<tr>
<td></td>
</tr>
<tr>
<td></td>
</tr>
</table>

五、表单标签：表单提供了用户与WEB应用交互。

表单标签：
<form>
//表单组件代码都要写在form标签内

</form>

2、form属性：
action:写上服务器接收数据的地址

method:决定表单的数据传递到服务器的形式，取值有get和post

get
提交数据，数据会附加在action之后显示在地址栏上
数据会保留在历史记录中，再次访问服务器能收到相同数据
最大传输255字节

post
提交数据，数据不会附加在地址栏上
数据不会保留在历史记录，再次访问服务器应该报错
理论上可以传输无限大的数据

get和post的应用区别：
1、涉及到安全性的数据提交，应该采用post方式
2、get更加适合从服务器获取数据到浏览器，post适合把大量数据发送给服务器

3、表单组件公共属性：
name,为组件命名，让服务器能够识别出收到的数据应该对应哪个组件
value,给组件提供一个默认值

文本框:<input type="text" name="username"/>
密码框:<input type="password" name="password"/>
单选按钮组:<input type="radio"/>
复选框:<input type="checkbox"/>
提交按钮:<input type="submit"/> 按钮通常不写name属性
重置按钮:<input type="reset"/>
上传组件:<input type="file" name="face"/>

下拉列表框:
<select name="city">
<option value="1">选项1</option>
<option value="2">选项2</option>
<option value="3">选项3</option>
</select>

文本域:textarea没有value属性！！！！
<textarea rows="5" cols="20" name="about"></textarea>

web2.0标准：淘汰(不建议）font，hr,br,p,pre,table

div+CSS

css:层叠样式表,编写数据显示的效果
编程位置：
1、在head标签中<style>这里可以编写css</style>
2、在外部的css文件中导入样式

一、编程语法：
选择器：
1、标签选择器:凡事body符合标签选择器定义的标签，样式都会发生变化

标签 {属性:取值;属性1:取值;属性n:取值}

2、类选择器：只作用于有标签选择器指定的class标签，样式就发生变化

.类名 {属性:取值;属性1:取值;属性n:取值}

3.ID选择器：只作用于ID选择器指定的id，样式发生变化
注意：id通常取值必须是整个网页唯一的！

#id {属性:取值;属性1:取值;属性n:取值}

作用范围从大到小排列：标签选择器——》类选择器——》ID选择器

当效果重叠时按照作用效果排序：ID选择——》类选择器——》标签选择器

4、特殊的选择器：
伪类：改动链接的样式效果
a:link：一个链接显示的效果
a:hover：鼠标滑动到链接上的效果
a:visited：链接被访问过之后的效果
a:active:鼠标按住链接的效果

二、盒子模型：
padding(内边距)：数据和标签之间的距离
margin(外边距):两个标签的距离

css把数据横向排列：float:left