一，HTML简介和基本结构

作者: 好多可乐 | 来源:发表于2020-05-24 20:45 被阅读0次

HTML介绍

一，概念
超文本标记语言（Hypertext Markup Language）

超文本定义：包含了图片，文档，链接，主要体现在链接
标记语言：通过定义的标记来约束数据编写的格式和规范

种类：xml，html，md
特性/作用：数据展示，数据传输

dtd概念

文档类型定义（Document Type Definition），用来定义标记语言的语法，制定了标记语言的语法规则。

二，HTML分类

1. html4

Strick：不包含过时的标记（basefont，font），不能使用框架frameset。
Transitional：不能使用框架集（frameset）
frameset：可以使用框架集（frameset）

2. xhtml1.1

Strick：不包含过时的元素（basefont，font），不能使用框架frameset。文档格式强制约束
Transitional：不能使用框架集（frameset），文档格式强制约束（必须要闭包，否则就编译不过去）
frameset：可以使用框架集（frameset），文档格式强制约束

3. html5：

不是SGML的子级
增加了用于减少脚本的标记（autofocus属性），增加了很多标签，节省了很多js的脚本的使用，只需要一个标签就可以搞定。
减少了对外部设备的需求，自身提供了一些不靠外部设备的东西，比如动画。
标准化，提供了强制的规范性，比如浏览器无需考虑兼容性的问题

4，dhtml：

动态的，不是一种标记语言，而是多种技术（js+css+html）的集合，微软提出

三，html标准结构

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <title>Title</title>
</body>
</html>

四，html结构解析

1. 文档类型标记：

定义：告诉浏览器使用哪个html版本进行编写的指令
标记 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01
Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
标记说明<! 文档类型顶级元素可用性 "注册//组织//类型标签//
定义语言" "dtd 文件地址">

五，HTML文档标记

头标记

定义：用于脚本和css的定义和引用，以及页面元数据信息的定义
标记：<head></head>
页面元数据：页面关键字，页面文档类型字符集等等

六：html元数据标记

元数据标记：用于页面关键字，页面文档类型字符集，刷新等信息的定义
标记：<meta></meta>

<head>
    <title>html练习</title>
    <!-- 页面关键字：keywords里面的关键字对seo影响较大，影响它在搜索引擎的排名-->
    <meta name="keywords" content="kola 可乐">
    <!-- 设置内容类型-->
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8">
    <!-- 重定向，设置2s跳转到百度-->
    <meta http-equiv="Refresh" content="2;https://www.baidu.com">
    <!-- 缓存控制，max-age：缓存的内容将在xx秒后失效, 这个选项只在HTTP 1.1可用-->
    <meta http-equiv="Cache-Control" content="max-age=10">
</head>

七：html格式/排版标记

<br> 换行符
<hr> 水平线
<pre> 预格式标记，按编写格式展示

<body>
<!--br:换行符-->
大家好<br>
我是可乐！
<!--水平线标记-->
<hr>
<!--上面这种写法只能保证换行，但是无法保证前面的空格之类的显示正确，所以有了预编译标签,代码什么格式就展示什么格式-->
<pre>
   大家好
   我是可乐！
</pre>

展示效果

八：html字体标记

<del> 添加删除线标记
<b> 粗体文本标记
<strong> 强调文本标记（和b标签实现的效果是一样的，目前w3c推荐使用这个）
<sup> 定义上标文本（
<sub> 定义下表文本
<small> 文本缩细标记
<big> 文本放大标记
<H?> 标题标记
<I> 斜体文本标记

<del>del标签：删除</del>
<br>
<b>b标签：放大</b>
<br>
<strong>strong标签：强调文本，效果和b标签一样</strong>
<br>
java整型最大的取值数为：
2<sup>31</sup>-1
<br>
水：H<sub>2</sub>O
<br>
<small>small：缩小</small>
<br>
<big>big：放大</big>
<br>
<h1>标题1</h1>
<h2>标题2</h2>
<h3>标题3</h3>
<I>斜体</I>

html字体标记.png

九：html表单标记

<form> 表单标记
<input> 文本输入控件
<textarea> 多行文本输入控件
<button> 按钮控件
<select> 下拉列表控件
<option> 下拉列表选项控件
<optgroup> 下拉列表选项集合控件

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <title>form</title>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8">
</head>
<body>
<!--点击提交，就跳转到名为html4的文件-->
<form method="get" action="html4.html"></form>
    <!-- input：文本输入框-->
    <input name="input_1" type="text" value="文本">
    <br>
    <!--  textarea：多行文本输入控件-->
    <textarea name="textarea1" rows="3" cols="3"></textarea>
    <br>
    <!-- select：下拉选择控件-->
    <select name="select_1">
        <!--  optgroup：下拉列表选择集合控件-->
        <optgroup label="optgroup_1">
            <option>1</option>
            <option>2</option>
            <option>3</option>
        </optgroup>
        <option>4</option>
        <option>5</option>
        <option>6</option>
    </select>
    <br>
    <!--  按钮-->
    <button type="submit">提交</button>
</form>
</body>
</html>

form表单.png

十：html表格标记

<table> 表格控件
<caption> 表题目
<th> 表格单元头 table head
<tr> 表格单元行 table row
<td> 表格单元列 table
<thead> 表头
<tbody> 表体
<tfoot> 表尾

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <title>table</title>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8">
</head>
<body>
<form method="get" action="html4.html">
<table border="1">

    <thead>
    <tr>
        <th>id</th>
        <th>name</th>
        <th>sex</th>
    </tr>
    </thead>

    <tfoot>
    <tr>
        <td>
            <button type="submit">提交</button>
        </td>
    </tr>
    </tfoot>

    <tbody>
    <tr>
        <th rowspan="2">饮料</th>
        <td>1</td>
        <td>可乐</td>
    </tr>
    <tr>
        <td>2</td>
        <td>雪碧</td>
    </tr>
    <tr>
        <th rowspan="1">零食</th>
        <td>3</td>
        <td>旺旺雪饼</td>
    </tr>
    </tbody>

</table>
</form>
</body>
</html>

列表标记.png

十一：html列表标记

<ul> 无序列表标记
<ol> 有序列表标记
<li> 列表内容标记

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <title>有序无序标签</title>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8">
</head>
<body>
<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
</ul>
<ol>
    <li>1</li>
    <li>2</li>
    <li>3</li>
</ol>
</body>
</html>

有序无序标签.png

十二：htm链接标记

<a> 瞄标记
<link> 链接样式表标记

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

十三：htm样式标记

<div> 层标记
<style> 文档样式标记

十四：htm脚本标记
<script> 脚本标记

十五：htm转义字符

1. "&lt;"  ： < 小于号 less than
2. "&gt;"  ： > 大于号 greater than 
3. “&amp;”：& and符
4. “\&quot;”：双引号
5.  “\&copy;”：版权
6.   “\&reg;”：已注册商标
7. “&nbsp” ：空白格
<!-- 演示 -->
<input value="&quot双引号&quot">

双引号.png

网友评论

本文标题：一，HTML简介和基本结构

本文链接：https://www.haomeiwen.com/subject/qcdrahtx.html

延伸阅读

深度阅读

您也可以注册成为美文阅读网的作者，发表您的原创作品、分享您的心情！

一，HTML简介和基本结构

HTML介绍

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读