HTML

HTML:超文本标记语言，是网页制作必备的编程语言，“超文本”就是指页面内容可以包含图片，连接，甚至音乐，程序等非文字元素。

HTML版本

HTML 2.0：是1996年由Internet工程工作小组的HTML工作组开发的。
HTML 3.2: 作为W3C标准发布于1997年1月14日。HTML3.2向HTML2.0标准添加了被挂不规范运用的特性，诸如字体、表格、applets、围绕图像的文本流，上标和下标。
HTML 4.0: 被发布于1997年1月14日。而仅仅进行了一些编辑修正的第二个版本发布于1998年4月24日。HTML4.0最重要的特性是引入了样表式（CSS）。
HTML 4.01: 发布与1999年12月24日。
XHTML 1.0: 发布于2000年1月20日，使用XML对HTML4.01进行了重新表示。
HTML 5: W3C于2008年1月22日发布HTML5工作草案。

1、HTML页面结构

　　超文本标记语言的结构包括“头”部分（head)、和“主体”部分（body），其中“头”部提供了关于网页的信息，“主体”部分提供网页的具体内容。

<!DOCTYPE html>
<html lang="zn-CN">
<head>
    <!--头部信息不会在网页显示-->
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <h1>第一个网页页面</h1>
</body>
</html>

文档声明

　　　　DOCTYPE声明该html文件使用的HTML版本

　　　　HTML5

　　　2.页面头部

<head>：元素定义文档的肢体，也就是页面显示的内容

　　　3.页面内容

<body>:元素定义文档的主体，也就是页面显示的内容

2、常见的HTML标签

1.注释：

　　定义和用法

　　注释标签用于在源代码中插入注释。注释不会显示在浏览器中。

可以使用注释对代码进行注释。

　　2.标题标签

　　定义和用法

　　<h1>.<h6>标签可定义标题。<h1>定义最大的标题。<h6>定义最小的标题

3.段落和换行标签

　　定义和用法

P:标签定义段落。元素会自动在其前后创建一些空白。浏览器会自动添加这些空间，也可以在样式表中规定。

　　<p>元素会自动在其前后创建一些空白。浏览器会自动添加这些空间，也可以在样式中规定。</p>

br:插入一个简单的换行符。标签是空标签，意味着它没有结束标签

　　错误用法：<br></br>

　　<p>元素会自动在其前后创建一些空白。<br>浏览器会自动添加这些空间，也可以在样式中规定。</p>　　

hr：标签在HTML页面创建一条水平线。水平分隔线（horizontal rule)可以在视觉上将文档分割成各个部分，在HTML中,<hr>标签没有结束标签。

　　4、块标签

div标签：标签元素，表示一块内容，没有具体的意义。

　　div标签可以把文档分割成独立的、不同的部分。它可以用作严格的组织工具，并且不适用任何格式与其关联。

　　div中的部分会显示红色

    <div style='color:red' ></div>
    <h1>第一个网页页面</h1>

span标签　行内元素，表示一行中的一小段内容，没有具体的语义。

　　span没有固定格式表现，当对它应用样式时，才会产生视觉上的变化。

    <p>
        素会自动在其前后创建一些空白。浏览器会自动添加这些空间
        <span style='color:cyan'>span中的内容</span>
        你也可以在样式表中规定
    </p>

　　5、含样式和语义的行内标签

　　标签含义

　　<i> 行内元素，字体斜体

　　<em> 行内元素，语义为强调内容，表示重要（倾斜效果）

　　<b> 行内元素，字体加粗

　　<strong> 行内元素，语义为强调内容，表示非常重要（效果加粗）

　　6、图像标签和链接标签

img标签

　　属性描述

　　alt 规定图像的替代文本

　　src 规定显示图像的URL

　　height 定义图像的高度

　　width 定义图像的宽度

a标签：标签定义超链接，用于从一张页面链接到另一张页面

　　<a>元素最终的属性是href属性，它指示链接的目标。

<a href="https://www.baidu.com">点击链接跳转到百度</a>

link标签（放在头部中）

　　链接到一个外部样式，即链接外部的CSS文件。

　　7、列表

有序列表

　　在网页上定义一个有编号的内容列表可以用<ol>、<li>配合使用来实现，代码如下：　

    <ol>
        <li>列表文字一</li>
        <li>列表文字二</li>
        <li>列表文字三</li>
    </ol>

无序列表

　　在网页上定义一个无编号的内容列表可以用<ul>、<li>配合使用来实现，代码如下：　

    <ul>
        <li>列表文字一</li>
        <li>列表文字二</li>
        <li>列表文字三</li>
    </ul>

