html学习笔记

最新推荐文章于 2024-04-30 16:59:14 发布

theboynoName

最新推荐文章于 2024-04-30 16:59:14 发布

阅读量97

点赞数

分类专栏：前端学习文章标签： html

本文链接：https://blog.csdn.net/qq_23274715/article/details/109625697

版权

前端学习专栏收录该内容

3 篇文章 0 订阅

订阅专栏

html学习笔记

html是用来描述网页的一种语言。HTML指的是超文本标记语言(Hyper Text Markup Language)

<ul>
    <li>AA</li>
    <li>BB</li>
    <li>CC</li>
    <li>DD</li>
</ul>

<ol>
    <li>AA</li>
    <li>BB</li>
    <li>CC</li>
    <li>DD</li>
</ol>

<dl>
    <dt>HTML</dt>
    <dd>
        超文本标记语言，XXXXXX
    </dd>

    <dt>元素</dt>
    <dd>
        组成HTML文档的单元，每个xxxxx
    </dd>
</dl>

表单元素

<input>标签:输入框

type属性：表示输入框的类型
1. text:定义常规文本输入。
2. radio:定义单选按钮输入。name,默认选中checked
3. checkbox:多选框。name,将多个多选框为一个组
4. submit:定义提交按钮
5. password:密码
6. date:日期选择框，有兼容性问题
7. range:范围，min,max
8. color:颜色选择
9. number:数字输入框，min,max,step
10. file:选择文件
11. button:按钮，value
value:输入框的值
placeholder属性:规定可描述输入<input>字段预期值的简短的提示信息。
name属性:规定<input>元素的名称。
maxlength属性:规定<input>元素中允许的最大字符数。

select元素：下拉列表。通常进而option元素配合使用

<p>
    请选择城市：
    <select>
        <option>1</option>
        <option>2</option>
        <option selected>2</option>
    </select>
</p>

<!-- 分组 -->
<p>
    请选择城市：
    <select>
        <optgroup label="first">
            <option>1</option>
            <option>2</option>
        </optgroup>
        <optgroup label="second">
            <option>3</option>
            <option>4</option>
        </optgroup>
    </select>
</p>

textarea元素:文本域选择。有多行文本输入时使用。

button元素：按钮

<p>
    <button type="button">这是一个按钮</button>
</p>

一般用于配合表单元素使用的其他元素:

label:标签文本.通过for属性关联表单元素.

<p>
    请选择性别：
    <input id="male" name="gender" type="radio">
    <label for="male">男</label>
    <input id="famale" name="gender" type="radio">
    <label for="famale">女</label>
</p>

datalist:数据列表。配合使用。用于提示。

form元素:作用是当提交表单时，会将form元素内部的表单内容以合适的方式提交到服务器。

fieldset:分组元素。

表单有如下的状态:

readonly:只读属性
disabled:禁用属性

    <form action="https://www.baidu.com/" method="GET">
        <p>
            账号：
            <input type="text" name="loginid">
        </p>
        <p>
            密码：
            <input type="password" name="loginpwd">
        </p>
        <p>
            城市：
            <select name="city">
                <option value="1">成都</option>
                <option value="2">重庆</option>
                <option value="3">北京</option>
                <option value="4">哈尔滨</option>
            </select>
        </p>
        <p>
            <button type="submit">提交</button>
        </p>
    </form>

图像

图像是通过<img>标签进行定义的。

<img src="w3school.jpg" width="104" height="142" />

格式化相关标签

<br />:换行
<hr />:水平线
<b>:粗体bold
<big>:定义大号字。
<small>:定义小号字。
<i>:斜体italic
<strong>:文本是重要的,类似粗体
<em>:文本是重要的,类似斜体
<sub>:定义下标字。
<sup>:定义上标字。
<ins>:定义插入字。
<del>:定义删除字
<q>:为<q>元素包围引号。
<abbr>:定义缩写或首字母缩略语
<address>:定义文档作者或拥有者的联系信息。
<bdo>:定义文本方向。
<dfn>:定义项目或缩略词的定义。
<cite>:定义著作的标题。浏览器通常会以斜体显示此元素。

计算机代码相关标签

<var>:定义变量
<pre>:定义预格式化文本

<code>
    <pre>
    var person = {
        firstName:"Bill",
        lastName:"Gates",
        age:50,
        eyeColor:"blue"
    }
    </pre>
</code>

插件标签

所有主流浏览器都支持<object>标签。定义了在HTML文档中嵌入的对象。

html中如何播放音视频。

画布

画布是一个矩形区域，您可以控制其每一像素。canvas拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。HTML5的canvas元素使用 JavaScript在网页上绘制图像。

