24-HTML基础

时间：2017-07-21 19:53:07 阅读：308 评论：0 收藏：0 [点我收藏+]

标签：提示标签 pac form 新窗口石家庄关联基本概念 name

html

超文本标记语言(Hypertext Markup Language, HTML)

通过标签语言来标记要显示的网页中的各个部分.是一种浏览器认识的规则.

浏览器按照顺序渲染网页文件,然后根据标记符解释和显示内容,但需要注意,不同浏览器对同一个标签可能会有不同的解释.

扩展名: .html/.htm

语法结构:

<wiz_code_mirror>

 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
内容体
</body>
</html>

<!DOCTYPE html>: 告诉浏览器使用什么样的html或者xhtml来解析html文档

<html>..</html>: 是文档的开始标记和结束标记。此元素告诉浏览器其自身是一个 HTML 文档，在它们之间是文档的头部<head>和主体<body>。

<head>..</head>: 元素出现在文档的开头部分。<head>与</head>之间的内容不会在浏览器的文档窗口显示，但是其间的元素有特殊重要的意义。

<title>..</title>: 定义网页标题，在浏览器标题栏显示。

<body>..</body>: 之间的文本是可见的网页主体内容

注释: 

注意:

1,标签尖括号关键词,如<html>

2,标签一般成对出现,如<div>..</div>

3,标签不区分大小写,推荐小写

4,一对标签内包含的是标签体,功能简单的标签可能仅有一个标签如<br/>,这叫做自闭和标签.

5,标签可嵌套

6,标签可定义属性,如<标签名属性1=‘value1‘ 属性2=‘value2‘ ...>...</标签名>,多属性用空格分开

标签类型:

--块级标签:独占一行

--内联标签:仅内容长度大小

常用标签介绍:

<wiz_code_mirror>

 
<!DOCTYPE html> <!--声明位于文档中的最前面的位置，处于<html>标签之前。此标签可告知浏览器文档使用哪种 HTML 或 XHTML 规范-->

作用：声明文档的解析类型(document.compatMode)，避免浏览器的怪异模式.

document.compatMode：

BackCompat：怪异模式，浏览器使用自己的怪异模式解析渲染页面。

CSS1Compat：标准模式，浏览器使用W3C的标准解析渲染页面。

这个属性会被浏览器识别并使用，但是如果你的页面没有DOCTYPE的声明，那么compatMode默认就是BackCompat

<head>常用的标签</head>

<wiz_code_mirror>

 
<head>
    <meta name=‘keywords‘ content=‘IT技术,HTML,BLOG,...‘>  <!--指定被搜索到的关键字-->
    <meta name="description" content="这是一个关于IT技术的网站.">  <!--指定网站显示的描述-->
    
    <meta http-equiv="Refresh" content="2;URL=https://www.oldboy.com">  <!--2秒后,将当前页面跳转至指定URL-->
    <meta http-equiv="content-Type" charset="UTF8">  <!--指定字符集格式
    <meta http-equiv = "X-UA-Compatible" content = "IE=EmulateIE7" />  <!--兼容IE7-->
    
    <title>hello,world.</title>
    
    <link rel="icon" href="http://www.jd.com/favicon.ico">  <!--链接一个图标(icon)-->
    <link rel="stylesheet" href="css.css">  <!--链接一个css文件-->
    <script src="hello.js"></script>      <!--链接一个js文件-->
    
</head>

<body>常用标签</body>

<wiz_code_mirror>

 
 
 
 
 
<body>
    <h3>鹅鹅鹅,曲项向天歌.</h3>     <!--x取值范围是1~6; 从大到小. 用来表示标题-->
    <p>鹅鹅鹅,</p>     <!--段落标签,内容会当做一行,且上下文有行间隔空白-->
    <p>曲项向天歌.</p>     <!--段落标签,内容会当做一行,且上下文有行间隔空白-->
    <b>白毛浮绿水,</b>     <!--加粗标签-->
    <em>红掌拨青波.</em>     <!--斜体-->
    
    <div style=""> 
        hello,world.
    </div>      <!--块级元素,独占整行,无实际意义,主要为了支持定义CSS样式-->
    
    <span style=""> 
        helloworld.
    </span>      <!--内联元素,文本长度,无实际意义,主要为了支持定义CSS样式-->
?
    <img src="1.png" width="200px" height="150px" alt="美女" title="包小姐">      <!--插入图片,一般使用CSS插入图片-->
    
    <a href="http://www.baidu.com">
        hello,world.
    </a>      <!--超链接标签-->
?
    <a href="http://www.baidu.com" target="_blank">
        hello,world.
    </a>        <!--target="_blank":新窗口跳转,默认当前页面跳转-->
