句式"/>
html和css的常用语法和句式
前端html
html
超文本标记语言。文本，图片，视频，音频。
网页基本信息
一个基础的网页具有的一些信息。
<!-- 这是注释--><!--!DOCTYPE网页约束规范-->
<!DOCTYPE html>
<!--html网页开始的标签-->
<html lang="en">
<!--head网页头部-->
<head><!--meta描述性标签--><meta charset="UTF-8"><!--title网页标题，显示在网页头部--><title>Title</title>
</head>
<!--body网页内容标签-->
<body><!--反斜杠闭合标签-->
</body>
</html>
网页基本标签
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>基本标签学习</title>
</head>
<body>
<!--标题标签-->
<h1>1级</h1>
<h2>2级</h2>
<h3>3级</h3>
<h4>4级</h4>
<h5>5级</h5>
<h6>6级</h6>
<!--段落标签-->
<p>一段</p>
<!--换行标签-->
<br/>
<!--水平线标签-->
<hr/>
<!--字体样式标签-->
<strong>粗体</strong>
<em>斜体</em>
<!--特殊符号-->
空格
>大于
<小于
©版权
⋂交集
⋧</body>
</html>
图像标签
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>图像标签</title>
</head>
<body>
<!--图像标签 -->
<!--src路径 -->
<!--alt找不到图片时候，显示的提示文字 -->
<!--title悬停文字 -->
<img src="./img/1.jpg" alt="书籍封面" title="悬停文字"></body>
</html>
链接标签
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>链接标签</title>
</head>
<body><a name="top"></a>
<!--href跳转的页面 -->
<!--target="_blank" 在一个新的页面打开-->
<a href="hello.html" target="_blank">点击跳转</a>
<!--嵌套图片为一个链接 -->
<a href="hello.html"><img src="./img/1.jpg" alt="书籍封面" title="悬停文字">
</a><!--锚链接1.定义一个标记2.跳转到标记-->
<a href="#top">回到顶部</a></body>
</html>
块元素和行内元素
块元素独占一行
行内元素只有一行
列表
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>列表</title>
</head>
<body>
<!--有序 -->
<ol><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li>
</ol>
<!--无序 -->
<ul><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li>
</ul>
</body>
</html>
表格
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>表格</title>
</head>
<body>
<!--表格table -->
<table border="1"><!--行 --><tr><!-- 列colspan跨列 --><td colspan=2>列</td><td>列</td><td>列</td><td>列</td></tr>
</table>
</body>
</html>
音频视频
<video arc="" controls autoplay></video>
<audio arc="" controls autoplay></audio>
网页结构
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>网页结构</title>
</head>
<body><header><h2>网页头部</h2>
</header><section><h2>网页主体</h2>
</section><article>文章内容</article>
<nav> 导航栏</nav>
<aside>侧边栏</aside><footer><h2>网页脚步</h2>
</footer>
</body>
</html>
内联框架
<!--内联框架 -->
<iframe src="" name="" frameborder="1" height="1000px" width="800px"></iframe>
表单
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>表单</title>
</head>
<body><form method="post" action="demo7.html"><!--表单的基本元素 -->name:<input type="text" name="name"><br>pwd:<input type="password" name="pwd"><br>age:<input type="text" name="age"><br><!--单选框 -->sex:<input type="radio" name="sex" value="nan" checked="checked">men<input type="radio" name="sex" value="nv" >women<!--多选框 --><input type="checkbox" name="hobby" checked="checked">eat<input type="checkbox" name="hobby" checked="checked">sleep<input type="checkbox" name="hobby" checked="checked">games<input type="checkbox" name="hobby" checked="checked">sport<!--下拉框 -->xialakuang：<select><option value="1">1</option><option value="2">2</option><option value="3">3</option><option value="4">4</option></select><!--提交 --><input type="submit" value="submit"><!--文件 --><input type="file" name="files"><!--数字验证 --><input type="number" name="num" max="10" step="1" min="1"></form></body>
</html>
css
css：层叠级联样式表。用来美化网页。
css方式引入的三种方式
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><!--方式一，样式在头文件中 --><style>h1{color: red;}</style><!--方式二，将样式单独建立，再引进来 --><link rel="stylesheet" href="../../css/demo1.css">
</head>
<body>
<h1>方式一</h1>
<h2>方式二</h2><!--方式三，直接在标签上面加上 一般不建议使用！-->
<h3 style="color: yellow">方式三</h3>
</body>
</html>
css三种样式选择器
id选择：id唯一
标签选择：所有相同标签
class选择：所有定义为此类的
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>/*标签选择器，所有h1标签都会变成此样式 */h1{color: yellow;}/*类选择器，类名可以定义多个，所有加此类名的标签拥有此样式*/.b{color: red;}/*id选择器，只有id为此的标签才拥有此样式*/#a{color: green;}</style>
</head>
<body><h1>标签选择器</h1><h2 id="a">id选择器</h2><h3 class="b">class选择器</h3>
<h3 class="b">class选择器</h3>
<h3 class="b">class选择器</h3></body>
</html>
四个层次选择器
<style>/*后代选择器，body后面的都会渲染，儿子，孙子…… */body p{background: green;}/*子选择器,只选择body的儿子标签，孙子啥的不管 */body>p{background: red;}/*相邻兄弟选择器 同辈,它的下一个有样式 */.active +p{background: yellow;}/* 通用选择器*/.active~p{background: blue;}</style>
结构伪类选择器
<style>/*ul的第一个子元素 */ul li:first-child{background: blue;}/*ul的最后一个子元素 */ul li:last-child{background: yellow;}/* p标签下的第二个子标签*/p:nth-child(1){background: red;}/*选中父元素下的类型为p元素的第二个*/p:nth-of-type(2){background: lightpink;}
/*伪类，鼠标上去才会显示*/a:hover{background: blueviolet;}
</style>
属性 选择器
=：等于
*=：包含
^=：以什么开头
$=：以什么结尾
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>.demo a{float: left;display: block;height: 50px;width: 50px;text-decoration: none;margin-right: 5px;border-radius: 5px;background: lightpink;text-align: center;font: bold 20px/50px Arial;}/* 属性选择器*//* 选择带有id的标签*/a[id]{background: blueviolet;}/*选择id等于某个值的元素 */a[id="1"]{background: red;}/* 选择class中含有class的属性，可以不完全等于去掉*就是等于，加上*就是含有*/a[class*="class"]{background: green;}</style>
</head>
<body>
<p class="demo"><a href="demo1.html" id="1">1</a><a href="demo2.html">2</a><a href="demo3.html">3</a><a href="demo4.html">4</a><a href="demo5.html" id="5">5</a><a class="class" href="">6</a><a class="sclass" href="">7</a>
</p>
</body>
</html>
字体
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>p{font-family: 楷体;color: lightpink;font-size: 20px;font-weight: bolder;}</style>
</head>
<body>
<p>《长命女·春日宴》
</p>
<p>出自五代冯延巳的《长命女·春日宴》</p>
<p>春日宴，绿酒一杯歌一遍。</p>
<p>再拜陈三愿：</p>
<p>一愿郎君千岁，</p>
<p> 二愿妾身常健，</p>
<p>三愿如同梁上燕，</p>
<p>岁岁长相见。</p></body>
</html>
文本样式和超链接伪类
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>a{color: red;text-align: left;text-decoration: none;}a:active{color: yellow ;}a:hover{color: yellow ;}a:visited{color: darkgrey;}</style>
</head>
<body>
<img src="../img/1.jpg" alt="" width="50%" height="50%"><br/>
<a>作者：</a><br/>
<a>价格：</a>
</body>
</html>
列表
<style>/*list-style: none;去掉列表前面的符号list-style: decimal;数字list-style: armenian;特殊符号list-style: inside;实心圆圈*/ul li{height: 30px;list-style: disc;}ul{background: darkgrey;}
</style>
图片背景
<style>body{background-image: url("../img/1.jpg");background-repeat: no-repeat;}
</style>
盒子模型
<style>/*给盒子加上样式*/#box{width: 300px;border:1px solid yellow;}/*p:nth-of-type(1){*//*border: 1px dashed red;*//*}*/p:nth-child(2){border: 1px dashed red;}/*给input中的id属性的全加上虚线边框 */input[id]{border: 2px dashed green;}
</style>
圆角边框
/*border-radius: 100px 0px 0px 0px;左上 右上 右下 左下box-shadow: 10px 10px 100px yellow;设置阴影和颜色*/
img{background: transparent;width: 300px;height: 300px;border: 0px solid ;border-radius: 100% 100% 100% 100%;box-shadow: 10px 10px 100px yellow;
}
display和float
<style>/*display: block;盒子展示 块元素和非块元素的互相转换float: right;盒子浮动*/div{width: 200px;height: 200px;border: 1px solid red;}span{width: 200px;height: 200px;border: 1px solid red;display: block;float: right;}
</style>
定位
固定定位：位置不会改变
相对定位：位置随着参数gaib
绝对定位：父有定位相对父定位，父不在相对浏览器
<style>#f{background: yellow;border: 1px dashed rebeccapurple;position: relative;/*相对定位*/top: 120px;left: 30px;bottom: 0px;right:0px;}#son{background: blueviolet;border: 1px dashed rebeccapurple;position: absolute;/*绝对定位 父有定位相对父定位，父不在相对浏览器*/top: 0px;left: 0px;bottom: 0px;right:0px;}#daughter{background: green;border: 1px dashed rebeccapurple;position: fixed;/*固定定位 */}
</style>
更多推荐
html和css的常用语法和句式
发布评论