资讯专栏INFORMATION COLUMN

上云采购季！| 2核2G4M爆款云服务器低至59元/年，更有多台、长期优惠，快来选购！

立即前往
首页/文章专栏/html

html

Dr_Noooo / 1272人阅读

摘要：服务器通常采用高性能的工作站或小型机，并采用大型数据库系统，如或。浏览器通过同数据库进行数据交互。本文介绍的也就是有关模式中前端部分的内容。在新窗口打开，默认是表示改变自己。用于将鼠标悬停到超链接的时候的显示内容。

HTML介绍

（注：本人只是对前端简单的介绍，而且也只是达到会用的水平，前端工作者勿吐槽）

本文是前端部分的第一篇，在开始介绍html之前先做一些简单的说明

前端概述

首先我们需要了解什么是前端。简单来说，前端就是网站的前台部分。这里顺便介绍一下C/S和B/S结构。

C/S又称Client/Server或客户/服务器模式。服务器通常采用高性能的PC、工作站或小型机，并采用大型数据库系统，如Oracle、Sybase、Informix或 SQL Server。客户端需要安装专用的客户端软件。这个客户端软件就是上面提到的前端部分。
B/Ｓ是Brower/Server的缩写，客户机上只要安装一个浏览器（Browser），如Netscape Navigator或Internet Explorer，服务器安装Oracle、Sybase、Informix或 SQL Server等数据库。浏览器通过Web Server 同数据库进行数据交互。这里的前端部分则是指浏览器。

两者比较一下：C/S模式响应快，但是需要安装软件，而B/S模式只需要有浏览器就可以和服务器之间进行交互。本文介绍的也就是有关B/S模式中前端部分的内容。

html、css、js的关系

如果把一个网页当成一场皮影戏的话，这场皮影戏对应的四个部分：舞台、皮革、皮革上的色彩、皮影的动作就分别对应浏览器、html、css和js

 

浏览器是一个舞台；

html相当于一个模板；

css则是给这个模板进行渲染；

js则是让这个网页动起来。

html学习

啰嗦了一大堆，现在开始正式的html介绍

html是什么

html的全拼是htyper text markup language ，即超文本标记语言

普通文本只能包括文字，而超文本则指的是可以包括图片、链接甚至音乐、程序等非文字的元素。

如果详细的看浏览器和服务器之间传输的数据的话，只是一串字符串，而浏览器的作用就是将这一串字符串变成一个展示给用户的网页。

标签是什么

直观上看是由一对尖括号括住的单词，如

标签也是不区分大小写的，但是推荐使用小写

标签分为两种：

　　普通标签：分为两个部分：开始标签和结束标签，如，结束部分一般用“/”标识，而两个标签中间的部分称之为标签体

　　自闭和标签：功能比较单一的使用一个标签即可，如：
等

注意标签使用的时候不可以交叉嵌套，如：

标签的属性

通常以键值对的形式出现在开始标签或者自闭标签中，如：name="name"

注：

1、属性名全部小写

2、属性值要用双引号括起来

3、属性名和属性值完全一样的时候，直接写属性名，如：checked

常用标签介绍

标签介绍

由于历史原因，在W3C标准出台以前，浏览器对页面的渲染没有统一的规范。这个标签是为了表示是按照w3c标准写的，如果不写，表示用的怪异模式，即用自己的怪异模式来解析渲染页面，这样平时可能不会暴露问题，但是在一些情况下会暴露出来。详细的情况这里就不多介绍了，这里这个只做了解。

标签

 

</>复制代码 
  1. <head>
  2.     
  3.     <meta name="keywords" content="学校，廊坊，师范，廊坊师范">                  
  4.      <meta http-equiv="Refresh" content="2;URL=https://www.baidu.com">        
  5.     <meta http-equiv="content-Type" charset="utf-8">                        
  6.     <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7">                
  7.     <title>Documenttitle>                                                    
  8.     <link rel="stylesheet" type="text/css" href="css.css">                    
  9.     <link rel="icon" href="http://www.jd.com/favicon.ico">                    
  10.     <script>script>　　　　　　　　                                          
  11.     <style>style>　　　　　　　　                                              
  12.     <script src="Hello.js">script>                                        
  13. head>

