前端基础之html


html是什么

  • 超文本标记语言(Hypertext Markup Language,HTML)通过标签语言来标记要显示的网页中的各个部分。一套规则,浏览器认识的规则

  • 浏览器按顺序渲染网页文件,然后根据标记符解释和显示内容。但需要注意的是,对于不同的浏览器,对同一标签可能会有不完全相同的解释(兼容性)

  • 静态网页文件扩展名:.html 或 .htm

  • HTML 不是一种编程语言,而是一种标记语言 (markup language)

    HTML 使用标记标签来描述网页

html结构

  
 
 
 
网页标题 
 
 
 
 
网页正文内容
 
 
  • 告诉浏览器使用什么样的html或者xhtml来解析html文档
  • 是文档的开始标记和结束标记。此元素告诉浏览器其自身是一个 HTML 文档,在它们之间是文档的头部和主体。
  • 元素出现在文档的开头部分。与之间的内容不会在浏览器的文档窗口显示,但是其间的元素有特殊重要的意义。
  • 定义网页标题,在浏览器标题栏显示。 
  • 之间的文本是可见的网页主体内容

html标签格式

html常用标签

1  html标题

  

to

  : n的取值范围是1~6; 从大到小. 用来表示标题.


"en">

    "UTF-8">
    "x-ua-compatible" content="IE=edge">
    "viewport" content="width=device-width, initial-scale=1">
    Title


AAA

AAA

AAA

AAA

AAA
AAA
html标题

结果如下:

2  html水平线



"en">

    "UTF-8">
    "x-ua-compatible" content="IE=edge">
    "viewport" content="width=device-width, initial-scale=1">
    Title


AAA


html水平线

结果如下:

3  html注释

注释并不会显示在网页上


"en">

    "UTF-8">
    "x-ua-compatible" content="IE=edge">
    "viewport" content="width=device-width, initial-scale=1">
    Title


BBB


html注释

结果如下:

4  html段落

以及段落换行

: 段落标签. 包裹的内容被换行.并且也上下内容之间有一行空白.

 当显示页面时,浏览器会移除源代码中多余的空格和空行。所有连续的空格或空行都会被算作一个空格。需要注意的是,HTML 代码中的所有连续的空行(换行)也被显示为一个空格。


"en">

    "UTF-8">
    "x-ua-compatible" content="IE=edge">
    "viewport" content="width=device-width, initial-scale=1">
    Title


hello world

hello world

段落标签

显示结果如下:


"en">

    "UTF-8">
    Title


hello world

hello
world


段落换行用

显示结果:

5  html文本格式化

6  html超链接

比较重要的属性有两个,分别是href、target

href指定超链接地址

target指定打开方式

  _blank  新页面打开


"en">

    "UTF-8">
    Title


hello world

"http://www.baidu.com">百度
超链接

显示结果如下,点击 百度 跳转到 百度网页。

7  html的图像

使用格式:

  alt  定义当图片无法加载时,显示什么信息

  width 定义宽度,单位可以为像素  也可以为百分比

  height 定义高度

  title: 鼠标悬浮时的提示信息.


"en">

    "UTF-8">
    "x-ua-compatible" content="IE=edge">
    "viewport" content="width=device-width, initial-scale=1">
    Title


hello world

"http://www.baidu.com">"1.jpg",alt="logo",title="windows7 logo"/>
img

src:

8  html的表格

表格由

来定义,每行 有许多单元格
。表头可以使用

标签属性:

  border  定义边框

中可以嵌入     定义行

  

 
等标签

  

   定义表头

    colspan  定义表头单元格可以横跨的列数。

    rowspan  定义表头单元格横跨的行数

    heardes  定义与表头单元格相关联的一个或者多个单元格。(html5新增)   

  

   定义单元格

    colspan  定义单元格可以横跨的列数。

    rowspan  定义单元格横跨的行数

    heardes  定义与单元格相关联的一个或者多个单元格。(html5新增)  

  border: 表格边框. cellpadding: 内边距 cellspacing: 外边距. width: 像素 百分比.(最好通过css来设置长宽)


"en">

    "UTF-8">
    "x-ua-compatible" content="IE=edge">
    "viewport" content="width=device-width, initial-scale=1">
    Title


"1px">
    
"2" >name "2">list
"name">first name "name">last name
table表格

结果如下:

另外,若某个单元格为空,浏览器可能无法显示出这个单元格的边框。为了防止这种情况,可以在该单元格加一个空格占位符 

9  html列表

      列表分为

        无序列表

          有序列表

          列表项内部可以使用段落、换行符、图片、链接以及其他列表等等

          
          "en">
          
              "UTF-8">
              "x-ua-compatible" content="IE=edge">
              "viewport" content="width=device-width, initial-scale=1">
              Title
          
          
          
          • male
          • female

          1. male
          2. female
          无序和有序列表

          结果如下:

          10  html表单

          表单是一个包含表单元素的区域。

          表单元素是允许用户在表单中(比如:文本域、下拉列表、单选框、复选框等等)输入信息的元素

          中的属性:

            action:后面加url  指定当提交表单时向何处发送表单数据

            method:get/post两个值,get为明文  post为加密

            name:指定表单的名称

            target:_blanket  _self  _parent  _top 指定网页打开方式

            标签中较为常用的标签有  系列标签

          <1> 表单类型
          type: text 文本输入框 password 密码输入框 radio 单选框 checkbox 多选框 submit 提交按钮 button 按钮(需要配合js使用.) button和submit的区别? file 提交文件:form表单需要加上属性enctype="multipart/form-data" 上传文件注意两点: 1 请求方式必须是post 2 enctype="multipart/form-data"
          <2> 表单属性
          name: 表单提交项的键. 注意和id属性的区别:name属性是和服务器通信时使用的名称; 而id属性是浏览器端使用的名称,该属性主要是为了方便客户端编程,而在css和javascript中使用的 value: 表单提交项的值.对于不同的输入类型,value 属性的用法也不同: type="button", "reset", "submit" - 定义按钮上的显示的文本 type="text", "password", "hidden" - 定义输入字段的初始值 type="checkbox", "radio", "image" - 定义与输入相关联的值 checked: radio 和 checkbox 默认被选中 readonly: 只读. text 和 password disabled: 对所用input都好使.

          select标签

          <select> 下拉选标签属性
          
          
                    name:表单提交项的键.
          
                    size:选项个数
          
                    multiple:multiple 
                           为每一项加上分组
          
                           

           

          定义:

          "post" action=""> 20” />

          标签

          登录吧 "text">
          
          "en">
          
              "UTF-8">
              "x-ua-compatible" content="IE=edge">
              "viewport" content="width=device-width, initial-scale=1">
              Title
          
          
          
          "aaa" action="/return/" method="get"> 请选择语言:

          "radio" name="language" id="jtzw" value="chinese"/>

          "radio" name="language" value="english" id="eng"/>

          请选择熟悉的编程语言:

          编程语言 "checkbox" name="python" />python "checkbox" name="c" />c "checkbox" name="go" />go


          请选择地区: <select name="district"> "China"> "USA"> select>

          请选择颜色:"color">

          name:"text" name="name" value=" "/> password:"password" name="passwd" value="hahaha"/> "submit" value="login"/>

          系统:"xuanze" type="text"> "xuanze">
          html表单

          显示结果如下: