61-4 html基础

HTML(HyperText Markup Language)前言软件架构B/S​ Browser/Server 网站C/S​ Client/Server QQHTML的简介、发展史万维网联盟W3C维护。包含HTML内容的文件最常用的扩展名是.html但是像DOS这样的旧操作系统限制扩展名为最多3个字符所以.htm扩展名也被使用。虽然现在使用的比较少一些了但是.htm扩展名仍旧普遍被支持。网站把所有的网站资源文件HTML,CSS,JS,图片,视频等整合到一起(的一个文件夹)WEB前端HTMLCSSJavaScriptHTML结构标准超文本标记语言负责通过标签来表达网页的页面结构。css外观标准层叠样式表标记语言负责通过属性标记来表达网页的外观效果。重点我们学习HTML与CSS不是为了写样式而是了解HTML标签的结构CSS中的选择器也就是长什么样子即可为了后面的正则、xpath与bs4做铺垫准备一、什么是HTML超文本标记语言​ (1) 标签 也叫做 标记​ (2) html是由标签/标记 和内容组成的​ (3) 标签 是由 标签名称 和属性组成的实例人 肤色“黄色” 眼镜“很大”/人扩展使用协议为 http超文本传输协议普通文本文字内容超文本视频、音频、图片、文字…二、HTML的主体标签实例!DOCTYPEhtml#H5的头 声明文档类型 为html!DOCTYPEhtmlPUBLIC-//W3C//DTD XHTML 1.0 Strict//ENhttp://www.w3.org/TR/xhtml1/TDT/xhtml1-strit.dtd之前的头文件 现在不用htmlheadtitle标题内容/titlemetacharsetUTF-8#设置字符集/headbody放html的主体标签/body/htmlhtml:文件是网页浏览器加载网页就可以浏览head:头部分网页总体信息title:网页标题meta网页主体信息会根据name(author/description/keywords)link:引入外部文件style写入CSSscript写入JSbody:身体部分网页内容三、HTML的标签标签分为单标签/单标记如br / /br 双标签/双标记如: p/p1、 文本标签div/div块标签 作用是设定字、画、表格等的摆放位置p/p段落标签 自成一段 会将上下的文字 和它保持一定的距离h1-/h6标题标签 字体加粗 自占一行2、 图片标签img /在网页中插入一张图片属性src 图片名及url地址 (必须属性)alt: 图片加载失败时的提示信息title文字提示属性width图片宽度height图片高度实例:imgsrc图片地址title文字提示alt图片加载失败显示得信息width宽height高border边框/注意如果宽和高 只给一个 那么为等比缩放 如果俩个都给 那么会按照 你所给的宽和高来显示3、 路径相对路径./ 当前…/ 上一级绝对路径(了解)一个固定得链接地址(如域名)从根磁盘 一直到你的文件得路径4、 超链接a href“链接地址” title“提示信息” target“打开方式”点击显示得内容/a属性href必须指的是链接跳转地址target:​ _blank 新建窗口得形式来打开​ _self 本窗口来打开(默认)title文字提示属性详情5、 列表无序列表ulli/li/ul有序列表olli/li/ol自定义列表dldt列表头/dtdd列表内容/dd/dl6、 HTML注释多行注释注释的作用代码的调试解释说明四、iframe1、定义和用法iframe 元素会创建包含另外一个文档的内联框架即行内框架。2、使用!DOCTYPEhtmlhtmllangenheadmetacharsetUTF-8/headbodyiframesrchttp://mediaplay.kksmg.com/2022/07/25/h264_720p_600k_39038-DFTVHD-20220725175000-4800-310117-600k_mp4.mp4/iframep一些老的浏览器不支持 iframe。/pp如果得不到支持iframe 是不可见的。/p/body/html五 TABLE表格table表格1、属性width 宽height 高border 边框2、标签tr 行标签th 列头标签td 列标签实例tabletrth我是表头/thth我是表头/thth我是表头/th/trtrtd我是单元格/tdtd我是单元格/tdtd我是单元格/td/tr/table六 FORM表单标签form/form1、 form属性action 提交的地址 method 提交的方式 get (1) 默认不写 为get传参 url地址栏可见 (2) 长度受限制 IE浏览器2k火狐8k (3) 相对不安全 post (1) url地址栏不可见 长度默认不受限制 (2) 相对安全2、input 标签input表单项标签input定义输入字段用户可在其中输入数据。如input typetext nameusername3、 select 标签创建下拉列表。属性name属性:定义名称,用于存储下拉值的内嵌标签option下拉选择项标签,用于嵌入到select标签中使用的;属性value属性:下拉项的值4、input 标签type属性:表示表单项的类型:值如下:text:单行文本框password:密码输入框submit:提交按钮