html

最新推荐文章于 2024-01-31 18:15:24 发布

zyznb2

最新推荐文章于 2024-01-31 18:15:24 发布

阅读量70

点赞数

文章标签： html

本文链接：https://blog.csdn.net/zyznb2/article/details/112634433

版权

html

一.概念

Hyper Text Markup Language 超文本标记语言，是最基础的网页开发语言
 * 超文本：
 	1.网页中包含超链接，可以从一个页面跳转到另一个页面
 	2.网页中不仅仅是文本，还可以包含图片，音频，视频，超链接等元素
 * 标记语言：
 	1.由标签构成的语言，<标签名称>，如<html>
 	2.标记语言不是编程语言

二.基本语法

授课思路：
先写一个基本的html网页,再来总结出下面的规律。

1.html文件是以.html作为后缀名
2.标签分为：
	*围堵标签：有开始和结束标签。如<html></html>
	*自闭标签：开始标签和结束标签合为一体。如<br/>
3.标签需要正确嵌套：
	*正确嵌套：<html><body></body></html>
	*错误嵌套：<html><body></html></body> 不能你中有我，我中有你
4.在开始标签中可以定义属性，属性是由键值对构成，值需要使用引号（单双都可以）引起来
5.html的标签不区分大小写，但是建议小写。

三.常用标签

文件标签：构成html最基本的标签
- html :根标签
- head :头标签，用于指定html文档的一些属性，引入外部的资源
- title : 标题标签
- body：体标签，文档内容展示的主体
- 文档类型声明标签
```
<!DOCTYPE html>  用于声明当前文档是一个html文档
```
文本标签：和文本有关的标签
- 注释：
- h1~h6：标题标签，字体逐渐变小
- p: 段落标签，包裹、修饰一段文字
- br：换行标签
- hr : 水平线标签
  - 属性：
  - color:颜色
  - width:宽度
  - size: 高度
  - align:对其方式
    - center:居中
    - left:左对齐
    - right：右对齐
- b:字体加粗
- i :斜体
- font:文字标签
- center:文本居中
  - 属性：
  - color:颜色
  - size：大小
  - face：字体
```
属性的使用：
* color:
	1.英文单词：red ,blue ,green
	2.rgb(值1，值2，值3)，值的范围：0-255 。如 rgb(0,0,255)
	3.#值1值2值3 .值的范围：00~FF ,如：#ff00ff
* width:
	1.数值：width='20',单位默认是px (像素)
	2.百分比：占比相对于父元素的比例 。如 width='80%'
```
图片标签
- img :用于展示图片
  - src 属性:指定图片的位置
- ```
<img src="image/a.jpg" align="center" alt="白冰" width="300" height="300">
```
- 相对路径：从当前的html文件出发，去寻找其它资源
  - …/ ：表示上一级目录
  - 同一级和下一级就直接路径名
列表标签
- 有序列表
  - ol
  - li
- 无序列表
  - ul
  - li
- 自定义列表
  - dl
  - dt
  - dd
链接标签
- a:定义一个超链接
- 属性：
  - href:指定访问资源的路径
  - target:指定浏览器打开资源的方式
    - _self : 默认值，当前页面打开
    - _blank：在空白页打开
div和span
- div:每个div占满一整行。属于块级标签
- span:纯粹的文本标签，多个span标签之间没有换行。属于行内标签、内联标签
语义化标签：为了提高程序的可读性
- header: 页眉
- footer: 页脚

四.表格标签

table:定义表格
- width:宽度
- border:边框
- cellpadding:定义内容和单元格的距离
- cellspacing:定义单元格之间的距离，通常指定为0
- bgcolor:背景色
- align:对齐方式
tr :定义行
- bgcolor:背景色
- align:对齐方式
td:定义单元格
- colspan:合并列
- rowspan:合并行
th:定义表头单元格
caption:表格标题
thead:表格的头部分
tbody:表格的体部分
tfoot:表格的脚部分

五.表单标签

概念：用于采集用户输入的数据。用于和服务器进行交互。
form:用于定义一个表单。可以定义一个采集用户数据的范围。
属性：
- action:指定提交数据的url(路径)
- method:指定提交方式
  - get:
    1. 请求参数会在地址栏中显示，不太安全
    2. 请求参数大小是有限制的
  - post:
    - 请求参数不会在地址栏中显示，较为安全
    - 请求参数没有大小限制
- 表单项中的数据要想被提交，必须指定其name属性。

表单项标签

input:可以通过type属性值，改变元素展示的样式
- type属性：
  - text:文本输入框，默认值
    - placeholder:指定输入框的提示信息，当输入框的内容发生变化，会自动清空提示信息。
  - password:密码输入框
  - radio：单选框
    - 注意：
      1. 要想让多个单选框实现单选的效果，则多个单选框的name属性必须一样。
      2. 一般会给每一个单选框提供value属性，指定其被选中后提交的值
      3. checked属性可以指定默认值。
  - checkbox:复选框
    - 注意：
      1. 一般会给每个复选框提供value值，指定其被选中后提交的值。
      2. checked属性，可以指定默认值。
  - file：文件选择框
  - hidden：隐藏域，可用于提交参数信息
  - 按钮：
    - button：普通按钮
    - submit：提交按钮，可以提交表单
    - image：图片提交按钮
      - src属性指定图片的路径
label:指定输入项的文字描述信息
- 注意：
  - label的for属性一般会和input的id属性值对应。如果对应了，则点击label区域，会让input输入框获取焦点。
select:下拉框
- 子元素：option，指定列表项
textarea：文本域
- cols:指定列数，每一行有多少个字符
- rows:默认多少行