欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页  >  IT编程

html

程序员文章站 2022-04-04 23:35:19
HTML介绍 （注：本人只是对前端简单的介绍，而且也只是达到会用的水平，前端工作者勿吐槽） 本文是前端部分的第一篇，在开始介绍html之前先做一些简单的说明 前端概述 首先我们需要了解什么是前端。简单来说，前端就是网站的前台部分。这里顺便介绍一下C/S和B/S结构。 C/S又称Client/Serv ......

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

 

浏览器是一个舞台；

html相当于一个模板；

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

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

html学习

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

html是什么

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

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

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

标签是什么

直观上开是由一对尖括号包括的单词，如<html>

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

标签分为两种：

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

　　自闭和标签：功能比较单一的使用一个标签即可，如：<br/、<hr/>等

注意标签使用的时候不可以交叉嵌套，如：<a><b></a></b>

标签的属性

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

注：

1、属性名全部小写

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

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

常用标签介绍

<!DOCTYPE html>标签介绍

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

<head>标签

 

<head>
    
    <meta name="keywords" content="学校，廊坊，师范，廊坊师范">                  <!--搜索引擎关键字-->
     <meta http-equiv="Refresh" content="2;URL=https://www.baidu.com">        <!--两秒后跳转到目标地址，没有目标地址就是刷新本页面 -->
    <meta http-equiv="content-Type" charset="utf-8">                        <!--设置编码格式-->
    <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7">                <!--兼容IE规范-->
    <title>Document</title>                                                    <!--标签显示-->
    <link rel="stylesheet" type="text/css" href="css.css">                    <!--引入css文件-->
    <link rel="icon" href="http://www.jd.com/favicon.ico">                    <!--标签上的图标设置，本-地图片和网络的都可以-->
    <script></script>　　　　　　　　                                          <!--用于写入js代码-->
    <style></style>　　　　　　　　                                              <!--用于写入css代码-->
    <script src="Hello.js"></script>                                        <!--引入js文件-->
</head>

 

 

 

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

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

注释：<!--注释内容 -->

标签分类

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

块级（block）标签的特点：

　　总是在新行开始

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

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

常见的块级标签：<p><h1><table><ol><ul><form><div>

内联（inline）标签特点：

　　不另开一行

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

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

常见的内联标签：<a><input><img><sub><sup><textarea><span>

基本标签

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

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

<b> <strong>: 加粗标签.

<em>: 文字变成斜体.

<sup>和<sub>: 上角标 和 下角标.

<br>:换行.

<hr>:水平线




含样式和语义的标签


        1、em标签，行内元素，表示语气中的强调词


        2、i标签，行内元素，w3c强加了语义，表示专业词汇


        3、b标签，行内元素，w3c强加了语义，表示文档中的关键字或者产品名


        4、strong标签，行内标签，表示非常重要的内容


        注：语义化标签就是在布局的时候使用语义化标签，搜索引擎在爬网的时候能认识这些标签，理解文档的结构，方便网站收录，这些标签都是成对出现的，标记的内容会有特殊显示




图形标签<img>


常见属性：


src: 要显示图片的路径.

alt: 图片没有加载成功时的提示.

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

width: 图片的宽

height:图片的高 (宽高两个属性只用一个会自动等比缩放.)



超链接标签<a>


常见属性：




href:要连接的资源路径 格式如下: href="http://www.baidu.com" 

target: _blank : 在新的窗口打开超链接. 框架名称: 在指定框架中打开连接内容.

name: 定义一个页面的书签.

用于跳转 href : #id.（锚）




列表标签 



 




    <ul>    <!--无序列表-->
        <li></li>
        <li></li>
        <li></li>
    </ul>

    <ol>    <!--有序列表-->
        <li></li>
        <li></li>
        <li></li>
    </ol>

    <dl>    <!--自定义列表-->
        <dt></dt>
        <dd></dd>
        <dd></dd>
    </dl>




 






 


 表格标签<table>


 




<table border="1px"><!--表格
    属性：
        border:表格属性
        cellpadding:内边距
        cellspacing:外边距
    注：<thead>和<tbody>也可以不加
    -->
        
        <thead>        
            <tr>
                <th>1</th>
                <th>2</th>
                <th>3</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td rowspan="2">111</td><!--跨两行-->
                <td>222</td>
                <td>333</td>
            </tr>
            <tr>
                <td>111</td>
                <td colspan="2">222</td><!--跨两列-->
                
            </tr>
        </tbody>
    </table>




 


  表单标签<form>


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


常用属性：


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


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


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


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


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


表单元素：




    <form action="127.0.0.1:8080" method="get">
        <!--单写下面的input是没有任何意义的，必须写在form中。
            属性：
            action:来将数据提交到指定地址中
            method:提交方式，post，即不在地址栏显示，get，即在地址栏显示，默认是get
        -->
        姓名：<input type="text" name="name" placeholder="请输入姓名"><!--文本框，name相当于键值-->
        <!--其他属性：
            placeholder：属性是设置文本框中提示内容
            readonly：只读
            disabled:不允许操作，感觉和只读是一样的，但是这个对所有的input都有用
        -->
        密码：<input type="passwod" name="pwd">
        爱好：音乐<input type="checkbox" name="hobby" value="music">电影<input type="checkbox" name="hobby" value="movie"><!--多选,传的时候传的是value的值-->
        性别： 男<input type="radio" name="gender" value="men" checked>女<input type="radio" name="gender" value="women"><!--单选，这个时候需要将name设置一致 checked表示默认选中-->
        <input type="file" name="file">
        <!--选择上传文件
        需要注意的点，这个需要在form中设置一个enctype="nultipart/form-data" 的属性，
        而且在服务器端接收的时候用的是对象.FILES来进行接收
        django中对上传文件的下载是：
        for item in req.Files:
            fileObj = req.FILES.get(item)
            f = open(fileObj.name,"wb")
            iter_file = fileObj.chunks()
            for line in iter_file:
                f.write(line)
            f.close()
        -->

        省<select name="province"><!--下拉列表框
            其他属性：
                multiple：可以实现列表的多个选择
                size:可以设置列表的显示个数
        -->
            
            <option value="beijing">北京市</option>
            <option value="hebei">河北省</option>
            <option value="henan" selected="selected">河南省</option><!--selected表示默认选中-->
            <option value="shanxi">山西省</option>
        </select>
    

        简介：<textarea name="desc" rows="5" cols="5"></textarea>

        <label for="">名字</label><!--for中写入下面id和下面的input中的id一样的话，就能实现点击名字的的时候也能实现光标在文本框效果-->
        <input id="" type="text">

        <fieldset><!--相当于做了个简单的样式-->
            <legend>登陆吧</legend>
            <input type="text">
        </fieldset>
        <input type="submit" value="提交"><!--提交到服务端-->
        <input type="button" value="按钮"><!--没有任何操作-->
        <input type="reset" name="重置"><!--重置-->
        <!-- readonly:只读，只限于text和password
        disabled：对所有input都有用。 -->
    </form>




 



 


 
					

																				

						

							上一篇：							
								应用派推荐：聚爆Implosion 等 15 款促销中							
						

						

							下一篇：							
								有点内涵的幽默小笑话							
						

					

															

						

							推荐阅读