HTML笔记

HTML

介绍

超文本标记语言,标准通用标记语言下的一个应用。“超文本”就是指页面内可以包含图片、链接,甚至音乐、程序等非文字元素。超文本标记语言的结构包括“头”部分(Head)、和“主体”部分(Body),其中“头”部提供关于网页的信息,“主体”部分提供网页的具体内容。——百度百科

特点

  1. 页面内除了文本还可以包含图片、链接,甚至音乐、程序等非文字元素。
  2. html不是一门编程语言,只是一门标记语言,类似于工具一样的东西,。且html中,不存在编程语言的语法,而是充斥着各式各样的标签。
  3. html运行环境:浏览器。
  4. 在浏览器中我们见到的所有网页本质上都是一个文本,而这个文本又称之为html。

html文档结构

<!DOCTYPE html>html5文档声明头,想要完整的使用html5语法,必须使用文档声明头,声明当前文件是html5文件。

双标签,定义html文档内容的结构,所有的html文档的内容都需要卸载这对标签内部。

头部,通常情况下,里面的内容是当前对于网页的一些预定义信息设置。

身体,网页里面要显示给用户看的内容,全部写在body里面。

html网页预定义信息

常用meta标签

<meta charset="UTF-8">:设定当前网页的编码格式。可以防止并解决乱码问题。

meta标签是一个单标签,通过charset 属性,将其属性值设置为需要的编码,即可为当前的网页设置编码格式。

<meta name="author" content="杜甫">

<meta name="keywords" content="学习">

title标签

<title>网页标题</title>通常情况下, tilte要放在meta字符集设置的下面,防止出现乱码

css的使用

<link rel="stylesheet" href="style.css"> 引入外部的css文件

<style> /*css代码*/ </style>

js的使用

<script src="01.js"></script> 引入外部的js脚本文件,需要注意的是,两个script标签中间不能存在任何内容换行都不可以

<script> // js代码 </script>

html内容显示区域body标签内的基础标签

<hr>换行分割线
<br>换行
<h1>-<h6>多级标题
<!---->注释

在html中,一些语义不是太明显的标签我们可以用来做挂件。

html核心:语义化结构标签

常用基础标签

带有语义的标签

em,强调
strong ,比em强调级别更高
abbr,定义缩写,与title属性相互搭配使用
address,定义地址元素
blockquote,定义块引用,通常情况下会产生缩进
cite,通常情况下,某段话引子某本书,可以使用cite进行说明
ins,定义被插入文本
del,定义被删除文本

带有一定样式的标签[此类标签也同时带有语义]

b,定义粗体文本
i,定义斜体文本
big,定义大号文本
small ,定义小号字体文本
sup,上标文本
sub,下标文本
bdo,定义文本显示方向,属性:dir,值,ltr,rtl

输出类标签

pre,代码中样式原样输出
code,定义计算机代码文本
kbd,定义键盘文本
var,定义变量

功能类标签

1. a标签
        定义超链接实现页面跳转
        定义锚点实现书签功能
2. 列表
        无序列表
            ul,li
        有序列表
            ol, li
3. 页面嵌套
        iframe
4. 项目列表描述
        dl,dt,dd
5. 图片
     img
        常用属性
            alt,图像替代文本
            width,height
            ismap,定义图像映射的一张图像
        通过img 实现图像映射
            map 标签,定义图像映射
            <area> 定义图像映射内部的区域
        链接跳转的图像
            将图片嵌套在a标签中
6. 表格
    table标签
        表格标题 <caption>标签
        表格页眉   <th>标签
        表格的行 <tr>标签
        表格的单元格  <td>标签
        表格的头部  <thead>标签
        表格的主干 <tbody>标签
        表格的尾部  <tfoot>标签
7. 页面所有链接的基础链接 
    <base> 标签 
        base标签位于head标签内部
8. 表单
    <form>标签
        1. 输入域 <input>
            type属性
                相关属性值
                    button
                    file
                    hidden
                    text
                    password
                    radio
                    checkbox
                    image
                    reset
                    submit
            alt属性,定义当按钮为图片时,图片的替代文本
            src属性,定义当按钮为图片时,图片的链接地址
            checked属性,定义默认选项
            disabled属性,禁用当前输入域
            readonly属性,对当前输入域只读
            maxlength属性,定义输入域字符的最大长度 
            name属性,定义当前的输入域的名字
            value属性,定义当前输入域的默认值
        2. 文本输入区<textarea>
            cols属性,规定可见列数
            rows属性,规定可见行数
            disabled属性,禁用当前文本输入区
            name属性,当前文本区的名字
            readonly属性,当前文本区域只读
        3. 按钮  <button>
            disabled属性,禁用此按钮
            name属性,按钮名字
            type属性,按钮类型
                button
                reset
                submit
            value属性,按钮上显示文本内容的默认值
        4. 下拉菜单<select>
            相关属性
                disabled属性,禁用该菜单
                multipe属性,规定可同时选中多项
                name属性,下拉列表的名字
                size属性,菜单中可见项目的数目
            <optgroup>标签,定义下拉列表选项分组
                label属性,定义选项组的标记,必要属性
                disabled 属性,禁用
            <option>标签,定义下拉列表中的选项
                disabled属性,禁用
                label属性,定义当使用 <optgroup> 时所使用的标注
                selected属性,规定选项(在首次显示在列表中时)表现为选中状态。
                value属性,向服务器输送的值
        5. 表单中的标记<label>
        6. 表单中相关元素分组 <fieldset>
            <legend>定义分组标题
原文地址:https://www.cnblogs.com/lrf9606/p/7077469.html