?
    <a href="http://www.baidu.com" target="_blank">
        <img src="1.png">      <!--嵌套图片为超链接-->
    </a>
    
    <ul>
        <li>无序列表1</li>
        <li>无序列表2</li>
    </ul>
?
    <ol>
        <li>有序列表1</li>
        <li>有序列表2</li>
    </ol>
?
    <dl>
        <dt> 列表标题:河北省 </dt>
        <dd> 列表项:石家庄 </dd>
        <dd> 列表项:衡水 </dd>
    </dl>
?
    <table border="1" cellpadding="10px" cellspacing="30px">
        <tr>
            <th>ID</th>
            <th>Name</th>
            <th>Age</th>
            <th>meale</th>
            <th>work</th>
        </tr>   <!--定义行-->
?
        <tr>
            <td>1</td>
            <td>xiaofei</td>
            <td>18</td>
            <td>男</td>
            <td>IT</td>
        </tr>
    </table>
?
    
?
</body>
 
 

块级元素与行内元素的区别

所谓块元素，是以另起一行开始渲染的元素;

行内元素则不需另起一行;

块级可以嵌套内联,块级,内联只能嵌套内联;

如果单独在网页中插入这两个元素，不会对页面产生任何的影响。

这两个元素是专门为定义CSS样式而生的

img标签属性:

src: 要显示图片的路径.

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

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

width: 图片的宽

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

表格概念

表格是一个二维数据空间，一个表格由若干行组成，一个行又有若干单元格组成，单元格里可以包含文字、列表、图案、表单、数字符号、预置文本和其它的表格等内容。

表格最重要的目的是显示表格类数据。表格类数据是指最适合组织为表格格式（即按行和列组织）的数据

表格属性:

<tr>: table row

<th>: table head cell,表头样式

<td>: table data cell,表数据样式

属性:

border="n": 表格边框."n"指定边框厚度

cellpadding: 内边距,内容与边框之间的距离

cellspacing: 外边距.单元格与最外边框的距离

width: 像素百分比.（最好通过css来设置长宽）

rowspan: 单元格竖跨多少行

colspan: 单元格横跨多少列（即合并单元格）

练习:

<wiz_code_mirror>

 
 
 
 
 
<!--第一张图-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>菜谱</title>
</head>
<body>
    <table border="">
        <tr>
            <td colspan="3">星期一菜谱</td>
        </tr>
        <tr>
            <td rowspan="2">素菜</td>
            <td>青草茄子</td>
            <td>花椒扁豆</td>
        </tr>
        <tr>
            <td>小葱豆腐</td>
            <td>炒白菜</td>
        </tr>
        <tr>
            <td rowspan="2">荤菜</td>
            <td>油焖大虾</td>
            <td>海参鱼翅</td>
        </tr>
        <tr>
            <td>红烧肉<img src="红烧肉.png"></td>
            <td>烤全羊</td>
        </tr>
    </table>
</body>
</html>
?
<!--第二张图-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>课程表</title>
</head>
<body>
    <table border="">
        <tr>
            <th>项目</th>
            <th colspan="5">上课</th>
            <th colspan="2">休息</th>
        </tr>
        <tr>
            <th>星期</th>
            <th>星期一</th>
            <th>星期二</th>
            <th>星期三</th>
            <th>星期四</th>
            <th>星期五</th>
            <th>星期六</th>
            <th>星期日</th>
        </tr>
        <tr>
            <td rowspan="4">上午</td>
            <td>语文</td>
            <td>数学</td>
            <td>英语</td>
            <td>英语</td>
            <td>物理</td>
            <td>计算机</td>
            <td rowspan="4">休息</td>
        </tr>
        <tr>
            <td>数学</td>
            <td>数学</td>
            <td>地理</td>
            <td>历史</td>
            <td>化学</td>
            <td>计算机</td>
        </tr>
        <tr>
            <td>化学</td>
            <td>语文</td>
            <td>体育</td>
            <td>计算机</td>
            <td>英语</td>
            <td>计算机</td>
        </tr>
        <tr>
            <td>政治</td>
            <td>英语</td>
            <td>体育</td>
            <td>历史</td>
            <td>地理</td>
            <td>计算机</td>
        </tr>
        <tr>
            <td rowspan="2">下午</td>
            <td>语文</td>
            <td>数学</td>
            <td>英语</td>
            <td>英语</td>
            <td>物理</td>
            <td>计算机</td>
            <td rowspan="2">休息</td>
        </tr>
        <tr>
            <td>数学</td>
            <td>数学</td>
            <td>地理</td>
            <td>历史</td>
            <td>化学</td>
            <td>计算机</td>
        </tr>
    </table>
