HTML基础知识

最新推荐文章于 2025-02-23 14:07:31 发布

贾学习

最新推荐文章于 2025-02-23 14:07:31 发布

阅读量437

点赞数

CC 4.0 BY-SA版权

分类专栏：前端文章标签： 115 前端 HTML

本文链接：https://blog.youkuaiyun.com/SSR_J_Study/article/details/89280385

115 同时被 2 个专栏收录

6 篇文章

订阅专栏

前端

6 篇文章

订阅专栏

简介

超文本标记语言
语言：人与浏览器沟通的方式
标记：标签<>
HTML文档由标签组成
文本：你写的文字
超文本：不光可以是文字，还可以是图片、视频、音乐等

HTML元素

HTML元素以开始标签起始
HTML元素以结束标签终止
元素的内容是开始标签与结束标签之间的内容
元素=标签+内容

空元素
标签对大小写不敏感
标签语义化
HTML属性（提供有关HTML元素更多的信息，引用方式name=“value”）
注释 <!- -内容- ->

样例

<!DOCTYPE HTML>
<html>
	<head>
		<titile>标题</title>
		<meta charset="utf-8">      <!--定义文档的字符编码-->
        <meta name="author" content="作者">
        <meta name="keywords" content="关键词">
        <meta http-equiv="refresh" content="30">    <!--30s刷新一次-->
        <link rel="stylesheet" type="text/css" href="indexstyle.css" />  <!--引用css样式表-->
	</head>
    <body style="bgolor:rgb(197, 40, 40)">
        <!--标题标签-->
        <h1>一级标题</h1>
        <h2>二级标题</h2>
        <h3>三级标题</h3>
        <!--段落标签-->
        <p>段落1</p>
        <p>段落2</p>
        <p>段落3<br />
           换行了叭
        </p>
        <!--超链接-->
        <a href="http://www.baidu.com" target="_blank">点击这里，会在新的页面中打开百度</a><br />
        <img src="C:\Users\溧i\Desktop\班聚\psb.jpg" alt="从绝对路径打开" height="100"><br />
        <img src="班聚\psb.jpg" alt="从上一级文件中打开" width="100"><br />
        <img src="psb.jpg" alt="从同级文件中打开" height="100" width="100"><br />
	</body>
</html>

DOCTYPE HTML

HTML的声明
告诉浏览器它将处理HTML，以及内容的HTML规范的版本

head元素

head元素包含有关于文档中内容的信息和标记的信息。它还包括脚本和对外部资源的引用。

title元素

head元素中的必选元素
定义了网页页面的标题（窗口、标签页上会显示标题）
当网页添加到收藏夹时，显示在收藏夹中的标题
显示在搜索引擎结果页面的标题

meta元素

meta元素定义文档的元数据。可以以不同的方式使用此元素，并且HTML文档可以包含多个meta元素。

meta元素的局部属性

name：提供富有意义的名称（对索引有帮助）
常见的name属性值
1. author（作者）
2. description（描述）
3. keywords（关键字）
content
charset:定义文档的字符编码
http-equiv：向浏览器传递有用的信息
常见的http-equiv属性值
1. refresh（刷新）
2. default-style（用的预定义的样式）
3. content-type（文档内容类型，文档的字符编码等）

link元素

定义文档与外部资源的关系。
最常见的用途是连接样式表。

link元素的属性

rel属性：规定了当前文档与被连接文档的关系（eg.stylesheet-外部链式表）
type属性：说明了链接文档的类型（给浏览器提示：以怎样的方式打开链接）
href属性：规定外部引用的文档的位置

body元素

< h 1>–< h 6>标签

h1-h6表示标题，定义了标题元素的层次结构，h1是一级标签

< p >标签

可以把HTML文档分割为若干段落

< a >标签

超链接可以是一个字，一个词或一组词，也可以是一副图像，您可以点击这些内容来跳转到新的文档或者当前文档中的某个部分。
我们通过使用< a >标签在HTML中创建连接。
（开始标签和结束标签之间的文字被作为超级链接来显示）

< a >标签的属性

href属性：通过使用href属性，创建指向另一个文档的连接。
target属性：可以定义被连接的文档在何处显示
target属性的值：
1. _blank（在新的页面打开）
2. _self（默认值。在相同的框架中打开）
3. _top（在整个窗口中打开被连接的文档）
4. _parent（在父框架集中打开被连接的文档）

< img >标签

将图像嵌入到HTML文档中

< img >标签的属性

src属性：必须，规定显示图像的来源
alt属性：必须，规定图像的代替文本
height/width属性：指定图片的高宽
不指定时：按原图大小显示；指定高/宽：按比例缩放；指定高宽：强制按指定高宽显示
style属性：嵌入标签内部，设置颜色，字体大小，款式……

HTML列表

样例

        <!--无序列表-->
        <ul>
            <li>无序1</li>
            <li>无序2</li>
            <ul>
                <li>嵌套试试1</li>
                <li>嵌套2</li>
            </ul>
        </ul>
        <!--有序列表-->
        <ol>
            <li>有序1</li>
            <li>有序2</li>
            <ol type="A" start="4">
                <li>嵌套试试1</li>
                <li>嵌套2</li>
            </ol>
        </ol>
        <!--定义列表-->
        <dl>
            <dt>自定义列表项1：</dt>
            <dd>自定义列表项的定义1</dd>
            <dt>自定义列表项2：</dt>
            <dd>自定义列表项的定义2</dd>
        </dl>

