<!--html 超文本编辑语言-->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>网页学习</title>
</head>
<body>
<h1>标题标签</h1>
<h2>tian</h2>
<h3>tian</h3>
<!--h标签用于显示标签，一共有6个，从小到大，h1最大-->
<h4>tian</h4>
<h5>tian</h5>
<h6>tians</h6>
<p>
<i>段落标签</i><!--i为斜体标签-->
<em>段落</em> <!-- em 也是斜体-->
<strong>段落</strong> <!--strong字体加粗标签-->
<font color="red">段落</font><!--制定字体颜色-->
段落<br/><!--换行标签-->
段落</p> <!--p为段落标签，-->
<a href="http://www.baidu.com" target="_blank">百度</a> <!--a 超链接 target _blank 另起一个窗口打开-->
<a href="http://www.baidu.com"><img src="./1.jpg"></a><!--图片加载超链接-->
<!--无序列表 ul与li结合-->
<ul>
<li>女装/男装/内衣</li>
<ul>
<li>裙子</li>
<li>衬衫</li>
</ul>
<li>鞋子/包</li>
<li>卫生</li>
</ul>
<!--有序列表 ol li 结合使用-->
<ol>
<li>nvshi</li>
<li>jfoiwjef</li>
<ol>
<li>jfie</li>
<li>jfdisuas</li>
</ol>
<li>jfiwefj</li>
</ol>
<!--自定义列表-->
<dl>
<dt>jfiaejfo</dt>
<dd>fads</dd>
</dl>
<!--表格-->
<table border="1" width="400" height="50"
cellpadding="10" cellspacing="1">
<!--table 表示表格 border表格默认无边界，这个是添加边界
width也可以设置百分比 width="100%"占据body width--
cellpadding表格内边距 cellspacing 表格单元之间的边距>
<tr><!--tr表示行-->
<th>I</th> <!--td 表示一列 th也是一列不过是表头 colspan 表示下两列表头合并
rowspan跨行 col row span-->
<th>love</th>
<th>you</th>
</tr>
<tr>
<td>Do</td>
<td>you</td>
<td>love</td>
</tr>
</table>
<!--表单 用来收集用户输入信息-->
<form action="http://www.baidu.com">
表单：<br/>
<p>
用户名：<input type="text" name="user" id="demo" value="bbb"></p>
<p>
密码：<input type="password" name="pwd" id="userpwd">
</p>
<p>
<!--type指定显示的是什么 text 文本 password 密码
radio单选框 checkbox复选框 file 上传-->
性别：<input type="radio" name="sex" checked>男
<input type="radio" name="sex">女
</p>
<p>
爱好:<br/>
<input type="checkbox" name="hobby" id="">篮球
<input type="checkbox" name="hobby" id="">足球
</p>
<p>
上传：<input type="file" name="">
</p>
<p>
<!--多行文本-->
介绍：<br/>
<textarea name="intro" cols="30" rows="5"></textarea>
</p>
<p>
<!--两个按钮的区别：button可以提交表单，input普通-->
<input type="button" name="" value="按钮 ">
<button>按钮</button>
<!--提交整个表单 form-->
<input type="submit" name="" value="注册">
<input type="reset" name="" value="表单重置">
</p>
<p>
<!--下拉列表-->
<select>
<option>石家庄</option>
<option selected>tianjing</option>
<option>beijing</option>
</select>
</p>
</form>
<img src="https://ss1.baidu.com/-4o3dSag_xI4khGko9WTAnF6hhy/image/h%3D200/sign=9df930e1bc0e7bec3cda04e11f2cb9fa/314e251f95cad1c8037ed8c97b3e6709c83d5112.jpg"><!--img显示图片 src指定图片地址，可以是url 可以是文件在本地的地址 ./表示当前路径 ../表示上层目录-->
<img src="./1.jpg" alt="这是一个美女图片" title="美女">
<!--alt title 表示图片的说明，也可供浏览器搜索-->
<img src="./1.jpg" width="400" height="300">
<!--框架：多个页面加载到一个页面 上下左右分层等
注意：使用frameset框架，主页面中没有body标签-->
<frameset rows="20%,30% ，50%" border="1">
<frame src="a.html"></frame>
<frame src="b.html" noresize=""></frame>
<!--noresize ：设置比例后可以用鼠标拖动改变比例，norelcosize 设置不可改变比例-->
<frameset cols="40%,60%">
<frame src="b.html"></frame>
<frame src="a.html"></frame>
</frameset>
</frameset>
<br/>
<!--
css 层叠样式列表，
定义颜色、字体大小、边框 行高等，
添加方法：
1、在head中定义 body中某个标签的定义
<style>
p{
Color:red;
}
</style>
2、行内样式
<p style="color:red">标签颜色</p>
<p><font color="red"></font></p>
3、外部css文件
添加: <link>标签添加到head
三种方式的优先级：
这要看那个是最后的描述，只显示最后的描述，
css的选择器：
1、元素选择器：就是直接定义标签：
p{ color:red;}
2、id 选择器：唯一
<p id="p1">tian</p>
#p1代表选中p元素:
#p1{ color:red;}
3、class选择器,可以有多个
<p class="desc">song</p>
<p class="desc">tao</p>
.desc{color:red;}
4、后代选择器，就是标签子标签选择器
body p{ color:red;} bod下的p标签；
5、伪类选择器
<style>
a{
color:green;
}
a:hover{ 表示鼠标移动到那时触发。
color:red;
}
</style>
字体样式：
p{
font-style:italic; 斜体:normal正常
font-weight:bold;变粗， normal
font-size:20px
font-family:"宋体"；
font:italic bold 20px "微软雅黑";//合成
}
颜色样式：
p{
color:red;
color:#ff0000;
color:rgb(255,0,0);
}
边框样式：
p{
border-width:1px;
border-style:solid；直线 dashed虚线 dotted点线
border-top-style:solid 直线放到上面
border-left-color:red; 上部边框颜色，
}
列表样式：
li{
list-style-type:none;点去掉，
text-decoration:underline;加下划线
}
文本样式：
p{
text-align:left;文本左对齐
text-indent:32px;缩进
line-height:20px;行高
}
-->
<style type="text/css">
p{
display: inline;/*把块元素转换为行元素
dispaly:inline-block 把元素变为行块元素
也就是宽高 定义起作用，*/
}
</style>
<p><!--p是一个块元素，自己单独占据一行-->
<p>这是一个段落</p>
<p>这是一个段落</p>
<p>这是一个段落</p>
<p>这是一个段落</p>
</p>
<style type="text/css">
#div1{
width: 100px;
height: 100px;
background-color: #ccc;
background-image: url("");/*图片地址*/
}
</style>
<div id="div1"></div>
</body>
</html>
扫一扫
1833
评论
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
查看更多评论
添加红包