</body>
</html>
 
 

表单标签form

功能：

表单用于向服务器传输数据，从而实现用户与Web服务器的交互.

表单能够包含input系列标签，比如文本字段、复选框、单选框、提交按钮等等.

表单还可以包含textarea、select、fieldset和 label标签.

表单属性

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

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

表单元素

基本概念：

HTML表单是HTML元素中较为复杂的部分，表单往往和脚本、动态页面、数据处理等功能相结合，因此它是制作动态网站很重要的内容.

表单一般用来收集用户的输入信息

表单工作原理：

访问者在浏览有表单的网页时，可填写必需的信息，然后按某个按钮提交。这些信息通过Internet传送到服务器上。

服务器上专门的程序对这些数据进行处理，如果有错误会返回错误信息，并要求纠正错误。当数据完整无误后，服务器反馈一个输入完成的信息.

<input>系列标签

<1> 表单类型

type:

text 文本输入框

password 密码输入框

radio 单选框

checkbox 多选框

submit 提交按钮

button 按钮(需要配合js使用.)

file 提交文件：form表单需要加上属性enctype="multipart/form-data"

上传文件注意两点：

请求方式必须是post

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都好使.

<wiz_code_mirror>

 
 
 
 
 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <h3>注册页面</h3>
    
    <form action="" method="get">
        <p>
            姓名: <input type="text" name="username" value="你的名字">
        </p>
        <p>
            密码: <input type="password" name="pwd" value="你的密码">
        </p>
        <p>
            爱好:
            <input type="checkbox" value="basketball">篮球
            <input type="checkbox" value="football">足球
            <input type="checkbox" value="ball">球
        </p>
        <p>
            性别:
            <input type="radio" name="sex" value="1">男
            <input type="radio" name="sex" value="0">女
        </p>
        <p>
            <input type="file">
        </p>
        <p>
            <input type="reset">
        </p>
        <p>
            <input type="button" value="按钮">
        </p>
        <p>
            <input type="submit" value="快提交">
        </p>
    </form>
</body>
</html>
 
 

<select>标签

下拉选项标签属性

name:表单提交项的键.

size：选项显示个数

multiple：开启多选功能,multiple="multiple",属性名和属性值相同,默认可只写一个属性名

<optgroup>为每一项加上分组

<option> 下拉选中的每一项属性：

value:表单提交项的值.

selected: 下拉选项默认被选中

<wiz_code_mirror>

 
 
 
 
 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <h3>注册页面</h3>
    
    <form action="" method="get">
        <p>
            姓名: <input type="text" name="username" value="你的名字">
        </p>
        <p>
            密码: <input type="password" name="pwd" value="你的密码">
        </p>
        <p>
            爱好:
            <input type="checkbox" value="basketball">篮球
            <input type="checkbox" value="football">足球
            <input type="checkbox" value="ball">球
        </p>
        <p>
            性别:
            <input type="radio" name="sex" value="1" checked>男
            <input type="radio" name="sex" value="0">女
        </p>
        <select name="province" id="" size="3" multiple>
            <option value="hebei" selected>河北省</option>
            <option value="henan">河南省</option>
            <option value="shandong">山东省</option>
            <option value="shanxi">山西省</option>
            <option value="sichuan">四川省</option>
        </select>
?
        <p>
            <input type="submit" value="快提交">
        </p>
    </form>
</body>
</html>
 
 

<textarea>多行文本框

<wiz_code_mirror>

 
        <p>
            <textarea cols="10" rows="10" name=“person”>
                   默认内容
            </textarea>
        </p>

<label>标签

定义：<label> 标签为 input 元素定义标注（标记）

说明：

1,label 元素不会向用户呈现任何特殊效果

2,<label> 标签的 for 属性值应当与相关元素的 id 属性值相同,for会去查找标签的id

3,id是标签id,全局唯一,用于排错时可以方便查找

<wiz_code_mirror>

 
        <p>
            <label for="user">姓名: </label> 
            <input type="text" name="username" id="user">
        </p>
        <p>
            <label for="pwd">密码: </label> 
            <input type="password" name="pwd" id="pwd">
        </p>

<fieldset>标签(不常用,了解即可)

<wiz_code_mirror>

 
        <p>
            <fieldset>
                <legend>登录吧</legend>
                <input type="text">
            </fieldset>
        </p>

24-HTML基础

标签：提示标签 pac form 新窗口石家庄关联基本概念 name

原文地址：http://www.cnblogs.com/xiaofeiweb/p/7219256.html

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)

周排行