第一次实习-html&css&教师范例

最新推荐文章于 2022-11-16 10:19:40 发布

黑月风华

最新推荐文章于 2022-11-16 10:19:40 发布

阅读量279

点赞数

文章标签： html css

本文链接：https://blog.csdn.net/lianmeng0524/article/details/106734243

版权

HTML-html

超文本标记语言，扩展名 .html 和 .htm。
文件名称区分大小写，标签不区分大小写，标签要成对出现。
属性以空格进行分隔，属性的值要用单双引号引起来

标签列表-语法

html标签语法	注释	说明
< br>	回车	注意’<'与br没有空格
&nbsp	空格
< !DOCTYPE html>	注记	翻译html，标注html版本，当前是html5版本
< html>	主标记	其他的标签都必须放在html里
< head>	头部	窗体信息和外部导入文件
< body>	身体	放页面上显示的东西
< title>	窗体名称
< meta charset=“utf-8”>	修改字符集
< h1>~< h6>	标题标记
< p>	段落标记
< a href="#">	超链接，href定义路径	绝对路径： http://www.baidu.com file://D:/aa/work.html(不建议）相对路径： 1. 同一文件下：work.html 2. 子文件夹：aa/work.html 3. 不同文件夹：…/aa/work.html 4. 返回上一级目录 : …/
< span>	布局标签
< div>	布局标签

CSS-css

层叠样式表，用来美化页面的，代码写作的简单，可以用来改多个标签

标签列表-语法

CSS语法	注释	说明
< p style=“color:red”>	行内样式	不建议这样使用
< style> p{color:red;} < /style>	内嵌样式
< link rel=“stylesheet” href=“css/style.css”>	外部引用样式

标签列表-选择器

css选择器	解释	说明
*{ }	通配符选择器	获取所有标签
p{ }	标签选择器	对"p"字符有效
.font{ }	类选择器	获取class属性，可重复定义
#text{ }	id选择器	获得id属性，唯一

标签列表-文字

css文字	解释	说明
color	文字颜色	单词 color:red 十六进制 color:#0f0f0f 色阶:rgb(0,0,0)，范围0-255
font-size	字体大小	单位：像素px。默认 12px-14px 单位：百分比%
font-weight	字体粗细	范围：100-900，默认400
font-style	字体倾斜	情况：normal正常、italic倾斜
font-family	字体类型	例如：font-family:“隶书”，Anals。默认宋体
letter-spacing	字体间距	单位：像素px 或百分比%
word-spacing	单词间距	单位：像素px 或百分比%
line-height	行高	单位：像素px 或百分比%
text-align	水平对齐	情况：left左、right右、center中
text-decoraction	文本装饰	情况：none无样式、underline下划线、overline上划线、line-through删除线(穿过文本的线)。

教师范例-两例

例一：

// A code block
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
     <!--<link rel="stylesheet" href="css/style1.css">-->
    <style>
        /*h1{*/
            /*color: green;*/
        /*}*/
        *{
            color: blueviolet;
        }
        .font{
            color: #ff4e03;
        }
        p{
            font-size: 40px;
            font-weight: 900;
            font-style: italic;
        }
        .font{
            font-family: "华文隶书",Adobe Caslon Pro;
        }
        h1{
            letter-spacing: 40px;
        }
        p{
            word-spacing: 40px;
            line-height: 70px;
            text-align: center;
            text-decoration: overline;
        }
        a{
            text-decoration: none;
        }
    </style>
</head>
<body>
    <h1 style="color: red">hhhhhhhhh</h1>
    <p class="font">中文 文字 效果</p>
    <a href="#" class="font">aaaaaaaaa</a>
<h1>hhhhhhhhh</h1>
    <p>pppppppp</p>
    <a href="#">aaaaaaaaa</a>
<h1>hhhhhhhhh</h1>
    <p>pppppppp</p>
    <a href="#">aaaaaaaaa</a>
</body>
</html>

css/style1.css文件内容
h1{
    color: palevioletred;
}

老师的范例1

例二：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>百度</title>
</head>
<body>
    hello&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;word<br>
    你好页面
    <h1>这是标题文字</h1>
 <h2>这是标题文字</h2>
 <h3>这是标题文字</h3>
 <h4>这是标题文字</h4>
 <h5>这是标题文字</h5>
 <h6>这是标题文字</h6>
<p> 超文本标记语言，扩展名.html和.htm,文件名称区分大小写，标签不区分大小写，标签要成对出现，属性以空格进
行分隔，属性的值要用单双引号引起来</p>
<p> 超文本标记语言，扩展名.html和.htm,文件名称区分大小写，标签不区分大小写，标签要成对出现，属性以空格进
行分隔，属性的值要用单双引号引起来</p>
<a href="http://www.baidu.com">超链接1</a>
<a href="../aa/main.html">超链接2</a>
<span>这是span标签</span>
<span>这是span标签</span>
<div>这是div标签</div>
<div>这是div标签</div>
</body>
</html>

在这里插入图片描述

黑月风华

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
第一次实习-html&css&教师范例

HTML-html超文本标记语言，扩展名 .html 和 .htm。文件名称区分大小写，标签不区分大小写，标签要成对出现。属性以空格进行分隔，属性的值要用单双引号引起来标签列表-语法html标签语法注释说明< br>回车注意’<'与br没有空格&nbsp空格< !DOCTYPE html>注记翻译html，标注html版本，当前是html5版本< html>主标记其他的标签都必须放在html里
复制链接

扫一扫