HTML的笔记
2018-07-10 本文已影响0人
时光深巷_345e
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
#gg{
background-color:skyblue;
width: 100%;
color:red;
text-align:center;
padding:5px;
}
#hh {
background-color:sandybrown;
height:200px;
width:30%;
float:left;
color: yellow;
float: left;
font-size: 25px;
}
#tt {
background-color: yellow;
float:right;
width:70%;
height: 200px;
#ght {
background-color:black;
color:white;
clear:both;
text-align:center;
}
</style>
</head>
<div id="gg">
<h1>中国发达城市</h1>
</div>
<div id="hh">
<ul>
<li><a href="https://baike.sogou.com/v4412.htm?fromTitle=%E5%8C%97%E4%BA%AC">北京</a></li>
<li><a href="https://baike.sogou.com/v6792.htm?fromTitle=%E4%B8%8A%E6%B5%B7">上海</a></li>
<li><a href="https://baike.sogou.com/v19203.htm?fromTitle=%E5%B9%BF%E5%B7%9E">广州</a></li>
<li><a href="https://baike.sogou.com/v6810.htm?fromTitle=%E6%B7%B1%E5%9C%B3">深圳</a></li>
</ul>
</div>
<div id="tt">
<h2 style="padding-left: 50px;"><a href="https://baike.sogou.com/v144078314.htm?fromTitle=%E5%B4%86%E5%B3%92">崆峒山</a></h2>
<p style="padding-left: 50px;">
<a href="https://baike.baidu.com/item/%E5%B4%86%E5%B3%92%E6%B4%BE/10731293">武术流派</a>
</p>
<p>
</p>
</div>
<div id="ght">
踊跃参加报名。
</div>
<body>
</body>
</html>
关于css。
- 可以看做一个母版用的时候可以用<link rel="stylesheet" type="test/css" href="https://css/bootstrap.min.css" >
rel 属性 type 属性类型 href 路径 - 先创建一个html的文档。选择需要的css的内容的话直接复制或者剪贴创建一个新的长css 文件，然后粘贴进去保存，使用时在<head> </head>中间插入
例如；
<html>
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css">
</head>
<body>
<table class="table table-striped table-bordered table-hover">
<tr>
<th> 姓名 </th>
<th> 身高 </th>
<th> 能力 </th>
</tr>
<tr>
<td> 路飞</td>
<td>172 </td>
<td>橡胶能力 </td>
</tr>
<tr>
<td>索隆 </td>
<td>173 </td>
<td>刀客 </td>
</tr>
<tr>
<td>香吉士 </td>
<td>175 </td>
<td>厨师 </td>
</tr>
<td>娜美 </td>
<td>170 </td>
<td>航海士 </td>
</tr>
<td>罗宾 </td>
<td>172 </td>
<td>史记者 </td>
</tr>
</table>
</body>
</html>
如图所示
会显示这样上图
- table-hover 鼠标放在上面会显示颜色
- table table-striped 隔行显色
- table-bordered 边框
1.类、块
<meta charset="utf-8">
<title></title>
<style type="text/css">
#gg{
background-color:skyblue;
width: 100%;
color:red;
text-align:center;
padding:5px;
}
#hh {
background-color:sandybrown;
height:200px;
width:30%;
float:left;
color: yellow;
float: left;
font-size: 25px;
}
#tt {
background-color: yellow;
float:right;
width:70%
</style>
</head>
<div id="gg">
<h1>中国发达城市</h1>
</div>
<div id="hh">
<ul>
<li>内容</li>
</ul>
</div>
<div id="tt">
<h2 >崆峒山</h2>
<p 内容</p>
<p>
</p>
</div>
如图所示
- 一个ID对应一个<div>
2. html 常用的命令
- <p> ---</p>段落
- <pre> 预留文本格式 怎么写怎么显示
-
分隔段落有分割线 -
换行 -
<marquee> </marquee>字体滚动 scrollmount="2"滚动的时间 direction="up"滚动的方向（down left right ）
如图
-
<a href=" 链接地址"> 显示的内容<a> 连接
-
<img src=" 路径" alt: "代替显示的文字 "> 图片
-
border-radium 设置图片变圆 可先创建块设置属性在 引入
如图所示
-
<ul> <li> </li></ul> 前面带有粗点列表
-
<ol><li></li><ol> 有顺序的列表
-
<dl><dt></dt></dl>定义列表
-
<h1></h1> h1到h6 字体的大小
-
<table> 表格
<tr><th></th></tr>tr表示行 th/td表示列
属性
</table>
- <div > </div> 块 某一区域
- <form> first name 表单
属性!.png
-
格式
表单元素
* size 为表格的长度。maxlenght 为输入的最大值 checkde 完成式，readonly只读
属性值
单选通过 name 来绑定两个选项
单选
submit 提交A按钮 reset为重置按钮。（可以取消填写的内容） button 普通按钮 后面的alert跳转后的页面
所示
image.png
下拉 列表 属性有value selected
下拉列表
例子
- textarea 多行文本可在里面插入字体等
属性有 rows 和col readonly设置长宽和只读
image.png
综合
