html+css

最新推荐文章于 2024-08-01 17:19:00 发布

ao47269

最新推荐文章于 2024-08-01 17:19:00 发布

阅读量83

点赞数

文章标签：嵌入式

原文链接：http://www.cnblogs.com/yuyuanwen/p/10828062.html

版权

1.页面基础元素：<html>
<html>是页面的基础元素，主要用来定义页面的开始和结束部分。元素语法结构如下<html>....</html>（开头标记为<>,结束标记为</html>）先介绍一下完整的HTML文件的基本结构

<html> 文件开始标记

<head> 文件头开始标记

......... 文件头部分的内容

</head> 文件头结束标记

<body> 文件主体开始标记

......... 文件主题部分的内容

</head> 文件主题结束标记

</html> 文件结束标记

2.基本标签

①头部元素：<head></head>

②标题元素 <title></title>

③超链接 <a href=" "></a>

④标题标签 <h1></hi1>
3.

<span></span> 无语义，标识作用
<br/>换行
&nbsp空格
<hr/>横线
<address></address>地址，斜体格式
<pre></pre>加一段代码
<ul>
<li></li>无序列表
</ul>

<ol>
<li></li>有序列表
</ol>

<div></div> 块

<table>
<tr>
<th></th>
<td></td>
</tr>
</tbody>
</table>

<style type="text/css"></style>

<a href="目标连接" title="" target="">链接显示的文本</a> 其中target=""表示打开的网页在新的标签页打开

<img src="图片链接" alt="图片加载失败时显示的文字" title="鼠标滑过图片时显示的文字">

<form method="post/get" action="数据被传送到的地方">
<input type="password" name="pass"/> 密码框
<textarea cols="50" rows="30">在这里输入内容</textarea> 介绍框
<input type="radio" value="值" name="somename" checked="checked"/> 单选框
<input type="checkbox" value ="值" name="somename" checked="checked"> 复选框
<select>/<select multiple="multiple">
<option value="值">显示的值</option>
<option value="值" selected = "selected">显示的值</option>
</select>
<input type="submit" value="确定" name="submit"/>
<input type="reset" value="重置" name="reset"/>
</form>
3.

<span class="name"></span>
.name{CSS样式}
<span id="name"></span>//一个名字只允许使用一次
#name{CSS样式}
子选择器 >
.first>secod{CSS样式}//只能是第一代子标签
后代选择器（空格）
.father child{CSS样式}
通用选择器 *
伪类选择器：
例如 a:hover{color:red}
鼠标滑过显示红色
分组选择器
h,span{color:red}

CSS样式分为内联式、嵌入式、外部式
内联式：<p style="color:red"></p>
嵌入式：<style type="text/css"></style>
外部式：<link href="base.css" rel="stylesheet" type="text/css">
优先级：内联式>嵌入式>外部式
CSS样式权重：
标签权值为1
class选择器为10
id选择器为100
设置最高权值!important

盒子模型：
div{padding:1px 2px 1px 2px}//上，右，下，左
div{padding:1px}//全部
div{padding:1px 2px}//上下，左右

CSS布局模型
1）浮动模型（float）
可以实现块状元素在同一行
div{float:left/right}
2）
有三种定位方式：
绝对定位：position:absolute
相对定位：position:relative
固定定位：position:fixed
div{position:relative;
top:50px;
left:50px;}//相对于原位置向下向右移动50px，但偏离前的位置保持不变
div{
position:absolute;
top:50px;
left:50px;}//定位于父块距上和左50px

div{position:fixed;
bottom:0;
right:0;
}//定位于窗口

假设父块box1,和子块box2,要使得box2相对于box1定位，需要在box1设置position:relative,box2中设置position:absolute

文字排版-字体设置body{font-family:"Microsoft Yahei";} 将字体设置为微软雅黑

文字排版-粗体
p span{font-weight:bold;} 将span指向的元素设置为粗体
下划线
p a{text-decotation:underline;} 将a标签下划线去掉

段落排版-对齐
h1{text-align:center/left/right;} /*设置块状元素为居中/居左/居右*/

转载于:https://www.cnblogs.com/yuyuanwen/p/10828062.html

ao47269

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
html+css

1.页面基础元素：<html><html>是页面的基础元素，主要用来定义页面的开始和结束部分。元素语法结构如下<html>....</html>（开头标记为<>,结束标记为</html>）先介绍一下完整的HTML文件的基本结构<html> 文件开始标记<head>...
复制链接

扫一扫