<canvas id="myCanvas" width="200" height="100"></canvas>

其他标签

<title>:定义文档的标题。
<base>:标签为页面上的所有链接规定默认地址或默认目标
<link>:标签定义文档与外部资源之间的关系
<meta>:永远位于head元素内部.它没有结束标签。一般用于设置字符集等。
<script>:标签用于定义客户端脚本，比如 JavaScript
<style>:标签用于为HTML文档定义样式信息。

不建议使用的标签

<center>,<font>,<basefont>,<s>,<strike>,<u>

属性

属性和属性值对大小写不敏感。属性总是以名称/值对的形式出现，比如：name="value"。html的属性分为全局属性和元素属性。元素属性为元素所特有的。全局属性为大部分元素都含有的。

全局属性

accesskey属性:激活元素的快捷键。使用时alt+key激活.以下元素支持 accesskey 属性：<a>, <area>, <button>, <input>, <label>, <legend>, <textarea>。

<a href="http://www.w3school.com.cn/css/" accesskey="c">CSS 教程</a>

class属性:class属性通常用于指向样式表的类。

<!-- 向元素添加多个类 -->
<h1 class="intro important">Header 1</h1>

id属性:给元素一个独一无二的id.用于和样式表交互。

<h1 id="myHeader">W3School is the best!</h1>

style属性:用于内嵌样式表。

<h1 style="color:blue; text-align:center">This is a header</h1>

contenteditable属性:规定元素内容是否可编辑.

<p contenteditable="true">这是一个可编辑的段落。</p>

dir属性:规定元素内容的文本方向.语法：<element dir="ltr|rtl">

<p dir="rtl">Write this text right-to-left!</p>

lang属性:规定元素内容的语言.<element lang="language_code">

html与CSS样式表的连接方式

当浏览器读到一个样式表，它就会按照这个样式表来对文档进行格式化。有以下三种方式来插入样式表：

外部样式表:当样式需要被应用到很多页面的时候，外部样式表将是理想的选择。使用外部样式表，你就可以通过更改一个文件来改变整个站点的外观。在HTML元素中通过class属性引入样式表文件中的样式表.
```
<head>
    <link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
```

内部样式表:当单个文件需要特别样式时，就可以使用内部样式表。你可以在head部分通过<style>标签定义内部样式表。然后在HTML元素中通过class属性引入样式表.

<head>
    <style type="text/css">
        body {
            background-color: red
        }
        p {
            margin-left: 20px
        }
    </style>
</head>

内联样式:当特殊的样式需要应用到个别元素时，就可以使用内联样式。使用内联样式的方法是在相关的标签中使用样式属性style。样式属性可以包含任何CSS属性。以下实例显示出如何改变段落的颜色和左外边距。

<p style="color: red; margin-left: 20px">
    This is a paragraph
</p>

当同一个 HTML 元素被不止一个样式定义时，会使用哪个样式呢？
一般而言，所有的样式会根据下面的规则层叠于一个新的虚拟样式表中，其中数字4拥有最高的优先权。

浏览器缺省设置
外部样式表
内部样式表（位于标签内部）
内联样式（在 HTML 元素内部）
因此，内联样式(在HTML元素内部)拥有最高的优先权，这意味着它将优先于以下的样式声明：标签中的样式声明，外部样式表中的样式声明，或者浏览器中的样式声明（缺省值）。

HTML事件

onchange:HTML元素改变
onclick:用户点击HTML元素
onmouseover:用户在一个HTML元素上移动鼠标
onmouseout:用户从一个HTML元素上移开鼠标
onkeydown:用户按下键盘按键
onload:浏览器已完成页面的加载

最简单的html文件

<!DOCTYPE html>
<html lang='en'>
<head>
    <meta charset="utf-8">
    <title>login</title>
    <link rel="shortcut icon" type="image/x-icon" href="favicon.ico">
    <link rel="stylesheet" href="login.css">
</head>
<body>
    
</body>
</html>

关于技术交流

此处后的文字已经和题目内容无关，可以不看。
qq群:825695030
微信公众号:嵌入式的日常
如果上面的文章对你有用，欢迎打赏、点赞、评论。二维码
,

theboynoName

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
html学习笔记

html学习笔记html是用来描述网页的一种语言。HTML指的是超文本标记语言(Hyper Text Markup Language)标签HTML标签对大小写不敏感.HTML中使用注释:网页标题图标:网页一般都有一个标题图标，位于根目录favicon.ico标签也叫元素。html中包含很多元素主要的目的是语义化与使用方便性。语义化好处：方便阅读，从标题就可以知道使用目的。为了搜索引擎优化搜索。元素展示到页面中的效果，应该由
复制链接

扫一扫