上面是head中常用的标签和对应的注释。

既然说到注释这个问题，这里就把html中常用的注释说明一下：

注释：

标签分类

标签分为块级标签和内联标签

块级（block）标签的特点：

　　总是在新行开始

　　宽度缺省则是占容器的的100%

　　可以容纳其他块级标签和内联标签

常见的块级标签：

、

、、
    、
      、
      、

      内联（inline）标签特点：

      　　不另开一行

      　　宽度就是文字或者图片的宽度，不可改变

      　　只能容纳文本或者其他内联标签

      常见的内联标签：、、

      超链接标签

      常见属性：

      </>复制代码 
      </>复制代码
      　　href:要连接的资源路径。 　　target:_blank 在新窗口打开，默认是_self表示改变自己。 　　title：用于将鼠标悬停到超链接的时候的显示内容。 　　其他用法： 　　　　1、将img标签放到a标签中可以实现点击图片跳转界面。 　　　　2、在href属性中写入“#”可以回到页面顶部。在href属性中写入“javascript:;”这个是点击超链接什么都不干。 　　　　3、href="#锚点"，这里的锚点是一个标签的id属性。这样设置了的a标签可以实现点击之后跳转到本页面的对应id的标签位置。   列表标签

       

      </>复制代码 
      1.     <ul>    
      2.         <li>li>
      3.         <li>li>
      4.         <li>li>
      5.     ul>
      6.     <ol>    
      7.         <li>li>
      8.         <li>li>
      9.         <li>li>
      10.     ol>
      11.     <dl>    
      12.         <dt>dt>　　　
      13.         <dd>dd>　　　
                <dd>dd>
      14.     dl>

       

       

       表格标签

 

</>复制代码 
  1. <table border="1px">
  2.         
  3.         <thead>        
  4.             <tr>　　　　　　　　　　　　
  5.                 <th>1th>　　　　　　
  6.                 <th>2th>
  7.                 <th>3th>
  8.             tr>
  9.         thead>
  10.         <tbody>
  11.             <tr>
  12.                 <td rowspan="2">111td>
  13.                 <td>222td>　　　　　　
  14.                 <td>333td>
  15.             tr>
  16.             <tr>
  17.                 <td>111td>
  18.                 <td colspan="2">222td>
  19.                 
  20.             tr>
  21.         tbody>
  22.     table>

 

  表单标签

表单是最重要的一个标签，因为它可以用于向服务器传输数据，实现和服务器的交互

常用属性：

　　action: 表单提交到哪. 一般指向服务器端一个程序,程序接收到表单提交过来的数据（即表单元素值）作相应处理，如www.baidu.com

　　method: 表单的提交方式 post/get 默认取值 就是 get

　　　　　　get：提交的内容以键值对的形式放在地址栏中url后面，安全性相对较差，对提交内容的长度有限制.

　　　　　　post：提交的内容不在地址栏，安全性相对较高，对提交内容的长度理论上无限制.

        get和post是最常用的，还有其他的提交方式。

表单元素：

</>复制代码 
  1.     <form action="127.0.0.1:8080" method="get">
  2.         
  3.         姓名：<input type="text" name="name" placeholder="请输入姓名">
  4.         
  5.         密码：<input type="passwod" name="pwd">
  6.         爱好：音乐<input type="checkbox" name="hobby" value="music">电影<input type="checkbox" name="hobby" value="movie">
  7.         性别： 男<input type="radio" name="gender" value="men" checked>女<input type="radio" name="gender" value="women">
  8.         <input type="file" name="file">
  9.         
  10.         省<select name="province">
  11.             
  12.             <option value="beijing">北京市option>
  13.             <option value="hebei">河北省option>
  14.             <option value="henan" selected="selected">河南省option>
  15.             <option value="shanxi">山西省option>
  16.         select>
  17.     
  18.         简介：<textarea name="desc" rows="5" cols="5">textarea>
  19.         <label for="">名字label>
  20.         <input id="" type="text">
  21.         <fieldset>
  22.             <legend>登陆吧legend>
  23.             <input type="text">
  24.         fieldset>
  25.         <input type="submit" value="提交">
  26.         <input type="button" value="按钮">
  27.         <input type="reset" name="重置">
  28.         
  29.     form>

 表单中还需要注意的就是哪些标签需要name，哪些需要value。当要用户输入的时候，有name就可以了，如果需要进行选择的时候，则需要value值，把用户的选择转换成值，上传到服务器。

 


 

 

