视频网站用什么做的好,网络规划设计师2023论文,有没有帮别人做图片的网站赚钱,校园网站系统建设需求HTML
【一】HTML简介
【1】什么是HTML
HTML是一种用于创建网页结构和内容的超文本标记语言#xff0c;它是构建网页的基础。为了让浏览器正确渲染页面#xff0c;我们必须遵循HTML的语法规则。浏览器在解析网页时会将HTML代码转换为可视化的页面#xff0c;所以我们在浏览…HTML
【一】HTML简介
【1】什么是HTML
HTML是一种用于创建网页结构和内容的超文本标记语言它是构建网页的基础。为了让浏览器正确渲染页面我们必须遵循HTML的语法规则。浏览器在解析网页时会将HTML代码转换为可视化的页面所以我们在浏览器中看到的页面实际上是由HTML代码生成的。
【2】简单示例
html
headmeta charsetUTF-8title网页标题 title/title
/head
bodyh1标题标签 h/h1p段落标签 p/p
/body
/html【二】HTML中的注释语法
在HTML中我们可以使用注释来添加对代码的说明或者临时禁用某部分代码。注释不会在浏览器中显示只是作为开发者之间的交流和标记使用。
【1】单行注释
!-- 单行注释 --【2】多行注释
!--
多行注释1
多行注释2
多行注释3
--【三】HTML的文档结构
【1】基本机构 HTML的文档结构通常包含html、head和body这三个主要部分。 html标签是整个HTML文档的根元素它包含了整个网页的内容。 head标签用于定义文档的头部信息其中可以包含一些配置和描述性的元素。这些元素不会直接显示在浏览器中而是提供一些关于页面的描述和配置如页面标题、字符编码等。 body标签包含了整个页面的可见内容如段落、标题、图像、链接等。这些元素将直接影响和呈现给用户所看到的页面。
【2】其他元素 在基本的HTML文档结构中通常还包含一些其他的元素。 !DOCTYPE html声明定义了当前文件是一个HTML文件它告诉浏览器使用哪个HTML版本来解析文档。 title标签用于设置页面的标题它将显示在浏览器的标题栏或标签页上。 meta标签用于设置文档的元数据如字符编码、关键词等。
!DOCTYPE html
html
headtitle页面标题/titlemeta charsetUTF-8
/head
body页面内容
/body
/html注意 HTML 的标签是有层级关系的内部的标签必须位于外部标签的范围之内无法单独存在。HTML代码是没有格式的可以全部写在一行只不过我们习惯了缩进来表示代码
【四】HTML标签的分类1
HTML标签可以根据其闭合情况分为双标签和单标签自闭标签两种类型。
【1】双标签
双标签由开始标签和结束标签组成它们包围着要展示的内容。 开始标签用于标识标签的开始通常以开头以结尾。结束标签用于标识标签的结束通常以/开头以结尾。标签的内容写在开始标签和结束标签之间。
h1标题1/h1
a hrefhttps://www.example.com这是一个链接/a【2】单标签(自闭标签)
单标签自闭标签只有一个标签它在自己内部闭合不需要另一半标签。 单标签通常以开头以/结尾。单标签用于表示没有内容或没有需要包围的元素。
img srcimage.jpg alt图片【五】标签的分类2
HTML中的标签还可以分为两种主要类型块级标签和行内标签。
【1】块级标签
1介绍
块级标签Block-level elements是指一类会独自占据一行的HTML元素。它们从新的一行开始直到遇到下一个块级标签或行内标签。块级标签通常用于组织和结构化页面的不同部分并且可以包含其他块级元素和行内元素。
2常见的块级标签
div用于定义文档中的一个区域或一个区块。p用于定义段落。h1-h6用于定义标题的级别。ul用于创建无序列表。ol用于创建有序列表。table用于定义表格。
【2】行内标签
1介绍
行内标签Inline elements是指在一行内显示的HTML元素它们不会打断当前行并且只占据所需的内容宽度。行内标签通常用于插入和标记文本中的小片段或注释并且不能包含块级元素只能包含其他行内元素。
2常见的行内标签
span用于对文本的某个部分进行样式化或划定特定区域。a用于创建超链接。strong使文本加粗显示。em使文本斜体显示。img用于插入图像。br用于换行。
3补充
需要注意的是HTML5中引入了一些新的标签和元素它们的性质可能介于块级和行内之间被称为块级行内元素block-level inline element或行内块级元素inline block-level element。 如 button、input 等其具体表现取决于CSS的属性和样式。
【3】总结
块级标签可以修改长度行内标签不可以修改了也不会发生变化。块级标签内部可以嵌套任意的块级标签和行内标签但 p 标签除外它只能嵌套行内标签不能嵌套块级标签。行内标签不能嵌套块级标签但可以嵌套行内标签。
【六】head常用标签
【1】title
用途定义网页标题显示在浏览器标签栏上
title网页标题/title【2】style
用途定义内部CSS样式
style
!--css代码--
/style【3】script
用途定义内部JavaScript代码也可用于引入外部JavaScript文件
script
!--js代码--
/script【4】link
用途引入外部CSS文件
link relstylesheet hrefstyle.css【5】meta 用途用于在网页中提供元数据。 元数据是描述数据的数据它们提供关于网页内容、字符集、作者、关键字等信息帮助搜索引擎和浏览器理解和处理网页。 常见的meta标签 meta charset字符集 指定网页文档使用的字符集常见的字符集有UTF-8、ISO-8859-1等。 meta nameviewport contentviewport设置 用于指定网页在移动设备上的视口viewport设置包括网页的宽度、初始缩放比例等。 meta namekeywords content关键词 用于指定网页的关键词帮助搜索引擎判断网页的相关性。 meta namedescription content网页描述 用于提供对网页内容的简要描述显示在搜索结果页面中作为网页摘要。 meta namerobots content指令 指定搜索引擎对网页的索引和抓取规则如通过noindex禁止索引网页。 meta http-equiv参数 content内容 用于设置HTTP响应头信息如meta http-equivrefresh content5;urlhttp://example.com/可在5秒后自动跳转到指定地址。
【七】标签的两个重要属性
【1】id值
id值是类似于标签的唯一标识符用于在同一个页面上唯一标识一个特定的元素。每个id值在整个文档中都必须是唯一的不能重复使用。通过id值我们可以在JavaScript或CSS中引用特定标签并对其进行操作或样式化。类似于标签的身份证号在同一个页面上id值不能重复。
【2】class值
一个HTML标签可以具有多个class值这样可以将多个不同的样式或行为应用于同一个标签。多个class值之间使用空格分隔。通过class值我们可以定义一组相关的样式或行为并将其应用于多个标签实现代码的重用和简化。类似于面向对象中类的继承一个class可以继承多个class值。
【3】小结
使用id值和class值我们可以在HTML中标识和操作特定的元素以及应用样式和行为。id值用于唯一标识一个元素而class值用于定义和应用一组相关的样式或行为。
【八】body常用标签
在HTML中body标签是用来定义页面的主体内容的。
【1】h标签
h标签用于定义标题的级别共有六个级别从h1到h6其中h1表示最高级别的标题h6表示最低级别的标题。
h11级标题/h1
h22级标题/h2【2】p标签
p标签用于定义段落在网页中呈现一段文本。p标签会自动在段落前后添加一些空白间距用于区分段落之间的内容。
p段落一/p
p段落二/p【3】a标签
a标签用于创建超链接允许用户点击链接跳转到指定的URL或页面位置。
a href目标链接 target_blank/ahref属性 href属性指定了链接的目标URL或页面位置。可以是一个网址也可以是页面中其他标签的id值用于实现页面内的锚点跳转。当a标签指定的网址从来没有被点击过时a标签的字体颜色通常是蓝色。当a标签指定的网址被点击过后a标签的字体颜色通常是紫色。 target属性 target属性用于指定链接在何处打开。_self在当前窗口或标签页中打开链接默认行为。_blank在新的窗口或标签页中打开链接。 a标签的锚点功能 点击链接后自动跳转到页面中指定的区域 a href#顶部区域id回到顶部/a通过在href属性中使用#id值可以实现在页面内部的不同位置之间进行跳转。
【4】img标签
img srcimage.jpg alt图片描述 title图片信息 height200 width300src属性 src属性用于指定图片的路径可以是本地图片的路径或者网络上的图片链接。 alt属性 alt属性用于提供图片的替代文本当图片无法加载时替代文本将显示在图片的位置上。这对于视觉障碍用户或者图片加载失败的情况下提供了描述性信息。 title属性 title属性用于在鼠标悬停在图片上时显示一段文本信息。当用户将鼠标悬停在图片上方时会显示title属性中指定的文本。 height和width属性 height和width属性用于指定图片的高度和宽度。可以使用具体的像素值或者百分比来调整图片的尺寸。当只设置其中一个属性时另一个属性会按比例缩放以保持图片的宽高比。如果同时设置了height和width属性并且不考虑宽高比可能会导致图片失真。
【5】无序列表
无序列表使用ul和li标签来创建其中ul定义列表而li定义每个列表项。无序列表通常使用符号如圆点或实心点来表示每个列表项。
ulli标签1/lili标签2/li
/ul•标签1
•标签2【6】有序列表
有序列表使用ol和li标签来创建其中ol定义列表而li定义每个列表项。有序列表使用数字或字母来表示每个列表项的顺序。
olli标签1/lili标签2/li
/ol1.标签1
2.标签2【7】标题列表
标题列表使用dl、dt和dd标签来创建其中dl定义列表dt定义标题dd定义内容。标题列表通常用于显示标题和对应的描述信息。
dldt标题一/dtdd内容一/dddt标题二/dtdd内容二/dd
/dl标题一内容一
标题二内容二【7】div标签
div标签是最常见的HTML容器标签用于将文档分隔成独立的区块。它可以包裹其他标签并通过设置样式控制内容的布局和外观。虽然 div 没有具体的语义含义但常被用于定义页面的整体结构或划分不同的内容区域。可以通过CSS样式对div进行布局和样式的调整。
div这是div标签pdiv内的段落/pullidiv内的列表字段1/lilidiv内的列表字段2/li/ul
/div【8】span标签
span标签是内联元素主要用于对文本或一小段文本进行样式上的控制。通常用于对特定部分进行样式修饰或添加特殊效果例如修改文字颜色、加粗、斜体等或者配合CSS实现一些交互效果。与 div 不同span 主要用于样式上的调整没有具体的语义意义。’可以通过设置span标签的样式属性来改变其中文本的外观。
spanpspan标签的内容/pp本字段将span stylecolor: redspan/span写为红色/p
/span【9】table标签
表格可以使用 table、tr 、thead、tbody、th和 td 标签来创建。其中table 标签用于定义整个表格tr 标签用于定义表格的行td 和th标签用于定义表格的单元格th标签用于加粗显示字段信息。thead标签用于定义表格的表头tbody标签用于定义表格的数据部分
!--基础表格--
table border1 cellpadding4 cellspacing3theadtrth表头-加粗信息/thtd表头-普通信息/td/tr/theadtbodytrtd colspan2数据部分第一行-水平占据两列/tdtd rowspan2数据部分第一行-垂直占据两行/td/trtrtd colspan2数据部分第二行-水平占据两列/tdtd rowspan2数据部分第二行-垂直占据两行/td/tr/tbody
/tableborder为表格添加外边框。cellpadding调整字体离边框距离。cellspacing调整内边框离外边框的距离。
【10】form标签
表单可以使用 form 标签来创建。表单允许用户在网页中输入信息并将其提交到服务器进行处理。在 form 标签内你可以添加各种表单元素例如文本输入框、复选框、单选按钮等以便用户输入信息。还可以使用 input 标签来创建特定类型的表单元素。表单的组成 表单域Form Fields用于接收用户输入的数据常见的表单域包括文本框Input Text、单选框Radio Buttons、复选框Checkboxes、下拉列表Select、文本区域Textarea等。提交按钮Submit Button用户在填写完表单后点击提交按钮将表单数据发送到服务器进行处理。取消按钮Cancel Button允许用户取消当前的操作并清空表单内的所有数据。标签Labels描述表单域的作用或意义增加表单的可读性和易用性。校验机制Validation用于验证用户输入的数据是否符合预期的格式或要求常见的校验包括必填项Required Fields、长度限制Length Limitation、数据格式验证Data Format Validation等。
form action/formaction控制数据提交的后端路径给哪个服务端提交数据。 不写任何值默认将数据提交到当前页面所在的URL。写全路径例如 actionhttps://www.baidu.com将数据提交到百度的服务端。只写路径后缀例如 action/index/自动识别出当前服务端的IP和端口拼接到前面如 host:port/index/。
【11】input标签
input标签是HTML中用于创建表单输入控件的标签之一。它可以用于接受用户的输入并将这些输入数据提交到服务器进行处理。
1参数
type指定输入框的类型常见的类型包括 text文本输入框用于接受单行文本。password密码输入框输入的内容会被隐藏。checkbox复选框用户可以选择多个选项。radio单选按钮用户只能选择其中一个选项。加载默认选项要加checker checker。当标签的属性名和属性值一样的时候可以简写checker 。file文件上传框用于选择上传的文件。date日期submit提交按钮用于提交表单数据。reset重置按钮用于重置表单数据。button普通的按钮本身没有功能可以给他绑定js功能 name指定输入框的名称在表单提交时会将输入框的值与名称一起发送到服务器。value指定输入框的初始值。placeholder在输入框为空时显示的提示文本。required设置为true时表示输入框必须填写内容才能提交表单。readonly设置为true时表示输入框只读用户无法编辑。disabled设置为true时表示输入框被禁用用户无法编辑且不会被提交。size指定输入框的可见宽度单位为字符数。maxlength指定输入框中可以输入的最大字符数。autocomplete控制浏览器是否自动填充输入框。常见的值有on开启自动填充和off关闭自动填充。
2示例
!DOCTYPE html
html
headtitle页面标题/titlemeta charsetUTF8
/head
body
h1注册页面/h1
form actionplabel fortitleinput typetext idtitle readonly size32value 注册标题框/label/pplabel forusernameusername:input typetext nameusernameidusername placeholderadmin required/label/pplabel forpasswordpassword:input typepassword namepasswordmaxlength15 idpasswordplaceholder000 required/label/ppsexlabel forgenderfemale input typeradio namegender idgendermale input typeradio namegender checked/label/pphobby:label forgenderswimming input typecheckbox namehobby idhobbyrunning input typecheckbox namehobby/label/ppbrith_day:label forbirth_dateinput typedate namebirth_date idbirth_date value2024-01-01/label/ppfile update:label forfile_updateinput typefile namefile_update idfile_update/label/pplabel forsubmitinput typesubmit value提交/labellabel forresetinput typereset value重置/labellabel forbuttoninput typebutton value闲置按钮/label/p
/form
/body
/html【12】select标签
1参数
value 属性定义了选项的实际值它通常在提交表单时用作数据的标识符。 当用户选择该选项时所选选项的 value 值将被发送到服务器或在客户端的 JavaScript 中使用。
1下拉列表单选框
select nameidentify ididentifyoption valuesuper超级管理员/optionoption valueadmin管理员/optionoption valuenormal che普通用户/option
/select2复选框
multiple 是一个用于 select 元素的布尔属性用于指定是否允许多选。 用户可以按住 Ctrl 键在 Windows 或 Linux 上或 Command 键在 macOS 上并单击选项来进行多选。用户还可以按住 Shift 键并选择一个范围内的选项来进行连续多选。
select namehobby idhobby multipleoption valueswimming游泳/optionoption valuerunning跑步/optionoption valuereading读书/optionoption valuelistening听歌/option
/select3多级选项框
optgroup 是一个用于 select 元素的标签用于创建选项组。 optgroup 元素用于将相关的选项分组在一起以便在下拉列表中进行更好的组织和可读性。
select nameaddr idaddroptgroup labelchineseoption valueBeijing北京/optionoption valueShanghai上海/option/optgroupoptgroup labelAmericaoption valueAlabama亚拉巴马州/optionoption valueAlaska 阿拉斯加州/option/optgroup
/select【13】textarea标签
textarea 标签用于创建一个多行文本输入框允许用户输入多行文本。
1参数
name用于指定文本区域的名称该名称将在提交表单时用作标识符。id用于指定文本区域的唯一标识符。cols用于指定文本区域的可见宽度以列数为单位。可以使用一个正整数值来设置列数。rows用于指定文本区域的可见高度以行数为单位。可以使用一个正整数值来设置行数。maxlength用于限制用户在文本区域中输入的最大字符数。
ptextarea namemessage idmessage cols30 rows10 maxlength200/textarea
/p
