关于html、css那些事
html :不是一种编程语言、而是一种标记语言、
html:是通过 <h1> - <h6> 等标签进行定义的
例如:
<h1>This is a heading</h1> <h2>This is a heading</h2> <h3>This is a heading</h3>
html 段落是通过 <p> 标签进行定义的、
这个 <p> 元素定义了 HTML 文档中的一个段落。
这个元素拥有一个开始标签 <p>,以及一个结束标签 </p>。
例如:
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
html 链接是通过 <a> 标签进行定义的
例如:
<a href="http://www.w3school.com.cn">This is a link</a>
html 图像是通过 <img> 标签进行定义的
<img src="w3school.jpg" width="104" height="142" />
<body> 元素定义了 HTML 文档的主体。
这个元素拥有一个开始标签 <body>,以及一个结束标签 </body>。
元素内容是另一个 HTML 元素(p 元素)。
列表定义
<p>无序列表</p>
<ui>
<li>编写文件</li>
</ui>
<p>有序列表</p>
<ol>
<li>编写文件</li>
</ol>
<p>定义列表</p>
<dl>
<dt>猫</dt>
<dd>一个奴役自己的动物</dd>
</dl>
表格
表格由 <table> 标签来定义。每个表格均有若干行(由 <tr> 标签定义),每行被分割为若干单元格(由 <td> 标签定义)表格的表头使用 <th> 标签进行定义
例如:
<table border="1">
<tr>
<th>Heading</th>
<th>Another Heading</th>
</tr>
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
</tr>
<tr>
<td>row 2, cell 1</td>
<td>row 2, cell 2</td>
</tr>
</table>
CSS 语法
CSS 规则由两个主要的部分构成:选择器,以及一条或多条声明
id 选择器
id 选择器可以为标有特定 id 的 HTML 元素指定特定的样式。
id 选择器以 "#" 来定义
注意:id 属性只能在每个 HTML 文档中出现一次
和 id 一样,class 也可被用作派生选择器
外部样式表
当样式需要应用于很多页面时,外部样式表将是理想的选择。在使用外部样式表的情况下,你可以通过改变一个文件来改变整个站点的外观。每个页面使用 <link> 标签链接到样式表。<link> 标签在(文档的)头部:
<head> <link
rel="stylesheet" type="text/css" href="mystyle.css
" /> </head>
当单个文档需要特殊的样式时,就应该使用内部样式表。你可以使用 <style> 标签在文档头部定义内部样式表,就像这样:
<style type="text/css">
</style>
a:link - 普通的、未被访问的链接
a:visited - 用户已访问的链接
a:hover - 鼠标指针位于链接的上方
a:active - 链接被点击的时刻
要修改用于列表项的标志类型,可以使用属性 list-style-type:
表格宽度和高度
通过 width 和 height 属性定义表格的宽度和高度。
table
{width:100%;
}
th
{height:50px;
}
text-align 属性设置水平对齐方式,比如左对齐、右对齐或者居中
vertical-align 属性设置垂直对齐方式,比如顶部对齐、底部对齐或居中对齐

元素框的最内部分是实际的内容,直接包围内容的是内边距。内边距呈现了元素的背景。内边距的边缘是边框。边框以外是外边距,外边距默认是透明的,因此不会遮挡其后的任何元素
内边距、边框和外边距都是可选的,默认值是零。但是,许多元素将由用户代理样式表设置外边距和内边距。可以通过将元素的 margin 和 padding 设置为零来覆盖这些浏览器样式。这可以分别进行,也可以使用通用选择器对所有元素进行设置:
* {
margin: 0;
padding: 0;
}

#box {
width: 70px;
margin: 10px;
padding: 5px;
}
在 CSS 中,我们通过 float 属性实现元素的浮动。
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步