Web前端HTML

网页的基本标签：

 1、标题标签：<h1>~<h6>2、段落标签：<p>...</p>3、换行标签：<br>或<br/>4、水平线标签：<hr>或<hr/>5、文字样式标签：<strong>...</strong>字体变粗<em>...</em>文字倾斜6、注释：<!--注释内容-->7、特殊符号：&nbsp;   空格&gt;      大于号&lt;     小于号&quot;   引号&copy;   版权符号

<!--练习一-->
<body><h1>清平乐<hr></h1><p>年年雪里，常插梅花醉，挼尽梅花无好意，赢得满衣清泪！<br>今年海角天涯，萧萧两鬓生华。<br>看取晚来风势，故应难看梅花。<br></p>
</body>

<!--练习二-->
<body><h1>人物简介</h1><p><strong>李清照</strong><em>（1084年3月13日~1155年5月12日），</em>宋代女词人，号易安居<br>士，婉约词派代表，有“千年第一才女”之称。早期生活优裕，金兵入<br>据中原时，流寓南方，境遇孤苦。所作词，前期多写其悠闲生活，后期<br>多悲叹身世，情调伤感。形式上善用白描手法，自辟途径，语言清丽。<br>论词强调协律，崇尚典雅，提出词“别是一家”之说，反对对作诗文之<br>法作词，留有诗集《易安居士文集》、《易安词》等。<hr>&copy;XXX版权所有</p>
</body>

图像标签：

图像标签的基本语法：
<img src="图片地址" alt="图像的替代文字" title="鼠标悬停提示字" width="图片宽度" height="图片高度">

<body><img src="C:\Users\王始一\Desktop\网图\10216.jpg" alt="网图" title="网图" width="500" height="500">
</body>

超链接标签：

<a href="链接地址" target="目标窗口位置">链接文本或图像</a>*href:链接地址的路径
*target:指定链接在哪个窗口打开，常用的取值有_self(自身窗口)和_blank(新建窗口)超链接的应用：
页面间链接：A页到B页，网上常见链接
锚链接：跳至自身固定位置，或A页跳到B页固定位置，需锚链接
功能性链接：电子邮件、QQ、MSN等链接

<!--页面间链接-->
<body><img src="C:\Users\王始一\Desktop\网图\10216.jpg" alt="网图" title="网图" width="" height=""><a href="https://www.bilibili.com/" target="file:///E:/YCbdqnStudy/Microsoft%20VS%20Code/HTMLlianxi/JS/test.html">lianjie</a>
</body><!--锚链接-->
<!--不跨页锚点-->
<body><a name="name">di</a><a href="#name">跳转</a>
</body>
<!--跨页锚点-->
<body><a name="one">di</a><a href="./mmexport1602323836577.jpg#one">跳转</a>
</body>

使用页面播放音频视频：

视频元素：<video src="视频路径" contrls="contrls"></video>
音频元素：<audio src="音频路径" contrls="contrls"></audio><body><video autoplay width="500" height="500"><source src="C:\Users\王始一\Music\MV\潮音乐酱-每次听这首歌前奏就是一种享受，听过这首歌的可能都是孩子妈了！(超清).mp4"/> </video><video controls width="500" height="500"><source src="C:\Users\王始一\Music\MV\伦桑-【伦桑X一棵小葱张晓涵】意气少年《字正腔圆》唱中国(超清).mp4"/>你的浏览器不支持video标签 </video><audio controls><source src="C:\Users\王始一\Music\Good正点 - 牵丝戏 + 一生独一 + 典狱司 + 霜雪千年 + 落 +辞九门回忆 + 倚栏听风 + 不染 + 七十二家酒楼 +赤伶 (Live).mp3"/></audio><audio src="C:\Users\王始一\Music\陈一发儿 - 往后余生.mp3" controls="controls"></audio><video src="C:\Users\王始一\Music\MV\伦桑-【伦桑X一棵小葱张晓涵】意气少年《字正腔圆》唱中国(超清).mp4" controls="controls" width="600" height="500">你的浏览器不支持video标签</video>
</body>autoplay（自动播放属性）
loop（循环播放属性）
<!--自动循环播放-->
<body><p><video controls autoplay muted loop><source src="video.webm"><source src="vedio.avi">你的浏览器不支持</video></p>
</body>

CSS

HTML5的结构元素

元素名	描述
header	标记头部区域的内容
footer	标记脚部区域的内容
section	Web页面中的一块独立区域
article	独立的文章内容
aside	相关内容或应用
nav	导航类辅助内容

<head>
<title>网页布局</title><style>header,section,footer{height: 200px;border: darkmagenta;}</style>
</head>
<body><header><h2>网页头部</h2></header><section><h2>网页主体部分</h2></section><footer><h2>网页底部</h2></footer>
</body>

CSS规则由两部分构成，即选择器和声明

header,section,footer表示选择器，{}里面的是声明

{}中height和border表示属性，200px和darkmagenta表示属性值

在HTML中引入CSS样式

CSS的语法格式：

选择器{

声明一；

声明二；

声明三；

}

