当前位置： 移动技术网 > IT编程>网页制作>CSS > HTML学习笔记（一）

HTML学习笔记（一）

2018年04月11日  | 移动技术网IT编程  | 我要评论

创交会,我要久久发广告任务网,彩票投资

一：声明文档类型

　　<!DOCTYPE html>

二：注释方式

　　<!--注释内容-->   快捷键：ctrl+/

三：文档结构　

1 <!DOCTYPE html>
2 <html>
3     <head>
4         ......
5     </head>
6     <body>
7         ......
8     </body>
9 </html>

 四：<head></head>标签内的六大标签

  • link: 链接外部的css和js文件
  • script: 定义页面脚本
  • base: 链接定位，少用
  • title: 定义页面标题
  • style: 定义css内部样式
  • meta: 元信息标签，定义信息给搜索引擎看，告诉它该网页的作用，优化搜索结果，不显示(前期少用）

 五：<body></body>标签内

标签对：

  • 标题<h1>~<h6>：<h1>标题的重要性最高，<h6>标题最低,一个页面只能有一个<h1>，而<h2>~<h6>可以有多个,标题标签<h1>~<h6>是有顺序的
  • 段落<p>：段落与段落之间会自动换行，并且段落与段落之间有一定的空隙
  • 文本格式化：斜体<em>，粗体<strong>，上标sup，下标sub
  • 长文本引用：<blockquote></blockquote>
  • 短文本引用：<q></q>
  • 地址信息：<address></address>
  • 网页需要显示一行代码：<code></code>
  • 网页显示多行代码：<pre></pre>
  • 块元素：<div>行内元素：<span></span>

单标签：

  • 水平线<hr/>
  • 换行<br/>

<br/>换行和<p></p>换行的区别：

  • <p></p> 是分段，会造成段与段之间有空隙
  • <br/>是换行，不会有空隙

六：插入图像：<img>

1 <img src="" alt="" title="" />
2 <!--src:文件地址,alt:图片的描述信息，给搜索引擎看,title:鼠标移动到图片上时显示的文字，给用户看-->

 

七：超链接：<a>

  • 外部链接：
1 <a href="链接地址" target="窗口打开方式">使用超的链接文字</a>
2 <!--窗口打开的方式："_blank": 在新的空白窗口打开；"_self"：在当前窗口打开-->
  • 内部链接：

1.自家网站的网页切换：使用路径定义 如：href="网页3.aspx "

2.锚点链接：（网页的上下内容切换）步骤：

　　01.div设置内容块的id

　　02.在href=" " 中加上#id

  • 链接邮件：

使用方法：href=" mailto : 2763652785@qq.com?subject=邮件主题 & body= 邮件内容 "

注意：mailto后要再加参数，第一个须加上？，此后用&代替。

八：列表：

  • 有序列表

　　　　01. <ol></ol>内定义，列表项是<li></li>

　　　　02. ol和li配合使用，不能独立！不能插入其他标签！

　　　　03. 样式用css控制！！！这里摒弃所有修饰性属性

1 <ol>
2     <li>有序列表项</li>
3     <li>有序列表项</li>
4     <li>有序列表项</li>
5 </ol>

 

  • 无序列表

　　　　01. <ul></ui>内定义，列表项是<li></li>

　　　　02，03同上

1 <ul>
2     <li>无序列表项</li>
3     <li>无序列表项</li>
4     <li>无序列表项</li>
5 </ul>

 

  • 自定义列表

　　　　01.<dl></dl>内定义

　　　　02.<dt></dt> ：要定义的名词

　　　　03.<dd></dd> ：具体解释（dt 和 dd 要交替使用！！！）

1 <dl>
2     <dt>定义名词</dt>
3     <dd>定义描述</dd>
4     ……
5 </dl>

案例效果图：

九：表格

  • 基本结构：
 1 <table>        
 2         <tr>
 3             <td>单元格1</td>
 4             <td>单元格2</td>
 5         </tr>
 6         <tr>
 7             <td>单元格3</td>
 8             <td>单元格4</td>
 9         </tr>
10 </table>

效果：

  • 合并：

1. rowspan=" "（合并“行”）：是td内属性，<td rowspan="跨度的行数">

例子（行）：

2. colspan=“ ”（合并“列”） ：是td内属性，<td colspan="跨度的列数">

例子（列）：

  •  表格结构优化：
 1 <table>
 2     <caption>表格标题</caption>
 3     <!--表头-->
 4     <thead>
 5         <tr>
 6             <th>表头单元格1</th>
 7             <th>表头单元格2</th>
 8         </tr>
 9     </thead>
10     <!--表身-->
11     <tbody>
12         <tr>
13             <td>标准单元格1</td>
14             <td>标准单元格2</td>
15         </tr>
16         <tr>
17             <td>标准单元格1</td>
18             <td>标准单元格2</td>
19         </tr>
20     </tbody>
21     <!--表脚-->
22     <tfoot>
23         <tr>
24             <td>标准单元格1</td>
25             <td>标准单元格2</td>
26         </tr>
27     </tfoot>
28 </table>

 

 

如图：把<table>的结构分割为四部分：caption、thead、tbody、tfoot

caption作为标题，thead表头、tbody表身、tfoot表脚

好处：虽然结构变得复杂了，但会让代码更具有逻辑性，后台更加条理清晰。

 　　　　　　　　　　　　　　　　　　　　　　　　　　2018-04-10　 22:11:09

您可能感兴趣的文章:

如对本文有疑问，请在下面进行留言讨论，广大热心网友会与你互动！！ 点击进行留言回复

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网