博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
HTML教程
阅读量:4697 次
发布时间:2019-06-09

本文共 2085 字,大约阅读时间需要 6 分钟。

HTML定义

超文本标记语言(英语:HyperText Markup Language,简称:HTML)是一种用于创建网页的标准标记语言。

HTML简介

HTML实例

网页中需要展示出来的内容都在<body>标签中,整体结构如下:

      

.....

........

实例如下:

菜鸟教程(runoob.com)

我的第一个标题

我的第一个段落。

  • <!DOCTYPE html>:表示为HTML5文档,这个声明不区分大小写
  • <html>:是HTML页面的根元素
  • <head>元素包含了文档的元<meta>数据
  • <title>元素表示文档的标题
  • <body>元素包含了可见的页面内容
  • <h1>元素定义了一个大标题
  • <p>元素定义了一个段落
  • <meta charset="utf-8">:可以使得输出中文时正常显示
  • <q>:表示引用
  • <br/>:换行符,回车在html文件中是无效的
  • &nbsp;:空格符号
  • <hr/>:横线
  • <code>:代码,<pre>:多行代码

HTML 元素语法

  • HTML 元素以开始标签起始
  • HTML 元素以结束标签终止

HTML 属性

  • HTML 元素可以设置属性
  • 属性可以在元素中添加附加信息
  • 属性一般描述于开始标签
  • 属性总是以名称/值对的形式出现,比如:name="value"

HTML 链接 由 标签定义。链接的地址在 href 属性中指定:

这是一个链接

标签 描述
定义 HTML 文档
定义文档的主体
定义 HTML 标题
定义水平线
定义注释

HTML 文本格式化标签

标签 描述
定义粗体文本
定义着重文字
定义斜体字
定义小号字
定义加重语气
定义下标字
定义上标字
定义插入字
定义删除字

HTML 链接语法

标签<a>加上属性href

百度

如果需要在新标签中打开网页,需要加上:target="_blank"

百度

邮件语法

在连接中使用mailto,第一个符号使用分隔,后面用&分隔

发送按钮

表格实例

table标签开始,然后用tbody使表可以加载多少显示多少,th:table head表示表头,tr表示table row表行,td表示table data单元格

加入边框的方式有2种;第一种是直接加入border 属性,第二种是在<head>标签中加入style标签,具体如下:

表格标题caption

表格摘要用属性表示,<table summary=“xxxxx”

row 1, cell 1 row 1, cell 2
row 2, cell 1 row 2, cell 2

表格标签是<tr>,每一个单元格的标签是<td>,边框的属性是border

HTML无序列表

无序列表是一个项目的列表,此列项目使用粗体圆点(典型的小黑圆圈)进行标记。

  • 无序列表使用
    • 标签,每个列表项始于
    • 标签。
    • Coffee
    • Milk
    • 有序列表始于
      1. 标签。每个列表项始于
      2. 标签。
    1. Coffee
    2. Milk

    图片

    图片使用<img sec="sss.jpg">来表示,如果要改变鼠标滑过时的文字,加入title属性

    HTML 表单

    表单用于把用户输入的数据传送到服务端

    表单语法

    语法:

    1.<form> :<form>标签是成对出现的,以<form>开始,以</form>结束。

    2.action :浏览者输入的数据被传送到的地方,比如一个PHP页面(save.php)

    3.method 数据传送的方式(get/post)。

    输入大段多行文字

    用到texarea

    复选框

    ratio:圆框

    checkbox:方框

    如果要做到单选效果,就需要名字相同

    语法:

    下拉框

    select标签,每个选项使用<option>标签

    value为向系统提交的值,后面的文字为显示的内容

    • 提交按钮:<input type="submit" value="提交"/>
    • 重置按钮:<input type="reset" value="重置">

    label

    <label>:作用是点击文字时也可以选定复选框,不需要移动到框那里

转载于:https://www.cnblogs.com/drawon/p/8520493.html

你可能感兴趣的文章