Day-1 HTML基本标签和CSS常用样式

实训打卡第一天，学的不错，淦-----哈哈哈

HTML基本标签

基本标签：前端页面超链接的使用；字体的颜色和字体的大小、形式；还有就是页面图片、音频和视频的导入。

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>这是我的第一个网页</title></head><body bgcolor="lightblue"><a href="http://www.baidu.com"><h1>百度</h1></a><br><a href="http://www.jd.com">淘宝</a><br><a href="http://www.csdn.com">CSDN</a><br><hr color="red" size="1"><hr color="pink" size="2"><hr color="yellow" size="3"><hr color="blue" size="4"><hr color="purple" size="5"><hr color="black" size="6"><hr color="green" size="7"><br><br><font color="red"size="5"face="楷体">陌上人如玉，公子世无双</font><br><font color="green"size="5"face="楷体">有心持钵丛林去，又负美人一片情</font><br><font color="yellow"size="5"face="楷体">情犹未了缘已尽，笺前莫赋断肠诗</font><br><font color="hotpink"size="5"face="楷体">愿与卿结百年好，不惜金屋备藏娇</font><br><font color="orange"size="5"face="楷体">红颜又惹相思苦，此心独忆是卿卿</font><br><img src="img/1213.jpg" width="200px" height="200px" ><img src="img/1215.jpg" width="200px" height="200px"><hr><video controls width="400px" height="300px" src="img/12.mp4"></video><hr><audio src="" controls="controls"></audio><ul><li>**流弊</li><li>403流弊</li><li>阳哥流弊</li></ul><ol><li>**流弊</li><li>403流弊</li><li>阳哥流弊</li></ol></body>
</html>

表格标签： 在一个table中设置行，然后在行中再设置列的个数。

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>表格标签</title></head><body bgcolor="lightcyan"><table cellspacing="0" align="center" width="600px" height="400px" border="2px"><tr bgcolor="aqua"><td>11</td><td>12</td><td>13</td></tr><tr><td>21</td><td bgcolor="orange">22</td><td>23</td></tr><tr bgcolor="chartreuse"><td>31</td><td>32</td><td>33</td></tr><tr><td>41</td><td bgcolor="lightcoral">42</td><td>43</td></tr></table></body>
</html>

表单标签： 类似账号注册界面，包含账号、密码、性别、年龄等的设置。

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>表单标签</title></head><body><form>账号 <input type="text"><hr>密码   <input type="password"><hr>性别   <input type="radio" name="sex">男<input type="radio" name="sex">女<hr>爱好<input type="checkbox">篮球<input type="checkbox">赚钱<input type="checkbox">Game<input type="checkbox">Music<hr>个人简介<br><textarea rows="10" cols="40"></textarea><hr><input type="button" value="普通按钮"><input type="reset" value="重置按钮"><input type="submit" value="提交按钮"></form><hr><!--块儿级元素div：默认占一行--><p>helloKitty</p><div>helloworld......</div><span>helloAiY</span></body>
</html>

CSS常用样式

常用样式 : 类似一个函数，先对div声明之后，再插入图片，这个对于HTML图片处理不同的是CSS可以让照片的形状，边界线，以及动画的设置。

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>基本样式</title><style>body{background:lightblue;}/* 美化div */#first{width: 250px;height: 250px;/* url图片路径 */background: url(img/1215.jpg);/* 使图片100%显示 */background-size: 100% 100%;/* 居中，左右200px */margin: 200px auto;  /* 边框 ，5px ，实线 ，边框颜色 */border: 5px solid purple;/* 圆角 */border-radius: 50px;/* animation:动画的声明one : 动画名称，自定义2s :动画时常linear: 动画类型之一infinite: 无限执行*/animation: one 3s linear infinite;}/* 动画执行，动画的名称 */@keyframes one{/* 动画执行起始状态 */from{/* 旋转角度 */transform: rotate(0deg);}/* 动画执行结束状态 */to{transform: rotate(360deg);}}</style></head><body><div id="first"></div></body>
</html>

文本样式 把对于图片的设置改为对于文本的设置，可以设置字体的颜色，大小等等。这个形如C中的函数，不过CSS是用 link 调用外部的CSS文件，然后外部的CSS文件对文本编辑。

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>文本样式</title><!-- 引入外部css文件 --><link rel="stylesheet" href="css/02.css"></head><body><div class="box">AiY.....6Bhahahahah</div></body>
</html>

body{background: lightgoldenrodyellow;}
.box{width: 600px;height: 200px;background: #ADD8E6;margin: 200px auto;border: 10px solid greenyellow;border-radius: 150px;/* 文本居中 */text-align: center;/* 行高，高度和div一致 ，垂直居中 */line-height: 200px;/* 字体颜色 */color: white;/* 字体大小 */font-size: 30px;/* 鼠标变为手状 */cursor: pointer;
}

Day-1 HTML基本标签和CSS常用样式相关推荐

CSS常用样式及示例
CSS常用样式及示例一.简介层叠样式表(英文全称:Cascading Style Sheets)是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式 ...
1-2 CSS常用样式笔记
文章目录 CSS常用样式字体属性文本属性盒模型属性宽度width 高度height 内边距padding 边框border 外边距margin 盒模型拓展应用清除默认样式高度height应 ...
dw中css目标规则命名,css 常用样式命名规则
大家在写css的时候,对一些html标签起一个合适的名字是个很头疼的事情,现在给大家分享项目中常用的名字供参考. 外套:wrap --用于最外层头部:header --用于头部主要内容:mai ...
css常用样式（文字样式、边框样式、背景样式）
CSS常用样式 CSS常用文字样式 color: brown; /*文字颜色*/ /*color: #333333;这样的也可以,这种颜色的表示方法是RGB的方式,没两位数表示一种颜色的度数, 一般情 ...
CSS常用样式属性有哪些？代码怎么写?
CSS常用样式属性有哪些?CSS样式属性有两种分别是局常用样式属性和文本常用样式属性,CSS的作用是美化HTML网页和控制页面布局,我们需要掌握这两种常用的样式属性来美化页面.一套教程,带你轻松掌握H ...
css文字向右对齐_web前端入门到实战：css常用样式对文本的处理演练
CSS文本属性可定义文本的外观,这是毫无疑问的,其次css可以通过以下属性改变文字的排版,比方说letter-spacing实现字符间距text-indent: 2em;完成首行缩进2字符word-s ...
html双箭头菜单,CSS常用样式之绘制双箭头的示例代码
一.多次调用单箭头实现了单箭头–就很容易实现双箭头了,上文已经介绍2种实现单箭头的原理: 边框旋转方式.双三角覆盖方式.这次以边框旋转为例多次调用实现双箭头. 1.边框旋转单箭头实现 .arrow- ...
css图片菜鸟教程,css 常用样式(分享)
font-family设置字体名称可以使用多个名称,用逗号分隔,浏览器则按照先后顺序依次使用可用字体 p { font-family:'宋体','黑体','Arial'; } font-size 设 ...
（10）CSS 常用样式--盒模型扩展应用
一.清除默认样式大部分标签都有一个浏览器加载的默认样式,会对布局造成一些影响.为了避免默认样式对整体布局效果造成影响,一定要清除默认样式. 盒模型属性中内外边距:大部分容器级标签都有默认边距,要么用 ...

Day-1 HTML基本标签和CSS常用样式

实训打卡第一天，学的不错，淦-----哈哈哈

Day-1 HTML基本标签和CSS常用样式相关推荐

最新文章

热门文章