直播视频网站开发,勒流网站建设,建设一个个人小说网站,seo 深圳1.HTML介绍
HTML(HyperText Markup Language,超文本标记语言)是用于创建网页的标准标记语言。它使用一系列的元素来描述网页的结构和内容,包括文本、图像、链接、表格等。
1.1HTML基础结构
HTML文件是一种纯文本文件,由一系列的元素构成。每个元素由一对尖括号包围,…1.HTML介绍
HTML(HyperText Markup Language,超文本标记语言)是用于创建网页的标准标记语言。它使用一系列的元素来描述网页的结构和内容,包括文本、图像、链接、表格等。
1.1HTML基础结构
HTML文件是一种纯文本文件,由一系列的元素构成。每个元素由一对尖括号包围,并用于定义网页的不同部分。例如:
!DOCTYPE html
htmlheadtitle网页标题/title/headbodyh1这是一个标题/h1p这是一段文字/p/body
/html
!DOCTYPE html声明定义了这是一个HTML5文档html/html是整个HTML文档的根元素head/head包含了文档的元数据,如标题、样式表等body/body包含了网页的可见内容
1.2 HTML标题和段落
标题和段落是网页中最基本的元素。标题由h1到h6六个级别表示,数字越小级别越高。段落使用p元素定义。示例:
!DOCTYPE html
htmlheadtitle网页标题/title/headbodyh1这是一个标题/h1p这是一段文字/p/body
/html
1.3 HTML链接
a元素定义了超链接,使用href属性指定链接的URL。链接可以指向另一个网页,也可以指向同一页面的某个位置(锚点链接)。示例:
a hrefhttps://www.example.com这是一个链接到example.com的链接/aa hrefhttps://www.example.com target_blank这个链接会在新标签页中打开/aa href#bottom跳转到页面底部/a!-- 其他内容 --h2 idbottom这是页面底部/h2
1.4 HTML媒体标签
img元素用于在网页中插入图像,使用src属性指定图像的URL,alt属性提供了图像的替代文本(当图像无法显示时显示)。示例:
img srcexample.jpg alt这是一张示例图片img srchttps://example.com/logo.png alt网站Logo 如果你想添加音频或视频可以使用dudio和video:
divaudio srchttps://m10.music.126.net/20240319155649/96db96aeb4629fe864d1843007b11779/yyaac/obj/wonDkMOGw6XDiTHCmMOi/3067332831/9179/0ea1/85ec/645a8325907dc22d0f5adaa165b074fa.m4a, controls/audio/divdivvideo srchttps://player.vimeo.com/progressive_redirect/playback/617209007/rendition/360p/file.mp4?locexternaloauth2_token_id1747418641signatured5b4b95263bc1cdd7d56a2592c0370fa35a874ed20271164cb261bdc245f06cf controls width50%/video/div
插入的链接可以是本地的路径也可以是外部链接。
1.5 HTML列表
HTML支持有序列表(ol)和无序列表(ul),列表项使用li元素定义。示例:
ulli这是一个无序列表项/lili这是另一个无序列表项/lili列表项可以嵌套ulli嵌套无序列表项/lili另一个嵌套项/li/ul/li
/ulolli这是一个有序列表项/lili这是另一个有序列表项/lili有序列表也可以嵌套olli嵌套有序列表项/lili另一个嵌套项/li/ol/li
/ol
1.6 HTML表格
使用table元素创建表格,其中包含行tr和单元格th(表头)和td(数据)。示例:
tabletrth姓名/thth年龄/thth城市/th/trtrtd张三/tdtd25/tdtd北京/td/trtrtd李四/tdtd30/tdtd上海/td/tr
/table
1.7HTML表单
form元素定义了用于收集用户输入的HTML表单,其中包含各种表单控件,如文本框、复选框、单选按钮等。示例:
form action/submit-form methodpostlabel forname姓名:/labelinput typetext idname namenamebrlabel foremail电子邮件:/labelinput typeemail idemail nameemailbrlabel forpassword密码:/labelinput typepassword idpassword namepasswordbrlabel性别:/labelinput typeradio idmale namegender valuemalelabel formale男/labelinput typeradio idfemale namegender valuefemalelabel forfemale女/labelbrlabel兴趣爱好:/labelinput typecheckbox idreading namehobbies[] valuereadinglabel forreading阅读/labelinput typecheckbox idsports namehobbies[] valuesportslabel forsports运动/labelinput typecheckbox idmusic namehobbies[] valuemusiclabel formusic音乐/labelbrinput typesubmit value提交
/form
如果你想使表单能够提交就必须使用label标签默认的提交方式是get。
1.8HTML语义化标签
这个无关紧要可以用也可以不用它使你写的网页 结构清晰这些标签跟div除了名字不同之外并没有什么不同
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/title
/head
bodyheadernav/nav/headermainsectionarticle/article/section/mainaside/asidefooter/footer
/body
/html
header是头nav代表导航栏main代表主要内容其他顾名思义。
1.9 HTNML标准属性 即id、class、title、style。
id是唯一的class代表类名可重复可以有多个。这两个都可以用在css选择器中。
title就是标题style里可以设置标签的样式
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/title
/head
bodydiv idg1 classg1 g2 g3 g4 titleg1 stylecolor:blue; background-color:blueviolet;g1/divdiv idg2 classggg gg2 gg3 titleg2 stylecolor: brown; background-color: chocolate;g2/div
/body
/html
1.10 自定义字体
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/title
/head
bodystyle.d1{width: 100px;height: 100px;background-color: brown;}.d1:hover .d2{width: 100px;height: 100px;background-color: aquamarine;/* 旋转 *//* transform: rotate(180deg); */transform: rotateX(180deg);}.d2{transition: all 2s linear;}keyframes d3 {100%{transform: rotate(360deg);}}.d3{width: 70px;height: 70px;animation: d3 1s linear reverse; /*infinite*/background-color: black;text-align: center;line-height: 70px;border-radius: 5%;}/stylediv classd1/divdiv classd2/divdiv classd3img src../360/img/hot_up.png alt/div
/body
/html 1.11 弹性布局
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlestyle.container{width: 300px;height: 300px;border-style: solid;border-width: 1px;/* display: flex; */}.container div div{width: 100px;height: 100px;background-color: lightsalmon;font-size: 32px;text-align: center;line-height: 100px;}.container{/* flex-direction 主轴方向row row-reverse columu column-reverse*//*flex *//* justify-content: space-around; *//* 交叉轴位置 *//* align-items: center; */}#d1, #d2, #d3{display: flex;/* width: 300px;height: 100px; */}#d2{justify-content: center;}#d3{justify-content: flex-end;}/style
/head
bodydiv classcontainerdiv idd1div classd11/div/divdiv idd2div classd12/div/divdiv idd3div classd13/div/div!-- div classd11/div --/div
/body
/html
1.12渐变与动画
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/title
/head
bodystyle.d1{width: 100px;height: 100px;background-color: brown;}.d1:hover .d2{width: 100px;height: 100px;background-color: aquamarine;/* 旋转 *//* transform: rotate(180deg); */transform: rotateX(180deg);}.d2{transition: all 2s linear;}keyframes d3 {100%{transform: rotate(360deg);}}.d3{width: 70px;height: 70px;animation: d3 1s linear reverse; /*infinite*/background-color: black;text-align: center;line-height: 70px;border-radius: 5%;}/stylediv classd1/divdiv classd2/divdiv classd3img src../360/img/hot_up.png alt/div
/body
/html
1. 13HTML样式
可以使用内联样式、内部样式表或外部样式表(CSS文件)来设置HTML元素的样式。
内联样式 使用style属性直接设置元素的样式:
h1 stylecolor:blue;font-size:36px;这个标题具有内联样式/h1
内部样式表 在head部分使用style元素定义CSS样式:
!DOCTYPE html
html
headstyleh1 {color: blue;font-size: 36px;}p {color: green;}/style
/head
bodyh1这个标题使用内部样式表样式/h1p这个段落也使用内部样式表样式/p
/body
/html
外部样式表 使用link元素链接外部CSS文件:
!DOCTYPE html
html
headlink relstylesheet hrefstyles.css
/head
bodyh1这个标题使用外部样式表样式/h1p这个段落也使用外部样式/p
html代码很简单只要你能记住就好了几乎不需要理解但设置样式对新手来说是棘手的因为你并不熟练并不了解每个标签的特性。下面就介绍一下。
2.HTML各标签的特性 HTML标签特性
全局特性
一些特性可以应用于任何HTML元素,被称为全局特性。常见的全局特性包括:
id: 为元素赋予一个唯一的标识符,用于选择器等。class: 为元素赋予一个或多个类名,用于选择器等。style: 内联设置元素的CSS样式。title: 为元素提供附加信息,在鼠标悬停时显示工具提示。lang: 指定元素的语言。data-*: 用于存储私有数据,可通过JavaScript访问。
示例:
p idintro classimportant stylecolor:red; title这是一个重要段落 data-author张三这是一段重要文字。/p链接特性
a标签用于创建链接,它有以下特性:
href: 链接的目标URL。target: 指定链接在何处打开,如_blank为新标签页。download: 将链接资源作为下载项而非在浏览器中打开。
示例:
a hrefhttps://www.example.com target_blank在新标签页中打开/a
a hrefexample.pdf download下载PDF文件/a 图像特性
img标签用于插入图像,它有以下特性:
src: 图像的URL。alt: 图像无法显示时的替代文本。width和height: 设置图像的宽度和高度。
示例:
img srcexample.jpg alt这是一张示例图片 width500 height300表格特性
table标签用于创建表格,其中包含tr(行)和th(表头单元格)、td(数据单元格),它们有以下特性:
border: 设置表格边框宽度。cellpadding: 设置单元格内边距。cellspacing: 设置单元格间距。colspan和rowspan: 指定单元格合并列或行。
示例:
table border1 cellpadding5 cellspacing0trth colspan2学生信息/th/trtrtd rowspan2张三/tdtd90/td/trtrtd80/td/tr
/table 表单特性
form标签用于创建表单,其中包含各种输入控件,如input、textarea、select等,它们有以下常见特性:
name: 控件名称,用于提交数据时标识字段。value: 控件的初始值。required: 指定控件为必填项。pattern: 指定控件值必须匹配的正则表达式模式。min和max: 对数值型控件设置最小和最大值。
示例:
formlabel forname姓名:/labelinput typetext idname namename requiredbrlabel foremail电子邮件:/labelinput typeemail idemail nameemail pattern[^][^]\.[a-zA-Z]{2,6}brlabel forage年龄:/labelinput typenumber idage nameage min18 max65brinput typesubmit value提交
/form
CSS样式设置注意事项
在设置HTML元素的CSS样式时,需要注意以下几点:
选择器优先级
CSS选择器有不同的优先级,按照以下顺序从高到低:
内联样式 ID选择器 类选择器 元素选择器同级选择器,后者覆盖前者较具体的选择器优先于较不具体的选择器
继承
一些CSS属性会从父元素自动继承到子元素,如color、font-family等。如需覆盖继承的样式,需要显式指定。
盒模型
理解CSS盒模型对于设置元素的margin、padding、border等样式很重要。
单位
CSS支持多种单位,如px(像素)、%(百分比)、em(相对字体大小)等,要根据情况选择合适的单位。
浏览器兼容性
不同浏览器对某些CSS属性或值的支持情况可能有所不同,需要注意兼容性问题。
CSS重置
不同浏览器对HTML元素的默认样式存在差异,通常需要使用CSS重置来统一默认样式。
示例:清除所有元素的margin和padding:
* {margin: 0;padding: 0;
} ok下篇文章介绍css。