云服务器 GPU云服务器 html对象.html html嵌套html html调用html html内嵌html

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/2298.html

相关文章

  • HTML的简介

    摘要：教程标准超文本标记语言英语，简称是一种用于创建网页的标准标记语言。版本从初期的网络诞生后，已经出现了许多版本版本发布时间声明声明有助于浏览器中正确显示网页。声明是不区分大小写的，以下方式均可通用声明查看完整网页声明类型参考手册。HTML 教程- (HTML5 标准) 超文本标记语言（英语：HyperText Markup Language，简称：HTML）是一种用于创建网页的标准标记语言。...

    cncoder 评论0 收藏0

  • html学习一

    摘要：列表的列表有有序列表和无序列表无序列表有序列表块元素大多数元素被定义为块级元素或内联元素。例子内联元素在显示时通常不会以新行开始。元素元素是内联元素，可用作文本的容器。当与一同使用时，元素可用于为部分文本设置样式属性。 简介 标题 段落 什么是HTML？ HTML 是用来描述网页的一种语言： HTML 指的是超文...

    xorpay 评论0 收藏0

  • 前端菜鸟笔记 Day-1 HTML&HTML 5

    摘要：行内元素特征设置宽高属性无效设置仅左右水平方向有效，上下垂直无效设置上下左右都有效内容不会自动进行换行行内块元素行内块元素综合了两者的特征，各有取舍，可以对任意元素进行属性设置。 文章大纲来源：【Day 1】HTML & HTML 5 标记语言 XHTML/HTML/HTML 5异同 了解doctype HTML HTML 5 标记语言 标记语言(ML)即 Markup Langu...

    kevin 评论0 收藏0

  • 01-html介绍和head标签

    摘要：三开发工具的使用使用技巧编辑器四介绍的概述全称，翻译为超文本标记语言，它不是一种编程语言，是一种描述性的标记语言，用于描述超文本内容的显示方式。【转】01-html介绍和head标签主要内容web标准浏览器介绍开发工具介绍HTML介绍HTML颜色介绍HTML规范HTML结构详解一、web标准web准备介绍：w3c：万维网联盟组织，用来制定web标准的机构（组织）web标准：制作网页遵循的规范...

    番茄西红柿 评论0 收藏0

  • w3schools网站的HTML教程之HTML介绍

    摘要：浏览器一个浏览器的作用是读取并显示一个文档。声明声明有助于浏览器能够正确地显示页面。声明是不区分大小写的，以下所有写法都是正确地常见声明版本在网络的早期，就具有了很多版本版本年份本文翻译于网站提供的教程。 什么是HTML HTML 是一种描述 Web 文档（页面）的标记语言。 HTML 代表超文本标记语言（Hyper Text Markup Language） 标记语言就是一组标记标...

    ccj659 评论0 收藏0

发表评论

登陆后可评论

0条评论

Dr_Noooo

男|高级讲师
我要私信

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
UCloud （优刻得科技股份有限公司）

UCloud （优刻得科技股份有限公司）是中立、安全的云计算服务平台，坚持中立，不涉足客户业务领域。公司自主研发IaaS、PaaS、大数据流通平台、AI服务平台等一系列云计算产品，并深入了解互联网、传统企业在不同场景下的业务需求，提供公有云、混合云、私有云、专有云在内的综合性行业解决方案。

Copyright © 2012-2025 UCloud 优刻得科技股份有限公司｜沪公网安备 31011002000058号｜ 沪ICP备12020087号-3｜
<