目录
HTML基本结构
<HTML>
<HEAD>文件信息的描述</HEAD>
<BODY>页面元素的描述<BODY>
</HTML>HTML基本标记
1.标题
<hn></hn> n越大字号越小 HTML一共提供六级标题
<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>2.文本字体
<font>标签</font> 主要属性包含有face：字体；size：字体大小；color：颜色
<font face="楷体" size="35px" color="aqua">标签</font>
因为HTML页面有些特殊字符无法直接显示，所以需要转换为字符实体进行编译
3.图像
<!--往页面上添加图片src写的是图片内容也可写成图像路径-->
<!--width 设置图像宽度-->
<!--height 设置图像高度-->
<!--border 设置图像边框粗度-->
<!--alt 替代文字 如果图像无法正常显示会显示替代文字进行提醒-->
<img src="2.jpg" width="600" height="400" border="1" alt="宇宙图">
<!--图像标签 单标签-->
<img src="">4.背景
背景颜色
<body bgcolor = "red">背景图像
<body background = "图片路径">5.列表
有序列表
<!--ol 有序列表，li设置列表中的内容，ul无序列表-->
<ol type="A">
<li>打游戏</li>
<li>打篮球</li>
<li>打排球</li>
<li>听音乐</li>
<li>追剧</li>
</ol>
<ul type="cycle">
<li>胳膊疼</li>
<li>脑子疼</li>
<li>后背疼</li>
<li>腿疼</li>
<li>心累</li>
</ul>
6.超链接
<a href="https://www.baidu.com">跳转到百度首页</a>表格、表单
1.表格
属性rowspan(跨过m行)、colsapn(跨过n列)
2.表单
<!--method 表示请求方式 get方式数据会在地址栏中显示 post方式数据会隐藏 所以我们认为post方式更安全-->
<!--action 写的是跳转的路径-->
<form action="h.html" method="post">
<!--test 是普通文本框 name表示这个框的名字 value表示这个框中默认显示的数据 可写可不写-->
姓名：<input type="text" name="name" value=""><br>
<!--password 表示密码框-->
密码：<input type="password" name="password" value=""><br>
<!--radio 表示单选框 单选按钮要想好用必须保证name中的值是一样的-->
性别：<input type="radio" name="sex" value="男">男
<input type="radio" name="sex" value="女">女<br>
<!--checkbox 表示复选框-->
爱好：<input type="checkbox" name="love" value="听歌">听歌
<input type="checkbox" name="love" value="睡觉">睡觉<br>
<!--email 邮件-->
电子邮件：<input type="email" name="email"><br>
<!--select 下拉框 option 下拉框当中的选项-->
出生年月：<select name="year">
<option>请选择</option>
<option value="2002">2002</option>
<option value="2003">2003</option>
<option value="2004">2004</option>
</select>年
<select name="month">
<option>请选择</option>
<option value="01">01</option>
<option value="02">02</option>
<option value="03">03</option>
<option value="04">04</option>
<option value="05">05</option>
<option value="06">06</option>
<option value="07">07</option>
<option value="08">08</option>
<option value="09">09</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
</select>月<br>
<!--textarea 大文本文本框 -->
自我介绍：<textarea></textarea><br>
<input type="submit" value="提交">
<input type="button" value="按钮">
<input type="reset" value="重置">
</form>样式表
HTML中分为行内样式表、内嵌样式表、外部样式表
1.行内样式表
<body>
<div style="font-size: 35px;font-family: 楷体;color: cadetblue">行内样式</div>
</body>2.内嵌样式表(通过选择器进行调用)
<head>
<meta charset="UTF-8">
<title>样式</title>
<style>
/*style中写的就是内嵌样式的样式书写位置*/
pre{
font-family:宋体;
font-size: 30px;
color: aqua;
}
/*伪类选择器*/
a:hover{
text-decoration: none;
color: lightpink;
font-size: 40px;
}
/*类选择器*/
.class1{
font-family: 华光隶书_CNKI;
font-size: 35px;
color: cadetblue;
}
/*id选择器*/
#id1{
font-family: 华光行楷_CNKI;
font-size: 35px;
color: #c5dff5;
}
</style>
</head>
<body>
<div >
<pre>html选择器</pre>
<pre>html选择器2</pre>
<a href="https://www.baidu.com">百度一下</a>
<div class="class1">类选择器，在属性class中进行调用</div>
<div id="id1">id选择器，在属性id中进行调用</div>
</div>
</body>3.外部样式表(通过选择器进行调用)
/*写在名为a.css里*/
/*类选择器*/
.class2{
font-family: 华光隶书_CNKI;
font-size: 35px;
color: #a03989;
}
/*id选择器*/
#id2{
font-family: 华光行楷_CNKI;
font-size: 35px;
color: #77f57f;
}<head>
<!--引入外部样式-->
<!--type="text/css" 表示引入文件的类型是text/css -->
<!--rel="stylesheet" 表示进行外部引入文件 -->
<!--href="a.css" 表示引入文件的路径 -->
<link type="text/css" rel="stylesheet" href="a.css">
</head>
<body>
<div>
<div class="class2">外部样式中的类选择器</div>
<div id="id2">外部样式中的id选择器</div>
</div>
</body>
5185
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
