HTML初学 - CSS、一些标签以及布局

丶柒染丶

于 2019-12-27 18:03:17 发布

阅读量91

点赞数

本文链接：https://blog.csdn.net/weixin_44425058/article/details/103735698

版权

HTML样式-CSS

CSS (Cascading Style Sheets) 用于渲染HTML元素标签的样式

CSS嵌入HTML方式：

内联样式：在HTML元素中使用"style" 属性

<h1 style="font-family:verdana;text-align:center;">一个居中标题</h1>
<p style="font-family:arial;color:red;font-size:20px;">一个段落。</p>

现在通常使用font-family（字体），color（颜色），和font-size（字体大小）属性来定义文本样式，使用 text-align（文字对齐）属性指定文本的水平与垂直对齐方式

内部样式表：在HTML文档头部 <head> 区域使用<style> 元素来包含CSS
当单个文件需要特别样式时，就可以使用内部样式表。你可以在<head> 部分通过 <style>标签定义内部样式表:

<head>
<style type="text/css">
body {background-color:yellow;}
p {color:blue;}
</style>
</head>

外部引用：使用外部 CSS 文件（最优方式）
当样式需要被应用到很多页面的时候，外部样式表将是理想的选择。使用外部样式表，你就可以通过更改一个文件来改变整个站点的外观。

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

图像

在 HTML 中，图像由<img> 标签定义。<img> 是空标签，意思是说，它只包含属性，并且没有闭合标签。要在页面上显示图像，你需要使用源属性（src）。src 指 “source”。源属性的值是图像的 URL 地址。

<img src="url" alt="some_text">

URL 指存储图像的位置。alt 属性用来为图像定义一串预备的可替换的文本。

height（高度）与 width（宽度）属性用于设置图像的高度与宽度。属性值默认单位为像素:

<img src="pulpit.jpg" alt="Pulpit rock" width="304" height="228">

表格

表格由 <table> 标签来定义。每个表格均有若干行（由 <tr> 标签定义），每行被分割为若干单元格（由 <td> 标签定义）。字母 td 指表格数据（table data），即数据单元格的内容。数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等。

<table border="1">
    <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>

运行结果：

border="1"表示表格有边框。
表格的表头用<th>表示：

<table border="1">
    <tr>
        <th>Header 1</th>
        <th>Header 2</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>

运行结果：

带有标题的表格：

<table border="1">
  <caption>Monthly savings</caption>
  <tr>
    <th>Month</th>
    <th>Savings</th>
  </tr>
  <tr>
    <td>January</td>
    <td>$100</td>
  </tr>
  <tr>
    <td>February</td>
    <td>$50</td>
  </tr>
</table>

单元格跨行或跨列：

<h4>单元格跨两列:</h4>
<table border="1">
<tr>
  <th>Name</th>
  <th colspan="2">Telephone</th>
</tr>
<tr>
  <td>Bill Gates</td>
  <td>555 77 854</td>
  <td>555 77 855</td>
</tr>
</table>

<h4>单元格跨两行:</h4>
<table border="1">
<tr>
  <th>First Name:</th>
  <td>Bill Gates</td>
</tr>
<tr>
  <th rowspan="2">Telephone:</th>
  <td>555 77 854</td>
</tr>
<tr>
  <td>555 77 855</td>
</tr>
</table>

设置单元格边距：
创建单元格内容与其边框之间的空白

<table border="1" cellpadding="10">

设置单元格间距：
设置单元格之间的距离

<table border="1" cellspacing="10">

列表

有序列表

<ol>
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ol>

<ol start="50">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ol>

运行结果：
１.Coffee
２.Tea
３.Milk

５０.Coffee
５１.Tea
５２.Milk
设置大写字母列表：<ol type="A"></ol>
设置小写字母列表：<ol type="a"></ol>
设置罗马数字列表：<ol type="I"></ol>
设置小写罗马数字列表：<ol type="i"></ol>

无序列表

<ul>
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ul>

运行结果：

Coffee
Tea
Milk
圆点列表：<ul style="list-style-type:disc"></ul>
圆圈列表：<ul style="list-style-type:circle"></ul>
方形列表：<ul style="list-style-type:square"></ul>
定义列表
自定义列表不仅仅是一列项目，而是项目及其注释的组合。自定义列表以 <dl> 标签开始。每个自定义列表项以 <dt> 开始。每个自定义列表项的定义以 <dd> 开始。

<dl>
<dt>Coffee</dt>
<dd>- black hot drink</dd>
<dt>Milk</dt>
<dd>- white cold drink</dd>
</dl>

运行结果：
Coffee
-black hot drink
Milk
-white cold drink

区块

HTML 可以通过 <div> 和 <span>将元素组合起来。
区块元素：块级元素在浏览器显示时，通常会以新行来开始（和结束）：<h1>, <p>, <ul>, <table>等
内联元素：内联元素在显示时通常不会以新行开始：<b>, <td>, <a>, <img>等

HTML <div> 元素是块级元素，它可用于组合其他 HTML 元素的容器。
<div> 元素没有特定的含义。除此之外，由于它属于块级元素，浏览器会在其前后显示折行。
如果与 CSS 一同使用，<div> 元素可用于对大的内容块设置样式属性。
<div> 元素的另一个常见的用途是文档布局。它取代了使用表格定义布局的老式方法。使用 <table>元素进行文档布局不是表格的正确用法。<table> 元素的作用是显示表格化的数据。
HTML <span> 元素是内联元素，可用作文本的容器
<span> 元素也没有特定的含义。
当与 CSS 一同使用时，<span> 元素可用于为部分文本设置样式属性。

丶柒染丶

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
HTML初学 - CSS、一些标签以及布局

HTML样式-CSSCSS (Cascading Style Sheets) 用于渲染HTML元素标签的样式CSS嵌入HTML方式：内联样式：在HTML元素中使用"style" 属性<h1 style="font-family:verdana;text-align:center;">一个居中标题</h1><p style="font-family:ari...
复制链接

扫一扫