代码编织梦想

目录

1、什么是HTML?

2、W3C

3、HTML标准结构

4、常用的HTML标签

4.1 HTML标签的组成

4.2 HTML标签的属性

4.3 HTML基本标签

4.3.1 标题标签

4.3.2 段落标签

4.3.3 换行标签

4.3.4 水平线标签

4.3.5 字体样式标签

4.3.6 注释和特殊符号

4.4 图像标签

4.5 超链接标签及应用

4.6 媒体标签

4.7 列表标签

4.7.1 什么是列表?

4.7.2 列表的分类

4.8 表格标签

4.9 IFrame内联框架

4.10 表单的应用

4.10.1 表单语法

4.10.2 表单的作用

4.10.3 表单的构成

4.10.4 表单域

4.10.4 表单控件

5、 表单初级验证

6、路径的使用

1、什么是HTML?

HTML:Hyper Text Markup Language(超文本 标记 语言)

  1. 它是一种语言;

  2. 标记 :使用标签的形式来标识页面中的不同组成部分 说明了这个语言的组成部分是标签;

  3. 超文本:包括文字、图片、音频、视频、动画等;

2、W3C

W3C:World Wide Web Consortium(万维网联盟)成立于1994年,是web技术领域最权威和具影响力的国际中立性技术标准机构。

W3C标准包括:

  • 结构化标准语言(HTML、XML):控制页面元素和内容

  • 表现标准语言(CSS):控制网页元素的外观和位置等页面样式(如:颜色、大小等)

  • 行为标准语言(JavaScript):网页模型的定义与页面交互

Web标准要求页面实现:结构、表现、行为三层分离。

3、HTML标准结构

网页类似于一篇文章,每一页文章内容是有固定的结构的,如:开头、正文、落款等……

网页中也是存在固定的结构的,如:整体、头部、标题、主体

网页中的固定结构是要通过特定的 HTML 标签 进行描述

  • html标签:网页的整体

  • head标签:网页的头部

  • body标签:网页的身体

  • title标签:网页的标题

 

4、常用的HTML标签

4.1 HTML标签的组成

结构说明:

  1. 标签由<、>、/、英文单词或字母组成。并且把标签中<>包括起来的英文单词或字母称为标签名。

  1. 常见标签由两部分组成,我们称之为:双标签。前部分叫开始标签,后部分叫结束标签,两部分之间包裹内容。

  1. 少数标签由一部分组成,我们称之为:单标签。自成一体,无法包裹内容。

4.2 HTML标签的属性

属性注意点:

  1. 标签的属性写在开始标签内部

  1. 标签上可以同时存在多个属性

  1. 属性之间以空格隔开

  1. 标签名与属性之间必须以空格隔开

  1. 属性之间没有顺序之分

4.3 HTML基本标签

4.3.1 标题标签

特点:1、标签的文字都有加粗。

           2、标签的文字都有变大,从h1~h6文字逐渐减小。

           3、每一个标题独占一行。

h1标签最为重要,开发中有特定的使用场景,如:新闻的标题、网页的logo部分。

4.3.2 段落标签

特点:1、段落之间存在间隙。

2、每个段落是独占一行。

4.3.3 换行标签

换行标签:br 单标签

作用:强制换行

4.3.4 水平线标签

水平线标签:hr标签 单标签

作用:分割不同主题的水平线

4.3.5 字体样式标签

字体样式标签:让文本有加粗、下划线、倾斜、删除线文本的格式效果

4.3.6 注释和特殊符号

1、注释

html中的注释以“<--”开头,以"-->"结束,不会显示在页面中,可以更好的解释代码。

<!--注释 -- > 快捷键: ctrl + /

2、特殊符号

img

4.4 图像标签

图片标签:img 单标签

作用:在网页中展示一张图片

属性:1、src:告诉浏览器要显示哪一张图片属性值:路径(如果图片和当前页面在同级目录下,此时直接写图片的名字即可)

2、alt:替换文本,当图片加载失败时(如:路径写错了),才显示的文字

3、title:提示文本,当鼠标悬停在图片上时,才显示的文字

4、width:图片的宽度

5、height:图片的高度

注意点:1、如果只设置图片的宽度或者高度,此时另一个会自动等比例缩放

2、如果同时设置了两个,若设置不当此时图片可能会变形

4.5 超链接标签及应用

超链接:a标签 双标签

作用:点击之后跳转网页

属性:1、href:告诉浏览器点击之后跳转去哪一个网页

取值:路径

1.1、外部链接:互联网上的绝对路径

1.2、内部链接:推荐使用相对路径

2、target:目标网页的打开方式

取值:

2.1、_self:(默认值) 在当前窗口中进行跳转,原网页会被覆盖

2.2、_blank:在新窗口中进行跳转,原网页保留

4.6 媒体标签

1、视频标签:video

2、音频标签:audio

属性:

1、src:路径

2、controls:播放的控件

3、autoplay:自动播放(部分浏览器不支持)

