TML标签:
所有内容都在<html></html>标签之内;
<head></head>内放的是头部信息,是对页面的描述,不会直接显示在页面中。
<head></head>内的<title></title>中设置的是页面的标题,<title></title>只能放在<head></head>中;
<body></body>是页面的主体,大部分显示内容都定义在这里。
HTML注释:<!-- -->:
注释不允许嵌套
html常用标签:
h标签(标题),HTML定义了<h1></h1>到<h6></h6>六个h标签,分别表示不同大小的字体。h1最大,h6最小。
<br/>只是回车,<p>是段落。<p>前后会有比较大的空白,而<br/>则没有。
<center>居中显示.
<b>、<strong>粗体,<i>、<em>斜体。<u>下划线。
<sub>2</sub>下标,如:H<sub>2</sub>O
<sup>2</sup>上标,如:10<sup>2</sup>
<font></font>字体标签,<font color=“red“ size=“7” face=“隶书”>红色</font>。color(设置颜色) size(1-7) face(设置字体,设置字体是注意用户计算机中必须有该字体才能正常显示)
<hr> color size(厚度) width(长度) align=left/center/right (默认为剧中显示)
<pre> 预格式化 保持本色;
HTML特殊字符:<(小于号,less than);>(大于号,greater than); (空格)。
超链接:<a>标签的一些常用属性:href、title、target、name
插入图片:<img src=“路径”/>
列表:dl→(定义列表),ul→(无序列表), ol→(有序列表)。
表格:<table>;创建行:<tr>;创建单元格:<td>;表页眉:<thead>;表主体:<tbody>;表页脚:<tfoot>;表头:<th>。
rowspan(合并行)、colspan(合并列)
<input>是主要的表单元素,type的可选值:submit(提交按钮)、button(普通按钮)、checkbox表单标签:(复选框)、file(文件选择框)、hidden(隐藏字段)、image(图片按钮)、password(密码框)、radio(单选按钮)、reset(重置按钮)、text(文本框)。
meta标签:(包括在head标签中。主要用来描述页面自身信息,元信息)
<meta name="keywords" content="C#学习资料,4k8k.net,.net开发,软件开发,编程自学网"/>
<meta name="description" content="免费更新最新C#相关技术知识,主要包括:.net基础,网页前端,三层架构,SQL数据库..."/>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />网页编码
<meta http-equiv="Refresh" content="3" />三秒钟后刷新此网页。
<meta http-equiv="Refresh" content="3;url=http://www.4k8k.net" />三秒钟后重定向到新网页。
<meta http-equiv="Cache-Control" content="no-cache" /> 禁止浏览器缓存页面。
<meta name="名字" content="值" />关于网页的描述信息。
<meta http-equiv="名字" content="值" />模拟http响应头信息。
C#编程自学_做最好的.net自学资料站_更多文章请访问:http://www.4k8k.net/
欢迎订阅。
SS中的浮动(Floats)、定位(Positioning)和显示(Display)属性是前端工程师掌握页面布局的关键。本文将深入探讨这些属性的工作原理和使用场景,帮助开发者更好地理解和运用它们来构建响应式和精确的网页布局。
浮动是CSS中用于实现元素排列的一种方式,它可以让元素脱离正常的文档流,并可以向左或向右移动,直到它的外边缘碰到包含框或另一个浮动元素的边缘。
.element {
float: left; /* 或者 'right' */
}
.clear-element {
clear: both; /* 可以是 'left', 'right', 或 'both' */
}
定位属性允许你控制元素的位置,它可以是相对于它的正常位置、相对于最近的已定位祖先元素、相对于视口或绝对位置。
.element {
position: static | relative | absolute | fixed | sticky;
}
.relative-element {
position: relative;
top: 10px;
left: 20px;
}
.absolute-element {
position: absolute;
top: 0;
right: 0;
}
.fixed-element {
position: fixed;
bottom: 0;
left: 0;
}
.sticky-element {
position: sticky;
top: 10px;
}
display属性是CSS中最重要的用于控制布局的属性之一,它定义了元素如何显示在页面上。
.element {
display: block | inline | inline-block | flex | grid | none;
}
.block-element {
display: block;
}
.inline-element {
display: inline;
}
.inline-block-element {
display: inline-block;
}
.flex-container {
display: flex;
}
.grid-container {
display: grid;
}
.hidden-element {
display: none;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Float, Position, and Display Example</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="header">
<div class="logo">Logo</div>
<div class="navigation">Navigation</div>
</div>
<div class="main-content">
<div class="sidebar">Sidebar</div>
<div class="content">Content</div>
</div>
<div class="footer">Footer</div>
<div class="fixed-element">Fixed Element</div>
</body>
</html>
/* Reset some default styles */
body, h1, p {
margin: 0;
padding: 0;
}
/* Header styles */
.header {
background-color: #f8f8f8;
border-bottom: 1px solid #e7e7e7;
padding: 10px;
overflow: hidden; /* Clearfix for floated elements */
}
.logo {
float: left;
font-size: 24px;
}
.navigation {
float: right;
font-size: 18px;
}
/* Main content styles */
.main-content {
padding: 20px;
}
.sidebar {
float: left;
width: 200px;
background-color: #ddd;
padding: 10px;
}
.content {
margin-left: 220px; /* Make space for the sidebar */
background-color: #eee;
padding: 10px;
}
/* Footer styles */
.footer {
background-color: #f8f8f8;
border-top: 1px solid #e7e7e7;
text-align: center;
padding: 10px;
position: relative; /* For demonstration purposes */
top: 20px; /* Move the footer down a bit */
}
/* Fixed element styles */
.fixed-element {
position: fixed;
bottom: 10px;
right: 10px;
padding: 5px 10px;
background-color: #333;
color: #fff;
z-index: 1000; /* Ensure it stays on top */
}
/* Clearfix hack */
.clearfix::after {
content: "";
clear: both;
display: table;
}
在这个例子中,我们创建了一个包含头部、侧边栏、主要内容和页脚的基本布局。我们使用浮动来对齐头部的Logo和导航,以及创建一个侧边栏。我们还使用了相对定位来稍微下移页脚,并使用固定定位为页面添加了一个始终可见的固定元素。最后,我们使用了overflow: hidden;来清除头部中浮动元素的影响。
浮动、定位和显示属性是CSS中构建复杂布局的强大工具。通过深入理解和正确应用这些属性,前端工程师可以创建出既美观又功能强大的网页。随着Web标准的不断发展,我们也需要不断学习和适应新的CSS特性,以保持我们技能的前沿性。
格是页面中常见的一中标签,通常是用来数据展示的,而不是用来布局。
<table>
<tr>
<td>单元格内的文字</td>
...
</tr>
...
</table>
设置表格的外观样式
<table border=1>
<tr>
<th>姓名</th>
<th>性别</th>
<th>电话</th>
</tr>
<tr>
<th>张三</th>
<td>女</td>
<td>18611110000</td>
</tr>
<tr>
<th>李四</th>
<td>男</td>
<td>18711110000</td>
</tr>
<tr>
<th>王五</th>
<td>男</td>
<td>18811110000</td>
</tr>
</table>
表格标题标签,为表格添加标题,跟随表格的位置而移动。设置标题,我们用的是caption标签。
<table border="1">
<caption style="text-align:left">My savings</caption>
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
<tr>
<td>January</td>
<td>0</td>
</tr>
</table>
将标题定位在表格的左|右|上|下位置。
跨行合并 rowspan=“合并单元格的个数”
跨列合并 colspan=“合并单元格的个数”
合并顺序:先上后下,先左后右
...
姓名 | 张三 | 性别 | 李四 | 照片 |
家庭住址 | 张三 | 性别 | 李四 | 照片 |
```
(1)先确定是跨行还是跨列合并
(2)根据先上后下,先左后右的原则,找到目标单元格,写上合并方式(rowspan/colspan)和要合并的单元格数量
(3)删除多余的单元格
表格的结构划分,使用thead、tbody 、tfoot 三种标签
<table border="1">
<thead>
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
</thead>
<tfoot>
<tr>
<td>Sum</td>
<td>0</td>
</tr>
</tfoot>
<tbody>
<tr>
<td>January</td>
<td>0</td>
</tr>
<tr>
<td>February</td>
<td></td>
</tr>
</tbody>
</table>
(1) 元素内部必须包含一个或者多个 标签。
(2) thead, tbody, 和 tfoot 元素默认不会影响表格的布局。用途主要是可以使用 CSS 来为这些元素定义样式,从而改变表格的外观。
*请认真填写需求信息,我们会在24小时内与您取得联系。