html

2018-06-24 02:23:27来源:未知 阅读 ()

新老客户大回馈,云服务器低至5折

HTML介绍

(注:本人只是对前端简单的介绍,而且也只是达到会用的水平,前端工作者勿吐槽)

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

前端概述

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

C/S又称Client/Server或客户/服务器模式。服务器通常采用高性能的PC、工作站或小型机,并采用大型数据库系统,如Oracle、Sybase、Informix或 SQL Server。客户端需要安装专用的客户端软件。这个客户端软件就是上面提到的前端部分。
B/S是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 ,即超文本标记语言

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

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

标签是什么

直观上看是由一对尖括号括住的单词,如<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:要连接的资源路径。
  target:_blank 在新窗口打开,默认是_self表示改变自己。
  title:用于将鼠标悬停到超链接的时候的显示内容。
  其他用法:
    1、将img标签放到a标签中可以实现点击图片跳转界面。
    2、在href属性中写入“#”可以回到页面顶部。在href属性中写入“javascript:;”这个是点击超链接什么都不干。
    3、href="#锚点",这里的锚点是一个标签的id属性。这样设置了的a标签可以实现点击之后跳转到本页面的对应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: 表单提交到哪. 一般指向服务器端一个程序,程序接收到表单提交过来的数据(即表单元素值)作相应处理,如www.baidu.com

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

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

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

        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>

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

 


 

 

标签:

版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有

上一篇:搞定flex布局

下一篇:前端技术之_CSS详解第二天