用HTML进行网页布局

最新推荐文章于 2023-04-12 10:25:12 发布

weixin_43000064

最新推荐文章于 2023-04-12 10:25:12 发布

阅读量442

点赞数 1

文章标签： html

本文链接：https://blog.csdn.net/weixin_43000064/article/details/111872574

版权

表单验证的好处：
1.减轻服务器的压力
2.保证数据的可行性和安全性
表单验证的方法：
placeholder;文本框底层文字类似于背景文字
required;规定此框为必填项
pattern;用户输入的内容必须符合正则表达式所指的规则，否则就不能提交表单

选择器 { 声明1;
声明2;
…… }

h1 {
	font-size:12px;
	color:#F00;
}

style标签

<style type="text/css">
h1 {
	font-size:12px;
	color:#F00;
}
</style>

行内样式：写在标签内部（style中）
内部样式：style标签内部（head中）
外部样式：写在外部的CSS 文件中
内部样式和外部样式的优先级：
1.如果有相同标签，更靠近Body中的HTML优先级更高
2.如果没有。内层标签样式优先级更高

使用style属性引入CSS样式

<h1 style="color:red;">style属性的应用</h1>
<p style="font-size:14px; color:green;">直接在HTML标签中设置的样式</p>

CSS代码写在的

<style>
        h1{color: green; }
</style>

优点
方便在同页面中修改样式
缺点
不利于在多页面间共享复用代码及维护，对内容与样式的分离也不够彻底

CSS代码保存在扩展名为.css的样式表中
HTML文件引用扩展名为.css的样式表，有两种方式
链接式
导入式
链接外部样式表

<head>
  ……
<link href="style.css" rel="stylesheet" type="text/css" />
……
</head>

导入外部样式表

<head>
……
<style type="text/css">
<!--
@import url("style.css");
-->
</style>
</head>

链接式与导入式的区别

标签属于XHTML，@import是属于CSS2.1 使用链接的CSS文件先加载到网页当中，再进行编译显示使用@import导入的CSS文件，客户端显示HTML结构，再把CSS文件加载到网页当中 @import是属于CSS2.1特有的，对不兼容CSS2.1的浏览器是无效的

CSS样式优先级：
行内样式>内部样式表>外部样式表
就近原则

基本语法：

p { font-size:16px;}

基本语法：

.class { font-size:16px;}

基本语法：#id { font-size:16px;}

标签选择器直接应用于HTML标签
类选择器可在页面中多次使用
ID选择器在同一个页面中只能使用一次

基本选择器优先级:
ID选择器>类选择器>标签选择器

关注