html5学习进度_day1

最新推荐文章于 2024-08-17 14:58:02 发布

怪蜀黍777

最新推荐文章于 2024-08-17 14:58:02 发布

阅读量90

点赞数

分类专栏： html 文章标签： html

原文链接：www.php.cn

版权

html 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

style的两种写法：
内联式：

<a href="http://www.baidu.com/" style="color:black;margin-left:20px;">这是一个文本格式化的超链接</a>

内部式：

<head>
<style type="text/css;">
h1 {color:red;}
p {color:blue;}
</style>
</head>

图像的使用：

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

src:URL 指存储图像的位置。如果名为 “…/style/images/boat.gif” 的图像位于 www.php.cn 的 images 目录中，那么其 URL 为 http://www.php.cn/images/boat.gif。
alt:alt 属性用来为图像定义一串预备的可替换的文本。在浏览器无法载入图像时，替换文本属性告诉读者她们失去的信息。此时，浏览器将显示这个替代性的文本而不是图像。

！！！图像这部分知识在PHP中文网无法显示演示例子，使得严重影响阅读者学习体会，应再去w3cschool复习一下

表格：
每个表格从一个 table 标签开始。
每个表格行从 tr 标签开始。
每个表格的数据从 td 标签开始。
表格的表头使用 th 标签进行定义。
eg：

<table>
<tr>
<th>英文</th><th>数字</th>
</tr>
<tr>                   //两行两列 如果想要给表格带边框用<table border="2">
<td>ten</td><td>10</td>//如果使用单元格边距用<table border="1"cellpadding="10">
</tr>                   //borden的数字是调节边框的大小,cellpadding是调节单元格边距，注意配套使用
</table>                //习惯写php要头尾一起写完再写身子<tr></tr>

还有一个单元格间距（nmd上面实在写不下了）：

<table borden="1"cellpadding="10"cellspacing="5">
//单元格间距增加单元格之间的距离。（就是那个框框的宽度），当然也是配套使用 cellspacing

跨两行的表格单元格：

<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>

列表（感觉现在在PHP中文网学的html都是各种标签的实际操作应用的罗列，全是记忆操作~）
无序列表

<body>
<ul>
   <li>第一个列表项</li>//由于是无序列表 每一行列表项前面都带一个黑色的实心小点点
   <li>第二个列表项</li>
   <li>第三个列表项</li>
</ul>
</body>

在 HTML 4中 ul 属性已废弃，HTML5 已不支持该属性，因此我们使用 CSS 代替来定义不同类型的无序列表如下：（md现在才给出正在用的版本，上面怎么不早点告诉）

<ul style="list-style-type:disc"></ul>//实心圆点列表
<ul style="list-style-type:circle"></ul>//空心圆圈列表
<ul style="list-style-type:square"></ul>//实心正方形列表

有序列表

<ol>
   <li>第一个列表项</li>//由于是有序列表 每一行列表项前面都带着相应的序号
   <li>第二个列表项</li>//因为没有在ol中定义起始序号，默认从1开始 
   <li>第三个列表项</li>//也可以通过<ol start="50">这样定义起始序号
</ol>

自定义列表

<dl>                             //自定义列表以 <dl> 标签开始。
<dt>Coffee</dt>                  //每个自定义列表项以 <dt> 开始。
<dd>- black hot drink</dd>       //每个自定义列表项的定义以 <dd> 开始。
<dt>Milk</dt>                    
<dd>- white cold drink</dd>
</dl>                            //自定义列表不仅仅是一列项目，而是项目及其注释的组合。

Coffee

black hot drink

Milk

white cold drink
这种自定义列表不带小黑点点，也不带序号，就是单纯的列表项目加上注释，有点像菜单和英文书签

列表的序号可以多种多样，eg：

<ol></ol> //编号列表
<ol type="A"></ol>//大写字母列表  ABCD
<ol type="a"></ol>//小写字母列表  abccd
<ol type="I"></ol>//（大写）罗马数字列表 ⅠⅡⅢⅣ
<ol type="i"></ol>//小写罗马数字列表 i~这种（后面的打不出来）

格式化：

<b></b>  <strong></strong>//加粗
<i></i>  <em></em>        //斜体

嵌套列表：

<ul>
  <li>Coffee</li>
  <li>Tea
    <ul>
      <li>Black tea</li> //起始感觉就像是目录下的子目录，和一般的无序列表没啥区别
      <li>Green tea      //默认情况这种无序嵌套前面的小标志层次顺序：实心圆圈->空心圆圈->实心方块
        <ul>
          <li>China</li>
          <li>Africa</li>
        </ul>
      </li>
    </ul>
  </li>
  <li>Milk</li>
</ul>

区块：
区块元素：块级元素在浏览器显示时，通常会以新行来开始（和结束）。

eg：<h1> <p> <ul> <table>...
    <div>//如果与 CSS 一同使用，<div> 元素可用于对大的内容块设置样式属性。
         //<div> 元素的另一个常见的用途是文档布局。

内联元素：内联元素在显示时通常不会以新行开始。

eh：<b> <i> <a> <img> <td>...
    <span>//没有特定的含义,当与 CSS 一同使用时，<span> 元素可用于为部分文本设置样式属性。

布局：可以用div进行专业的布局，也可以用table进行布局，但设计表格的目的是呈现表格化数据 - 表格不是布局工具！(就用div就行，牛逼就完事了）
eg：例子

怪蜀黍777

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
html5学习进度_day1

style的两种写法：内联式：<a href="http://www.baidu.com/" style="color:black;margin-left:20px;">这是一个文本格式化的超链接</a>内部式：<head><style type="text/css;">h1 {color:red;}p {color:blue;}&...
复制链接

扫一扫

专栏目录