4、loop:循环播放

4.7 列表标签

4.7.1 什么是列表?

列表就是信息资源的一种展现形式,它可以使信息结构化和条理化,并以列表的样式显示出来,以便浏览者能更快捷的获取相应信息。

4.7.2 列表的分类

1、无序标签

场景:在网页中表示一组无顺序之分的列表,如:新闻联播。

2、有序标签

场景:在网页中表示一组有顺序之分的列表,如:排行榜、试卷、问答。

3、自定义列表

场景:自定义列表不仅仅是一列项目,而是项目及其注释的组合。如:官网下方栏。

4.8 表格标签

场景:在网页中以行+列的单元格的方式整齐展示和数据,如:学生成绩表

注意点:标签的嵌套关系:table > tr > td

行:tr
列:td
边框宽度:border
表格宽度:width
表格高度:height
跨行:rowspan 
跨列:colspan

4.9 IFrame内联框架

iframe元素会创建包含另外一个文档的内联框架(即行内框架)。iframe是属于内联框架,它是body的子级,和body是父子关系。iframe作为一个普通元素放在body里。

属性

  • width 可设置内联框架的宽

  • height 可设置内联框架的高

  • name 设置框架名称

  • src 设置页面的路径

  • scrolling规定是否在 iframe 中显示滚动条(yes,no,auto)

  • frameborder规定是否显示框架周围的边框(1默认有边框,0)

4.10 表单的应用

4.10.1 表单语法

4.10.2 表单的作用

  • 信息的收集

  • 数据的验证

  • 在线考试

  • 调查问卷

4.10.3 表单的构成

  • 提示性文字:提示用户如何操作(一般由placeholder属性完成)

  • 表单域:相当于一个容器,包含若干表单控件

  • 表单控件:具体的功能项(按钮,下拉列表,输入框等)

4.10.4 表单域

<form action="远程服务器的URL(存放地址)" method="信息的提交方式" name="表单名">
​
表单内容
​
</form>

4.10.4 表单控件

(1)input:输入框。都有value属性,通过用户输入信息将value属性的值提交给远程服务器并保存。

单行文本框:<input type="text" id=" " value=" " placeholder="提示信息" > 密码框:<input type="password" placeholder="提示信息"> 数字输入框:<input type="number> (input后面的属性如上) 日期输入框:<input type="date"> 颜色输入框:<input type="color"> 文件选择框(通常用于上传文件):<input type="file" > 单选按钮:<input type="radio" name="按钮名称" checked> 文本 (check是让表单进入后先默认选择此选项 name值相同则是让此文本选项为单选,不可同时选择相同name值的选项) 复选按钮:<input type="checkbox" value="按钮显示出来的内容" id=" "> (此处的value表示的事按钮显示出来的文本内容) 提交按钮:<input type="submit" value="按钮上显示出来的内容"> (必须放在<form></form>中有效 ) 重置按钮:<input type="reset" value="按钮上显示出来的内容"> (必须放在<form></form>中有效 ) 普通按钮:<input type="button" value="按钮上显示出来的内容">

(2)select:下拉列表

                  <select>
                                <option value="值1">选项1</option>
​
                                <option value="值2">选项2</option>
​
                                <option value="值3">选项3</option>
                 </select>

 

(3)textarea:文本框(多行文本输入框,用户可以调节放大缩小)

                     <textarea rows="行数" cols="列数"/>

(4)邮箱验证:

(5)滑块验证和搜索框:

5、 表单初级验证

我们平时在网页上填写表单的时候,往往都会发现填写表单内容时有一定的要求,这就是所谓的表单验证

使用表单验证的好处

  • 减轻服务器的压力

  • 保证数据的可行性和安全性

实际开发中,表单验证基本使用js完成的,但是html中的input表单也提供一些初级的验证方法,主要有以下3种:

  • placeholder属性

  • required属性

  • pattern属性

1.placeholder属性

placeholder属性 是input 类型的文本框提供的一种提示,可以描述文本框期待用户输入的内容,提示语默认显示,当文本框中输入内容。时提示语消失。

2.required属性属性

required属性规定文本框填写内容不能为空,否则不允许用户提交表单。

3.pattern属性

pattern属性指用户输入的内容必须符号正则表达式所指的规则,否则就不能提交表单。

6、路径的使用

1、相对路径

相对路径:以引用文件之网页所在位置为参考基础,而建立出的目录路径。因此,当保存于不同目录的网页引用同一个文件时,所使用的路径将不相同,故称之为相对。

同级目录:直接写:目标文件名字!

下级目录:直接写:文件夹名/目标文件名字!

上级目录:直接下:../目标文件名字!

2、绝对路径

绝对路径:以Web站点根目录为参考基础的目录路径。之所以称为绝对,意指当所有网页引用同一个文件时,所使用的路径都是一样的。

盘符开头:D:\day01\images\1.jpg

完整的网络地址:https://www.baidu.com/2018czgw/images/logo.gif

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/denggongming/article/details/126983094