<!--行内样式-->
<body><h1 style="color: darkred; font-size: larger;">行内样式</h1>
</body><!--内部样式表-->
<head>
<title>内部样式</title><style>h1{color: darkseagreen;font-size: 50ex;}</style>
</head>
<body><h1>CSS练习</h1>
</body><!--外部样式表-->
①链接外部样式表
这是一个test.css的文件
h1{color: darkseagreen;font-size: 50ex;}这个在另一个文件里进行
<head>
<link rel="stylesheet" href="test.css" type="text/css"/>
</head>
<body><h1>北京欢迎你</h1>
</body>
<!--rel="stylesheet"是指在页面中使用这个外部样式表-->
<!--href="test.css"是文件所在的位置-->
<!--type="text/css"是指文件的类型是样式表文件-->②导入外部样式表
导入test.css的文件
<head><style>@import url("test.css");</style>
</head>
<body><h1>导入外部样式表</h1>
</body>

样式的优先级：行内样式>内部样式>外部样式

CSS3的选择器

<!--标签选择器-->
<head><style>h3{font-size: 20px;color: black;}p{color: green;font-size: 14px;}</style>
</head>
<body><h3>望庐山瀑布</h3><p>日照香炉生紫烟，<br>遥看瀑布挂前川。<br>飞流直下三千尺，<br>疑是银河落九天。<br></p>
</body><!--类选择器-->
<head><style>.tm{font-size: 20px;color: black;}.gs{color: green;font-size: 14px;}</style>
</head>
<body><h3 class="tm">望庐山瀑布</h3><p class="gs">日照香炉生紫烟，<br>遥看瀑布挂前川。<br>飞流直下三千尺，<br>疑是银河落九天。<br></p>
</body><!--ID选择器-->
<head><style>#tm{font-size: 20px;color: black;}#gs{color: green;font-size: 14px;}</style>
</head>
<body><h3 id="tm">望庐山瀑布</h3><p id="gs">日照香炉生紫烟，<br>遥看瀑布挂前川。<br>飞流直下三千尺，<br>疑是银河落九天。<br></p>
</body>

三种基本选择器的优先级：ID选择器>类选择器>标签选择器

Web前端HTML（修改后的）相关推荐

Web前端学完后薪资怎么样？取决你技术好坏
随着互联网的快速发展,广大用户对于用户体验的不断提升,Web前端开发逐渐成为互联网时代软件产品研发中不可缺少的一部分,充当着重要的角色,其工资待遇水平也让很多人羡慕不已.那么,Web前端薪资怎么样呢? ...
Web前端笔记-修改element ui中表格样式（透明、去横纵线等含修改思路）
官方效果是这样的: 此处改成了这样的效果: 此处是可以进行滑动的,就是去除了滑动条,仍能滑动的效果. 下面说下修改样式,找到使用el-table的vue组建: 在style中贴上: <style ...
一个web前端专科生面试后的感概
一个专科应届生的体会心得. 我感觉我这个人就像一条平均线,比上不足比下有余. 学了软件工程,在学校前后端一起学,前端比后端擅长,但比较喜欢后端. 今天去面试前端的岗位,在学校了基础的html,css, ...
2021年，Web前端还好找工作吗？
2021年还能转行学Web前端开发吗? 这是很多人在网络上搜索的问题.究其原因,还是因为目前网络上充斥着前端饱和的说法.这让不少人怀疑还能不能转行Web前端. 不否认初级Web前端程序员供给泛滥,待遇 ...
2019年web前端就业前景和工资待遇
小编推荐:Fundebug提供JS错误监控.微信小程序错误监控.微信小游戏错误监控,Node.j错误监控和Java错误监控.真的是一个很好用的错误监控费服务,众多大佬公司都在使用. 2019年web前 ...
现在还能转行学web前端开发吗？
2019还能转行学web前端开发吗?这是很多人在网络上搜索的问题.及其原因,还是因为目前网络上充斥着前端饱和的说法,这让不少人怀疑还能不能转行web前端,目前程序员行业前景很好,而web前端的前景也不 ...
web前端的就业前景好不好
web前端的就业前景好不好?一直有人都想知道这个答案,其实放眼互联网未来,web前端的发展前景都是非常好的,那么它的就业前景自热也是不错,具体来看看下面的详细介绍就知道了. web前端的就业前景好不好 ...
Web前端饱和了？还能学Web前端吗？
这几天在知乎上看到这么一个问题:"Web前端现在怎么这么多人?",题主在问题描述中不停的阐述着自己找工作时的艰辛和困难,抱怨投出的简历犹如石沉大海,连个泡都不冒,自己连面试通知都收 ...
web前端技术分享：web前端的求职前景好不好？
想要进军互联网行业,大部分人会选择web前端和web前端这两个技术,因为两者之间的发展前景是非常好的.下面我们就先来了解一下web前端的求职前景好不好? web前端的求职前景好不好?近几年的热门行业里 ...
Web前端开发如何提高技术水平！
作为一个Web的前端工程师,怎样开始学习呢?在学习了HTML和css之后,我们应该做些什么呢?Web前端开发入门后,又该如何提高自己的前端开发技术?如为自学,根据个人学习消化能力确定每日学习数量,以下 ...

Web前端HTML（修改后的）

Web前端HTML

网页的基本标签：

图像标签：

超链接标签：

使用页面播放音频视频：

CSS

HTML5的结构元素

在HTML中引入CSS样式

CSS3的选择器

Web前端HTML（修改后的）相关推荐

最新文章

热门文章