操作HTML使用工具pycharm新建一个HTML一、HTML网页的介绍简单HTML网页框架可以在右上角浏览器中实现二、常用标签1.标题标签h1标题h1这里使用的!--注释内容- !--不仅可以写注释还可以注释代码想要注释掉的代码前!--注释内容-结尾!--就可以把该代码注释掉h1级别最高h6级别最低在浏览器实现呈现以下2.段落标签p段落一/p3.超链接标签aa href链接链接文字内容/a这里哔哩哔哩字变蓝是可以点击跳转网页的4.注释标签!--可写入内容-需要注释的代码!--5.标签属性一个标签除标签名、标签内容外还可以包含标签属性。标签属性用于给标签设置附加功能类似python语言中类的方法。类创建出一个对象时对象包含其他的属性和方法对象就具备更多功能。标签赋予多种不同含义属性后标签也具备更多功能。常见标签属性 class为html网页元素定义一个或多个类名 id定义元素的唯一id此id值在整个网页中是唯一的 style定义标签的行内样式 title设置标签的额外信息当鼠标指针移到此标签上会显示一段提示文本我们对标题2进行设置注意这里的标签之间是用空格隔开的id就是当我们在搜索引擎上搜索python会跳转到这里title是提示信息当我们在python基础学习上停留的时候就会出现提示信息这是很常见的color字体颜色可自定义可以搜索常见颜色码自行设置三、设置字体的字形1.设置字体的字形与效果b粗体 i斜体 sup上标格式 sub下标格式 u下划线我们对标题一和标题一中段落进行设置2.设置字体颜色上面标签属性中使用过这里除了上文我们使用到的常见颜色码十六进制也可以使用RGB值红绿蓝色值组成每个颜色值在0~255除此外我们也可以直接使用颜色名BuleBlack等标签名 style“color颜色值”内容/标签名我们对标题345进行设置3.设置字体大小标签名 style“font-size38pt”标题/标签名 #pt为磅cm为厘米inches为英寸mm为毫米这里是38磅我们对标题一和标题一中第二段内容进行设置四、添加多媒体1.添加网页图片img src网址 alt“文字” width“304px” height“228px” 属性src指必须填入的属性表明插入的图片的url 属性alt指当src链接的图片url失效了或因其他原因无法显示图片时出现的提示性文字 width和height表示图片的宽度和高度单位为px表示像素。 只输入一个参数时默认按原尺寸自动缩放关于如何获取某个网页中的图片地址首先点开你要获取图片的那个网页这里以酷狗音乐网页为例在网页中右击--检查出现右边部分把地址复制过来就可以使用了我们对标题三下进行设置当我们输入的地址出现一点错误的时候就会显示图片丢失2.添加网页音频audio controlscontrols src音频地址.mp3 type音频类型当前浏览器不支持播放/audio属性controls为网页音频播放提供控件例如暂停播放音量调节属性src用于链接音频文件地址音频地址一般为mp3或者wav我们需要找一个纯音频的网址。属性type表示音频文件的类型。mp3格式一般为audio/mpegogg格式为audio/oggwav格式为audio/wav如果该网站不支持audio标签无法播放音频时网页会提示显示文字我们在标题三下进行设置3.添加网页视频vdieo src视频网址 controls“controls” width“宽度值” height“高度值”autoplay loop meted/video属性src需要播放的视频url视频链接地址通常以mp4为后缀需要找一个纯视频网址。属性controls为网页视频播放提供控件例如暂停播放音量调节属性width和height用于设置视频宽度和高度单位px即像素属性autoplay表示一旦通过url链接到视频文件便会自动播放视频属性loop设置视频循环播放属性muted设置视频播放时默认静音我们在标题四下进行操作五、获取网页资源上文中我们提到在网页面右击--源代码就是该网页的源代码右击--检查出现的窗口左上角选取一个元素按钮就能在原页上选择我们想要获取的资源就能得到对应的url。六、创建容器1.div其他标签/div我们对标题五和段落进行操作2.布局div stylewidth容器宽度;height容器高度float容器位置/div我们对标题五中段落进行设置七、创建表格1.表格标签table创建表格表格行数由tr标签个数决定列数由tr中td标签个数决定其中属性border表示表格的边框样式数据类型为数值类型这里我们在标题四下设置2.添加表格表头属性colspan表示表头单元格可横跨的列数也可以使用rowspan属性表示表头单元格可横跨的行数。在标题四下进行操作3.添加表格标题caption标签必须位于table标签内且每个表格只能定义一个标题。默认标题位于表格上方且居中对齐。在标题四下进行操作