　　8、表格

table：table标签定义HTML表格

　　简单的HTML表格由table元素以及一个或多个tr、th或者td元素组成。

　　tr元素定义表格行，th元素定义表头，td元素定义表格单元

    <table border="1">
        <tr>
            <th>name</th>
            <th>class</th>
            <th>age</th>
        </tr>
        <tr>
            <th>sinder</th>
            <th>python6</th>
            <th>18</th>
        </tr>

3、HTML表单

　1.form标签

form：标签用于为用户输入创建HTML表单，表单能够包含input元素，比如文本字段，复选框，单选框，提交按钮等。

　　form标签属性：

　　　　属性描述

　　　　action 定义表单数据提交地址
　　　　method 定义表单提价的方式（常见的有get和post）

form表单中包含的元素

　　　　元素标签作用

　　　　<label>标签为表单元素定义文字标注

　　　　<input>标签　　　定义通用的表单元素

　　　　<textarea>标签定义多行文本输入框

　　　　<select>标签定义下拉表单元素

　　　　<option>标签与<select>标签配合，定义下拉表单元素中的选项

　2.input标签

value属性：定义表单元素的值　
name属性：定义表单元素名称

    <form action="http://127.0.0.1" method="get">
        账号：<input type="text" name="'username" id="user"><br>
        密码：<input type="password" name="password" id="password"><br>
        <input type="submit">
    </form>

type属性

　　值作用

　　text 定义单行文本输入框

　　password 定义密码输入框

　　redio 定义单选框

　　submit 定义提交按钮

　　button 定义普通按钮

　　checkbox 定义复选框

　　file 定义上传文件

　　reset 定义重置按钮

　　image 定义图片作为提交按钮，以src属性定义图片地址

　　hidden 定义一个隐藏的表单域，用来存储值

    <form action="http://127.0.0.1" method="post">
        账号：<input type="text" name="'username" id="user"><br>
        密码：<input type="password" name="password" id="password"><br>
        <input type="submit">
        <input type="radio" name="radio" value="radio">选择我
        <input type="checkbox" name="checkbox"  value="checkbox">复选框
        <input type="file">
        <input type="reset">
        <input type="image" src="">
    </form>

　2.label标签

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

　　label元素不会向用户呈现任何特殊效果。不过，他为鼠标用户改进了可用性。如果在label元素内点击文本，就会触发此空间。就是说，当用户选择该标签时，浏览器就会自动将焦点转到和标签相关的表单控件上。

　　<label>标签的for属性应当与相关元素的id属性相同

　　属性对应值的描述

　　for for属性应当与相关元素id属性相同

<form action="http://127.0.0.1" method="post">
        <label for="user">账号：</label>
        <input type="text" name="'username" id="user"><br>
        密码：<input type="password" name="password" id="password"><br>
        <input type="submit">
        <input type="radio" name="radio" value="radio">选择我
        <input type="checkbox" name="checkbox"  value="checkbox">复选框
        <input type="file">
        <input type="reset">
        <input type="image" src="">
    </form>

　　4.textarea标签

　　textarea标签定义多行的文本输入控件

　　文本区中可容纳无限数量的文本，其中的文本默认自体是等宽字体（Courier）

　　可以通过cols和rows属性来规定textarea的尺寸，更好的办法是使用CSS的height和width属性。

　　属性值描述

　　autofocus autofocus 规定在页面加载后文本区域自动获得焦点

　　cols number 规定文本区内的可见宽度

　　rows number 规定文本区内的可见行数

　　disabled disabled 规定禁用该文本区

form form_id 规定文本区域所属的一个或多个表单

　　maxlength number 规定文本区域的最大字符数

　　name name_of_textarea 规定文本区的名称

　　placeholder text 规定描述文本区域预期值的简短提示

　　readonly readonly 规定文本区为只读

　　required 　　　 required 　　　　　　规定文本区是必填的

　　5.select标签

　　select元素可创建单选或多选菜单，也可用于选择数据提交表单。

　　<select>元素中的<option></option>标签用于列表中的可用选项

<form action="http://127.0.0.1" method="post">
    <select name="skill">
            <option value="py">python</option>
            <option value="java">java</option>
        </select>
 </form>

　　5.option标签

3、内联框架

　　1.iframe

　　　iframe元素会创建包含另外一个文档的内联框架（即内框架爱）　

　　例子：将登录页面的内容链接到当前页面

posted @ 2019-08-31 01:05 sinder2018 阅读(102) 评论(0) 收藏举报

刷新页面返回顶部