HTML学习笔记整理

最新推荐文章于 2024-04-19 20:49:39 发布

想睡懒觉的鱼

最新推荐文章于 2024-04-19 20:49:39 发布

阅读量262

点赞数

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

本文链接：https://blog.csdn.net/weixin_43479366/article/details/108609771

版权

前端学习专栏收录该内容

5 篇文章 0 订阅

订阅专栏

HTML

HTML = HyperTextMarkupLanguage

超文本标记语言，不是一种编程语言，而是标记语言，用于告诉浏览器如何构造页面。
超文本：指页面内可以包含图片、链接、音乐、程序等非文字元素。
标记语言：通过标记符号来标记要显示在网页中的各个部分。

浏览器渲染html文件过程
1.浏览器从上而下解析html文件
2.构建dom树
3.dom树结合css文件，构建呈现树
4.布局
5.绘制

HTML网页结构

doctype 声明部分，用于告诉浏览器用何种方式解析文件
html HTML的根元素，包含HTML文档中的所有元素
head 不会显示在浏览器视口中
title 显示在浏览器选项卡的标题
meta 用于配置元信息，配置
charset = utf-8 编码格式
body 网页主体

HTMl基本语法
1）注释


2）元素组成
开始标签、内容、结束标签
空元素：br、hr、input、meta、img、link

3）属性
1.核心属性：绝大多数标签都可以应用的属性
id、class、title、style
2.特有属性：某些标签特有的属性
alt、src、href、target

4）元素分类

1.块级元素
如：div、h1、p、ul、li、ol、dl
特点：
（1）独占一行
（2）可以设置宽高
（3）默认宽度100%，高度由内容或者子元素撑起

2.行内元素
如：span、a、img、strong、b、sub、sup、i
特点：
（1）与其他行内元素共享一行
（2）默认宽高由内容决定
（3）设置宽高无效
（4）行内元素中不能嵌套块元素、块元素中可以嵌套行内元素

3.功能元素（属于行内元素）

1.表格 table
属性：border、width、caption、
thead、tr、th/td、
tbody【表格主体，不能省略】、colspan、tr、th/td、rowspan、align
tfoot、tr、th/td

2.表单 form
表单控件
radio 单选按钮
checkbox 复选按钮
表单控件的name属性值，是将来提交给后台的属性名，提交给后台的属性值是用户在控件上输入的信息
且表单默认的提交方式是get方式

get方式典型特征：用户信息在地址栏中。get方式不安全，提交的数据量有限制

post方式，用户信息在请求报文的请求里，比较安全，提交的数据量也比较大

写在表单内的button按钮默认有提交表单功能，写在表单外的默认没有提交表单功能

可以提交的是：
type=submit、image，写在表单form里，没写type的button
除此之外的都不可以提交

disabled 禁用可见，不可操作，不可提交
readonly 只读可见，不可操作，可提交

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>html5表单</title>
</head>

<body>
    <form action="#">
        进度条<progress value="20" id="progress" max="100"></progress>


        <meter low="69" high="80" max="1000" value="800" low="300" high="700" optimum="20">B</meter>
        <br>
        <input type="search" list="one">
        <datalist id="one">
            <option value="shanghai">上海</option>
            <option value="dongjing">东京</option>
            <option value="beijing">北京</option>
        </datalist>
        <br>
        <section>
            <h3>input的type取值</h3>
            <input type="number" name="" id="" max="100" step="10">
        </section>
        <br>
        滑块：<input type="range" name="" id="">
        <br>
        <!-- js出现的目的，表单验证，pattern--正则表达式匹配 -->
        电话号码： <input type="tel" name="" id="" pattern="1[0-9]{10}">
        <br>
        邮箱：<input type="email" name="" id="">
        <br>
        网址：<input type="url">
        <br>
        颜色：<input type="color" name="" id="">
        <h3>日期</h3>
        年月日：<input type="date" name="" id="">
        <br>
        时间：<input type="time" name="" id="">
        <br>
        年月日时间：<input type="datetime-local" name="" id="">
        <br>
        月份：<input type="month" name="" id="">
        <br>
        周数：<input type="week" name="" id="">
        <br>
        <button>提交</button>
    </form>
    <script>
        var progress = document.getElementById('progress');
        // progress.value = progress.value + 1;
        // 间歇调用 每隔多少毫秒执行一次代码
        setInterval(function () {
            if (progress.value < 100) {
                progress.value = progress.value + 5;
            }
        }, 1000);
    </script>
</body>

</html>

想睡懒觉的鱼

关注

0
点赞
踩
6

收藏

觉得还不错? 一键收藏
0
评论
HTML学习笔记整理

HTMLHTML = HyperTextMarkupLanguage超文本标记语言，不是一种编程语言，而是标记语言，用于告诉浏览器如何构造页面。超文本：指页面内可以包含图片、链接、音乐、程序等非文字元素。标记语言：通过标记符号来标记要显示在网页中的各个部分。浏览器渲染html文件过程1.浏览器从上而下解析html文件2.构建dom树3.dom树结合css文件，构建呈现树4.布局5.绘制HTML网页结构doctype 声明部分，用于告诉浏览器用何种方式解析文件html HTML
复制链接

扫一扫