HTML 基础知识总结

来源：互联网发布：ubuntu 16.04 samba 编辑：程序博客网时间：2024/05/22 00:30

一、HTML基本概念

含义：
- 一种文件格式；
- HTML：’H’yper ‘T’ext ‘M’arkup ‘L’anguage 超文本标记语言；
- 标记语言，一套预定义的标签；
- 网络语言；
  　　总体来说，HTML就是用于网络的一种标记语言，在文件系统中以独立的HTML格式文件存在。
标签
- 开始标签结束标签（元素：标签构成HTML的一部分）
```
开始标签 结束标签<html> </html>
```
- 自封闭标签
```
<img/>、<br/>、<input/>
```
属性
- 概念：辅助性的，跟在开始标签后在标签内的，对标签进行辅助性设置
  <table border="1px" bordercolor="red"></table>
- 一个属性只有一个属性值
- 一个标签可有多个属性

HTML是纯文本

<html><!--`head`描述整个网页的一些信息`title``meta``link``style` `script`--><head>    <title>我的第一个HTML页面</title></head><!--`body`显示内容--><body>    <h1>Holle World!</h1></body></html>

嵌套： head 和 body 是html 的子标签；
并列：head 和 body 是并列的；

两种类型的元素
- 块级元素：独占一行，
  ；
- 行内元素：挤到一行，a、img链接和图片；
标签
- <a></a>标签：
  - href 属性：要跳转的网址，指定超链接目标的URL；
  - target属性：目标。如何打开网址：target=”_blank”打开新标签显示页面；
- img标签：
  - alt 属性：图片不能加载时在页面显示图片信息；
  - title 属性：当鼠标移动到图片时显示一个提示，鼠标离开就没有；
- text格式化
  - b标签<b></b>：加粗；
  - i标签<i></i>：斜体；
  - ins标签<ins></ins>插入：下划线；
  - del标签<del></del>删除：中划线；
  - sup标签<sup></sup>上标；
  - sub标签<sub></sub>下标；
- style
```
style="background-color:blue;color:white;font-family:'微软雅黑';font-size:23px"
```
  - bakground-color属性：背景颜色；
  - color属性：字体颜色；
  - font-family属性：字体；
  - font-size属性：字体尺寸；
  - text-align属性：文本对齐方式；
- table表格
```
<table border="1 solid blue" cellspacing="0"><tr>    <td>A1</td>    <td>B1</td>    <td>C1</td></tr><tr>    <td>A2</td>    <td>B2</td>    <td>C2</td></tr></table>
```
- tr标签：行；
- td标签：列；
- border属性：边框距离；
- th标签：表头；
- colspaan属性：占n列；
- rowspan属性：占n行；（那n-1行数据不要）
- cellspacing属性：来指定单元格内容与单元格边界之间的空白距离的大小；
  　　每个表格由table标签开始；表格行由tr标签开始；每个表格数据由td标签开始；

列表

无序列表：ul；
```
<ul>    <li></li></ul>
```
有序列表：ol；
```
<ol>    <li></li></ol>
```
定义列表：dl;
```
<dl>    <dt></dt>    <dd></dd></dl>
```

div和span：div为块级元素，span为行级元素；
HTML表单
- 概念：用于收集不同类型的用户输入；
- from表单标签：
  - action属性：提交地址；
  - method属性：提交方法；
    - ”get”属性值：获取服务器数据；
    - “post”属性值：向服务器上传数据；
- input输入标签：
  - type类型属性：
    - ”text”属性值：文本框；
    - “submit”属性值：按钮，value改值；
    - “radio”属性值：单选框，name（相同设置为单选）；
    - “checkbox”属性值：多选框；
    - “password”属性值：密码框；
  - label标签：
    - for=”(ID)”
```
<label for="music">音乐<input type="radio" name="lab" id="music" value="music" /></label>
```
      　　让文字与控件联系在一起用”for”属性将label与另一个元素绑在一起，”for”属性值应该和相关的元素”id”属性值相同。
- select下拉/选择框：
  - option设置下拉框数据；
- textarea文本域：name、rows、cols；

阅读全文

0 0