asp.net开发的网站,西丽网站建设,crm免费软件,网站开发建设好处HTML_网络的三大基石和html普通文本标签
1.我们要访问网络#xff0c;需不需要知道#xff0c;网络上的东西在哪#xff1f; 为什么我们写#xff0c;www.baidu.com就能找到百度了呢#xff1f; 我一拼ping www.baidu.com 就拼到了ip地址#xff1a; [119.75.218.70]…HTML_网络的三大基石和html普通文本标签
1.我们要访问网络需不需要知道网络上的东西在哪 为什么我们写www.baidu.com就能找到百度了呢 我一拼ping www.baidu.com 就拼到了ip地址 [119.75.218.70] 然后www.baidu.com 是dns服务他会将我们的域名转成ip地址。好记好推广
我们在网络上看的所有东西通过一个地址都是可以找到的。那么这个地址就叫URL 2.三大基石 URLHTTP协议HTML URL在WWW上每一信息资源都有统一的且在网上唯一的地址该地址就叫URLUniform Resource Locator,统一资源定位符它是WWW的统一资源定位标志就是指网络地址。
HTTP协议http是一个简单的请求-响应协议它通常运行在TCP之上。它指定了客户端可能发送给服务器什么样的消息以及得到什么样的响应。请求和响应消息的头以ASCII码形式给出而消息内容则具有一个类似MIME的格式。这个简单模型是早期Web成功的有功之臣因为它使得开发和部署是那么的直截了当。
HTMLHTML称为超文本标记语言。 -------我们访问一个资源需要知道它在哪。那就是地址/路径 URL负责定位资源的统一资源定位符(网络路径) URI统一资源标识符(服务器内部路径) ---------那么根据地址/路径找到资源的过程中需要遵守交通规则。
http负责传输资源:超文本传输协议 (对我们传输的内容进行一个规则的约束) 什么是超文本除了普通文本之外还包含图片音频视频等效果 很久以前通过浏览器看到的东西都是纯文本的。就是因为有html页面才这么丰富多彩。 把这些丰富多彩的页面传输给浏览器用户看的这个过程需要遵循一个协议就是http协议。 ---------比如我访问百度那么百度返回给我们的是什么呢 右键“查看源文件”百度给我们返回来并且经过浏览器解压缩的。 百度给我们发的文件是一个通过XX压缩后的文件这样可以减少数据的传输然后在通过浏览器解压缩就又回到了原来的样子。 如果有一天你打开百度显示的是这些解压缩的文件肯定很头疼。所以说我们需要把这些文本和超文本以各种各样的样式展示出来。 --------------那么浏览器怎么知道哪个是图片哪个是音频哪个是视频
我们用特殊的标记把文本/超文本标记起来这样一看就知道是什么了。那这些标记可以自己扩展吗肯定是不可以因为你扩展了别人不知道啊不知道就没办法解析了。所以html是不可以扩展的。html总共就这些学一个少一个那这些东西是谁规定的呢w3c。谁做的实现各浏览器。所以才有的浏览器差异。
HTML解析显示资源的:将超文本的信息通过特殊的标识 进行解析显示。
3、HTML的标准结构
【1】先用普通文本文档新建一个文本将文本的后缀改为.html 或者 .htm 大小写不区分 【2】编辑标准结构
htmlhead/headbodythis is my first html..../body
/html
【1】html标签 定义 HTML 文档这个元素我们浏览器看到后就明白这是个HTML文档了所以你的其它元素要包裹在它里面标签限定了文档的开始点和结束点在它们之间是文档的头部和主体。
【2】head标签---》里面放的是页面的配置信息 head标签用于定义文档的头部它是所有头部元素的容器。head 中的元素可以引用脚本、指示浏览器在哪里找到样式表。文档的头部描述了文档的各种属性和信息包括文档的标题、在 Web 中的位置以及和其他文档的关系等。绝大多数文档头部包含的数据都不会真正作为内容显示给读者。 下面这些标签可用在 head 部分 title、meta、link、style、 script、 base。 应该把 head 标签放在文档的开始处紧跟在 html 后面并处于 body 标签之前。 文档的头部经常会包含一些 meta 标签用来告诉浏览器关于文档的附加信息。
例子
html!-- 这是一个注释注释的快捷键是ctrlshift/--!--head标签中放入页面的配置信息head标签中可以加入title、meta、link、style、 script、 base。--head!--页面标题--title百度一下你就知道/title!--设置页面的编码防止乱码现象利用meta标签charsetutf-8 这是属性以键值对的形式给出 kv ab 告诉浏览器用utf-8来解析这个html文档--meta charsetutf-8 /!--简写--!--繁写形式了解--!--meta http-equivcontent-type contenttext/html;charsetutf-8 /--!--页面刷新效果--!--meta http-equivrefresh content3;https://www.baidu.com /--!--页面作者--meta nameauthor contentmsb;213412qq.com /!--设置页面搜索的关键字--meta namekeywords content马士兵教育;线上培训;架构师课程 /!--页面描述--meta namedescription content马士兵教育详情页 /!--link标签引入外部资源--link relshortcut icon hrefhttps://www.baidu.com/favicon.ico typeimage/x-icon //head!--body标签中放入页面展示的内容--bodythis is a html..你好/body
/html 【3】body标签---》里面放的就是页面上展示出来的内容 body 元素是定义文档的主体。body 元素包含文档的所有内容比如文本、超链接、图像、表格和列表等等。body是用在网页中的一种HTML标签标签是用在网页中的一种HTML标签表示网页的主体部分也就是用户可以看到的内容可以包含文本、图片、音频、视频等各种内容
!DOCTYPE html
htmlheadmeta charsetUTF-8title文本标签/title/headbody!--文本标签--!--下面的文字就是普通的文本文本编辑器中的任何效果比如空格换行 都不影响页面页面想要实现效果 必须通过标签来实现--媒体为人父母 要不要“持证上岗”媒体为人父母要不要“持证上岗”媒体为人父母要不要“持证上岗”媒体为人父母要不要“持证上岗”!--标题标签h1-h6 字号逐渐变小每个标题独占一行自带换行效果h7之后都属于无效标签但是浏览器也不会报错而是以普通文本的形式进行展现--h1媒体为人父母要不要“持证上岗”/h1h2媒体为人父母要不要“持证上岗”/h2h3媒体为人父母要不要“持证上岗”/h3h4媒体为人父母要不要“持证上岗”/h4h5媒体为人父母要不要“持证上岗”/h5h6媒体为人父母要不要“持证上岗”/h6h7媒体为人父母要不要“持证上岗”/h7h8媒体为人父母要不要“持证上岗”/h8!--横线标签width:设置宽度300px 固定宽度30%页面宽度的百分比会随着页面宽度的变化而变化align设置位置 left ,center,right 默认不写的话就是center居中效果--hr width300px aligncenter/hr width30% aligncenter/!--段落标签段落效果段落中文字自动换行段落和段落之间有空行--pnbsp;nbsp;nbsp;nbsp;5月emsp;26日“建议父母持合格lt;父母证gt;上岗copy;”冲上微博热搜迅速引发热议。在正在召开的全国两会上全国政协委员许洪玲建议在社区举办家长课堂建立“家长教育指导工作室”。针对准备入小学的家长开展相关课程教育颁发“合格父母”上岗证随学生档案入学。5月26日“建议父母持合格父母证上岗”冲上微博热搜迅速引发热议。在正在召开的全国两会上全国政协委员许洪玲建议在社区举办家长课堂建立“家长教育指导工作室”。针对准备入小学的家长开展相关课程教育颁发“合格父母”上岗证随学生档案入学。5月26日“建议父母持合格父母证上岗”冲上微博热搜迅速引发热议。在正在召开的全国两会上全国政协委员许洪玲建议在社区举办家长课堂建立“家长教育指导工作室”。针对准备入小学的家长开展相关课程教育颁发“合格父母”上岗证随学生档案入学。/pp5月26日“建议父母持合格父母证上岗”冲上微博热搜迅速引发热议。在正在召开的全国两会上全国政协委员许洪玲建议在社区举办家长课堂建立“家长教育指导工作室”。针对准备入小学的家长开展相关课程教育颁发“合格父母”上岗证随学生档案入学。5月26日“建议父母持合格父母证上岗”冲上微博热搜迅速引发热议。在正在召开的全国两会上全国政协委员许洪玲建议在社区举办家长课堂建立“家长教育指导工作室”。针对准备入小学的家长开展相关课程教育颁发“合格父母”上岗证随学生档案入学。5月26日“建议父母持合格父母证上岗”冲上微博热搜迅速引发热议。在正在召开的全国两会上全国政协委员许洪玲建议在社区举办家长课堂建立“家长教育指导工作室”。针对准备入小学的家长开展相关课程教育颁发“合格父母”上岗证随学生档案入学。/pp5月26日“建议父母持合格父母证上岗”冲上微博热搜迅速引发热议。在正在召开的全国两会上全国政协委员许洪玲建议在社区举办家长课堂建立“家长教育指导工作室”。针对准备入小学的家长开展相关课程教育颁发“合格父母”上岗证随学生档案入学。5月26日“建议父母持合格父母证上岗”冲上微博热搜迅速引发热议。在正在召开的全国两会上全国政协委员许洪玲建议在社区举办家长课堂建立“家长教育指导工作室”。针对准备入小学的家长开展相关课程教育颁发“合格父母”上岗证随学生档案入学。5月26日“建议父母持合格父母证上岗”冲上微博热搜迅速引发热议。在正在召开的全国两会上全国政协委员许洪玲建议在社区举办家长课堂建立“家长教育指导工作室”。针对准备入小学的家长开展相关课程教育颁发“合格父母”上岗证随学生档案入学。/p!--加粗倾斜下划线--b加粗/bi倾斜/iu下划线/uiub加粗倾斜下划线/b/u/i!--一箭穿心--del你好 你不好/del!--预编译标签在页面上显示原样效果--pre
public static void main(String[] args){System.out.println(hello msb....);
}/pre!--换行--5月26日“建议父母持合格父母证上岗”冲上微博br /热搜迅速引发热议。在正在召开的全国两会上全国政!--字体标签--font color#397655 size7 face萝莉体 第二版建议父母持合格父母证上岗/font/body
/html
多媒体标签
!DOCTYPE html
htmlheadmeta charsetUTF-8title/title/headbody!--图片src:引入图片的位置引入本地资源引入网络资源width:设置宽度height:设置高度注意:一般高度和宽度只设置一个即可另一个会按照比例自动适应title:鼠标悬浮在图片上的时候的提示语默认情况下没有设置alt属性 图片如果加载失败那么提示语也是title的内容alt:图片加载失败的提示语--img srcimg/ss6.jpg width300px title这是一个美女小姐姐 alt图片加载失败/img srchttps://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u1833909874,761626004fm26gp0.jpg /!--音频--embed srcmusic/我要你.mp3/embedbr /!--视频--embed srcvideo/周杰伦 - 说好的幸福呢.mp4 width500px height500px/embedembed src//player.video.iqiyi.com/38913f9ed7358c0933e82a03d9b26ec1/0/0/v_19rv8qeokk.swf-albumId9194699400-tvId9194699400-isPurchase0-cnIdundefined allowFullScreentrue qualityhigh width480 height350 alignmiddle allowScriptAccessalways typeapplication/x-shockwave-flash/embed/body
/html超链接标签
!DOCTYPE html
htmlheadmeta charsetUTF-8title/title/headbody!--超链接标签作用实现页面的跳转功能href:控制跳转的目标位置target:_self 在自身页面打开 默认效果也是在自身页面打开 _blank 在空白页面打开-- a href文本标签.html这是一个超链接01/a!--跳转到本地资源--a href这是一个超链接02/a !--跳转到自身页面--a hrefabc这是一个超链接03/a!--跳转的目标找不到提示找不到资源--a hrefhttps://www.baidu.com target_self这是一个超链接04/a!--跳转到网络资源--a hrefhttps://www.baidu.com target_blank这是一个超链接05/a!--跳转到网络资源--a hrefhttps://www.baidu.com target_blankimg srcimg/ss.jpg //a/body
/html
设置锚点 应用场合当一个页面太长的时候就需要设置锚点然后可以在同一个页面的不同位置之间进行跳转。
同一个页面不同位置的跳转
!DOCTYPE html
htmlheadmeta charsetUTF-8title/title/headbodya name1F/ah1手机/h1p华为p40/pp华为p40/pp华为p40/pp华为p40/pp华为p40/pp华为p40/pp华为p40/pp华为p40/pp华为p40/pp华为p40/pp华为p40/pp华为p40/pp华为p40/pp华为p40/pp华为p40/pp华为p40/pp华为p40/pp华为p40/pp华为p40/pp华为p40/pp华为p40/pp华为p40/pp华为p40/pp华为p40/pp华为p40/pp华为p40/pp华为p40/pp华为p40/pa name2F/ah1化妆品/h1p大宝/pp大宝/pp大宝/pp大宝/pp大宝/pp大宝/pp大宝/pp大宝/pp大宝/pp大宝/pp大宝/pp大宝/pp大宝/pp大宝/pp大宝/pp大宝/pp大宝/pp大宝/pp大宝/pp大宝/pp大宝/pp大宝/pp大宝/pp大宝/pp大宝/pp大宝/pp大宝/pp大宝/pp大宝/pp大宝/pp大宝/pp大宝/pp大宝/pp大宝/pp大宝/pp大宝/pa name3F/ah1母婴产品/h1p奶粉/pp奶粉/pp奶粉/pp奶粉/pp奶粉/pp奶粉/pp奶粉/pp奶粉/pp奶粉/pp奶粉/pp奶粉/pp奶粉/pp奶粉/pp奶粉/pp奶粉/pp奶粉/pp奶粉/pp奶粉/pp奶粉/pp奶粉/pp奶粉/pp奶粉/pp奶粉/pp奶粉/pp奶粉/pp奶粉/pp奶粉/pp奶粉/pp奶粉/pp奶粉/pp奶粉/pp奶粉/pp奶粉/pp奶粉/pp奶粉/pp奶粉/pp奶粉/pp奶粉/pp奶粉/pa name4F/ah1图书/h1pthinking in java/ppthinking in java/ppthinking in java/ppthinking in java/ppthinking in java/ppthinking in java/ppthinking in java/ppthinking in java/ppthinking in java/ppthinking in java/ppthinking in java/ppthinking in java/ppthinking in java/ppthinking in java/ppthinking in java/ppthinking in java/ppthinking in java/ppthinking in java/ppthinking in java/ppthinking in java/ppthinking in java/ppthinking in java/ppthinking in java/ppthinking in java/ppthinking in java/ppthinking in java/ppthinking in java/ppthinking in java/ppthinking in java/ppthinking in java/ppthinking in java/ppthinking in java/ppthinking in java/ppthinking in java/ppthinking in java/ppthinking in java/ppthinking in java/ppthinking in java/ppthinking in java/ppthinking in java/ppthinking in java/ppthinking in java/ppthinking in java/ppthinking in java/ppthinking in java/pa href#1F手机/aa href#2F化妆品/aa href#3F母婴产品/aa href#4F书籍/a/body
/html
不同页面利用锚点
!DOCTYPE html
htmlheadmeta charsetUTF-8title/title/headbodya href设置锚点.html#3F超链接/a/body
/html列表标签
!DOCTYPE html
htmlheadmeta charsetUTF-8title/title/headbody!--无序列表:type:可以设置列表前图标的样式 typesquare如果想要更换图标样式需要借助css技术 stylelist-style:url(img/act.jpg) ;--h1起床以后需要做的事/h1ul typesquareli睁眼/lili穿衣服/lili上厕所/lili吃早饭/lili洗漱/lili出门/li/ul!--有序列表:type:可以设置列表的标号1,a,A,i,Istart:设置起始标号--h1学习java的顺序/h1ol typeA start3liJAVASE/liliORACLE/liliMYSQL/liliHTML/liliCSS/liliJS/li/ol/body
/html表格标签
应用场景在页面布局很规整的时候可能利用的就是表格。 合并原理 !DOCTYPE html
htmlheadmeta charsetUTF-8title/title/headbody!--表格4行4列table:表格tr:行td:单元格th:特殊单元格表头效果加粗居中默认情况下表格是没有边框的通过属性来增加表框border:设置边框大小cellspacing设置单元格和边框之间的空隙aligncenter 设置居中background 设置背景图片 backgroundimg/ss.jpgbgcolor :设置背景颜色rowspan:行合并colspan列合并--table border1px cellspacing0px width400px height300px bgcolordarkseagreen tr bgcolorbisqueth学号/thth姓名/thth年纪/thth成绩/th/trtrtd aligncenter1001/tdtd丽丽/tdtd19/tdtd rowspan390.5/td/trtrtd colspan2 aligncenter2006/tdtd30/td/trtrtd3007/tdtd小明/tdtd18/td/tr/table/body
/html 总结
HTML是构建网页的基础语言它通过标记元素的方式来描述网页结构。理解HTML的基本结构和常用标签是掌握网页开发的第一步。通过标签和属性的组合开发者可以灵活地控制网页的显示内容、结构、样式及功能为进一步学习CSS和JavaScript打下坚实的基础。