无序列表< ul >

用标签的组合方式实现
可在无序列表中嵌套无序列表
没有规定什么属性

有序列表< ol >

可以进行列表的嵌套
用属性控制列表中的项目

< ol > 标签的属性

start属性：定义列表中第一个项目的序数值（未定义时，默认为1）
type属性：来指示每个项目显示哪种标记

定义列表< dl >

自定义列表由一组术语与它的定义分组组成
自定义列表以< dl >标签开始
每个自定义列表项以< dt >开始
每个自定义列表项的定义以< dd >开始

HTML表格

< table >定义表格

样例

        <table border="1">
        <caption>表格的标题</caption>
            <thead>
            <tr>
                <th>表头1</th>
                <th>表头2</th>
            </tr>
            </thead>
            <tfoot>
                <tr>
                    <td>1</td>
                    <td>2</td>
                </tr>
            </tfoot>
            <tbody>
            <tr>
                <td>(1,1)</td>
                <td>(1,2)</td>
            </tr>
            <tr>
                <td>(2,1)</td>
                <td>(2,2)</td>
            </tr>
            </tbody>
        </table>

< table >内含的标签

< tr >标签：定义表格化
< th >标签：定义表头
< td >标签：定义表格单元

< table >标签的属性

< border >属性：只允许使用值“1”或“”，决定表格是否有边框
< caption >属性：表格名字
< thead >属性
< tbody >属性
< tfoot >属性

HTML表单< form >

用于创建供用户输入的HTML表单

样例

        <form action="格式.html" method="get" name="表单名称">
            框1:<input type="text" name="name框1"><br />
            框2:<input type="text" name="name框2"><br />
            <input type="submit" value="提交">
        </form>
        <forom>
            <!--文本-->
            用户：
            <input type="text" name="user" value="用户名"><br />
            <!--掩码-->
            密码：
            <input type="password" name="password" placeholder="请输入密码">
        </forom>
        <form>
            <!--复选框-->
            我喜欢1：
            <input type="checkbox" name="love1"><br />
            我喜欢2：
            <input type="checkbox" name="love2">
        </form>
        <form>
            <!--单选按钮-->
            男性：
            <input type="radio" checked="checked" name="sex" value="male" /><br />
            女性：
            <input type="radio" name="sex" value="female" />
        </form>
        <form>
            <lable for="male">Male</lable>
            <input type="radio" name="sex" id="male" value="male"><br />
            <lable for="female">Female</lable>
            <input type='radio' name="sex" id="female" value="female"><br />
            <input type="submit" value="提交">
        </form>
        <form>
            <fieldset>
                <legend>个人信息：</legend>
                姓名：<input type="text"><br />
                邮箱：<input type="text"><br />
                生日：<input type="text"><br />
                <button type="submit">提交</button>
                <button type="reset">重置</button>
            </fieldset>
        </form>

< form >元素包含的元素

< input >标签：用于输入字段
< input >标签的属性：
1. type属性：根据不同的type属性值，输入字段拥有很多形式（文本，密码，复选框，单选按钮，按钮等）
2. name属性：给输入的内容起个名字
3. value属性：输入的值
4. placeholder属性
< lable >标签：常见的表单控件，为input元素定义标注
1. < for >属性：规定lable与哪个表单元素绑定，for属性应当与相关元素的id属性相同
< fieldset >标签：可以将表单内部的相关元素分组，会在相关表单元素周围绘制边框
< legend >标签：必须为< fieldset >元素的一个子元素，为< fieldset >元素定义标题
< button >标签：
< button >标签的属性：
type属性：三种值
1. submit：指定该按钮将用于提交表单
2. reset：指定该按钮将用于重置表单
3. button：指定该按钮没有特定的语义意义
…

< form >标签的部分属性

name属性：规定表单的名称
action属性：规定递交表单时，向何处发送表单数据
method属性：GET/POST表单数据提交方式

样例

<!DOCTYPE html>        <!--框架-->
<html>
<head>
    <title>Document</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no" />
    <link rel="stylemheet" herf="css/codeoenstyle.css" />
</head>
<body bgcolor="yellow" class="is-preload">    <!--拥有关于背景颜色的附加信息-->
<!--Header-->
<section id="header">
    <div class="inner">
        <span class="icon major fa-cloud"></span>
        <h1>Hi,I'm<strong>Photon</strong>,another fine<br />
        little freebie from <a href="http://htmkSup.net">HTML5 UP</a>.</h1>
        <p>Accumsan feugiat mi commodo erat lorem ipsum,sed magna<br />
        lobortis feugiat sapien sed etiam volutpat accumsan.</p>
        <ul class="actions special">
            <li><a href="#one" class="button scrolly">Discover</a></li>
        </ul>
    </div>
</section>
    <p>这是一个段落</p>
    <br />             <!--换行-->
    <a href="http://www.baidu.com"></a>
    <h1 align="center"></h1>      <!--拥有关于对齐方式的附加信息-->   
</body>
</html>