如何让html引用公共的头部和尾部(多个html文件公用一个header.html和footer.html)_草巾冒小子的博客-爱代码爱编程_静态html公共头部尾部

文章目录 如何实现多个.html静态页,引用同一个header.html和footer.html文件?HTML如何引用公共的页眉头部header.html文件和尾部footer.html文件?首先,先看一下代码与界面

HTML入门与进阶以及HTML5-爱代码爱编程

目录   一、简介 1、前端开发最核心技术 (1)HTML是什么? (2)CSS (3)JavaScript 2、前端开发其他技术   二、基础内容 1.基础总结 2.HTML的基本标签 (1)HTML标签 (2)head标签 (3)body标签 3、段落与文字 (一)、段落标签 (二)、网页特殊符号 (三)、自闭合标签

用HTML+CSS做一个漂亮简单的个人网页-爱代码爱编程

用HTML+CSS做一个漂亮简单的个人网页 1.刚好帮我妹写了一个作业做一个个人网页设计,简单的三个小页面,就从网上随便找了图片自己随便设计了下东拼西凑哈哈哈!!!可能有点low但是对她来说或者需要做简单的个人网站应该就够了吧!图片是从站酷上面找的(因为我不会设计图),如果有侵权了什么的请联系我立刻马上删掉哈! (首页的首屏有下雪了的特效,右下角有音乐播

机器学习11:用sns.pairplot()做特征工程-爱代码爱编程

用一个糖尿病确诊预测案例,从头到尾了解一下机器学习的工作流程。 导入相关库,读取数据 # Import our libraries import pandas as pd import numpy as np from sklearn.datasets import load_diabetes from sklearn.model_selection

【学习笔记】HTML+CSS模仿静态淘宝首页-爱代码爱编程

一、先上一张成果图 二、已上传Github https://github.com/ImDaret/Front-end-learning 三、直接上代码(头大预警) HTML: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"

网上超级火的过年除夕倒计时,纯HTML源码,数据信息皆可以修改,今天免费分享给大家,供大家学习娱乐-爱代码爱编程

点击文章下面超链接,即可免费下载,源码以及文件素材,无需积分,关注后即可下载 资源须知: 因为资源是我去年上传的,所以最近下载这个资源的同学,可能会出现倒计时为负的情况,下面是解决办法: 找到js文件夹 打开找到app.js 可以就用记事本打开,然后保存,在此点击index.html运行即可 最近由于不知道什么情况,上传的资源,他老是在审核中,本来

[Python从零到壹] 十三.机器学习之聚类算法四万字总结全网首发(K-Means、BIRCH、树状聚类、MeanShift)-爱代码爱编程

欢迎大家来到“Python从零到壹”,在这里我将分享约200篇Python系列文章,带大家一起去学习和玩耍,看看Python这个有趣的世界。所有文章都将结合案例、代码和作者的经验讲解,真心想把自己近十年的编程经验分享给大家,希望对您有所帮助,文章中不足之处也请海涵。Python系列整体框架包括基础语法10篇、网络爬虫30篇、可视化分析10篇、机器学习20篇

[Python从零到壹] 十四.机器学习之分类算法五万字总结全网首发(决策树、KNN、SVM、分类对比实验)-爱代码爱编程

欢迎大家来到“Python从零到壹”,在这里我将分享约200篇Python系列文章,带大家一起去学习和玩耍,看看Python这个有趣的世界。所有文章都将结合案例、代码和作者的经验讲解,真心想把自己近十年的编程经验分享给大家,希望对您有所帮助,文章中不足之处也请海涵。Python系列整体框架包括基础语法10篇、网络爬虫30篇、可视化分析10篇、机器学习20篇

1. HTML学习笔记-2021年11月2日-爱代码爱编程

文章目录 1.1 初识HTML1. 2 HTML注释1. 3 标签的属性1.4 网页的基本结构1.5 基本结构说明2.1 测试编辑器2.2 实体2.3 meta标签2.4 语义化标签2.5 列表2.6 超链接2.7 图片标签2.8 内联框架2.9 音视频2.10 相对路径 1.1 初识HTML <html> <head&g

纯HTML+CSS网页设计期末作业(个人网站)-爱代码爱编程

目录 纯HTML+CSS网页设计期末作业(个人网站)源码链接效果展示index 页面about 页面hobbies 页面书籍介绍页面元曲介绍页面源码index.htmlindex.cssabout.htmlhobbies.htmlhobbies.cssme.htmlme.cssbook1.htmlbook.cssyuanqu.htmlyuanqu.

机器学习练习题-爱代码爱编程

机器学习考试练习题 单项选择题多项选择题判断题填空题简答题 单项选择题 1.在NumPy中创建一个元素均为0的数组可以使用( )函数。 [A] A.zeros( ) B.arange( ) C.linspace( ) D.logspace( ) 2.通常( )误差作为泛化误差的近似。 [A] A.测试 B.训练 C.经验 D.以上都可以