web前端-之一
来源：互联网 发布：淘宝晾衣架 编辑：程序博客网 时间：2024/05/16 14:21
一、基础
HTML简介
html，超文本标记语言，是用来描述网页的一种语言，不是变成语言，是标记语言，标记语言是一套标记标签
ctrl+/ 可以切换注释
备注：空内容标签如：</br>
属性必须加引号，都用双引号，小写
二、实例
用js命令，通过id就可以获取节点信息
开发者工具：ctrl+shift+i；f12；工具->开发者工具
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html"; charset="utf-8">
<title>唐诗三百首</title>
<style type="text/css">
.test{
width: 200px;
height: 30px;
line-height: 30px;
/*宽、高、行高*/
}
.para{
width: 90px;
overflow: hidden;
white-space: nowrap;/*不再换行*/
text-overflow: ellipsis;/*多出的部分以...代替*/
}
table{
border:solid 1px #ccc;
}
thead{
color: red;
}/*head中生效*/
div,p,a,span{
border: solid 1px #CCC;
padding: 10px;
}
</style>
</head>
<body>
<!--古诗开始-->
<h1>《枫桥夜泊》</h1>
<p>作者：张继</p>
<p>月落乌啼霜满天，江枫渔火对愁眠</p>
<p>姑苏城外寒山寺，夜半钟声到客船</p>
<!--古诗结束-->
<!--<p>张继，字懿孙，汉族，湖北襄州人</p>-->
<img src="http://dwz.cn/27i5pB"></br>
<a href="http://pic.sogou.com/pics/recompic/detail.jsp?category=%E5%A3%81%E7%BA%B8&tag=%E6%B8%85%E6%96%B0#0%2611915275%260">查看完整解析</a></br>
<input type="text" name="username" value="" placeholder="文本框"></br></br>
<input type="password" name="username" value="" placeholder="密码">
<p class="para" title="这是一个段落">我是一个段落</p>
<input type="password" id="pwd" class="test" name="username" value="" placeholder="密码"></br>
<!--<input type="password" id="pwd" style="width: 500px;height: 50px;" class="test" name="username" value="" placeholder="密码">-->
<!--class的作用，就是css样式的名称;style的样式被引用，head里的style被替代-->
<a href="http://www.baidu.com" target="_blank" title="百度的链接">去百度</a>
<a href="javascript:;" target="_blank" title="百度的链接">不能跳转链接</a></br>
<!--_blank在新的页面中打开链接-->
<img src="imgs/Winter.jpg" alt="冬天雪景" wwidth="300" height="120">
<table>
<caption>HTML表单</caption>
<!--表格标题-->
<thead>
<tr>
<th>花草</th>/*表头*/
<th>电器</th>
<th>化妆品</th>
</tr>
</thead>
<tbody>
<tr>
<td>绿萝</td>
<td>电脑</td>
<td>护手霜</td>
</tr>
<tr>
<td>多肉植物</td>
<td>键盘</td>
<td>保湿水</td>
</tr>
</tbody>
</table>
<div>我是一个div</div>/*独自占一行*/
<p>我是一个p</p>/*独自占一行*/
<a href="javascript:;">链接</a>
<span>我是一个文本</span>
<p>不间断 空格</p>
<p>出现多个 空格</p>
<p><出现多个 空格></p>
<input list="browsers" name="browser">
<datalist id="browsers">
<option value="chrome"></option>
<option value="ie"></option>
<option value="360"></option>
<option value="safari"></option>
<option value="oprea"></option>
</datalist></br>
©</br><!--/*版权符号*/-->
</body>
</html>
锚点
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>链接详情-锚点</title>
<style>
.tips{
width: 200px;
height: 700px;
border: solid 1px #ccc;
}
</style>
</head>
<body>
<a href="#tips1">国画书法</a>
<a href="#tips2">玉器玛瑙</a>
<div class="tips" id="tips1">国画书法</div>
<div class="tips" id="tips2">玉器玛瑙</div>
</body>
</html>
link标签用于引入外部css外部资源，便于复用
图像标签的语法：
<img src="url"alt="some_text" width="img_width"height="img_height">
src表示的是图片的地址，可以是网络路径也可以是相对路径
alt当图片加载出现问题时会告诉读者这里是一个什么图片。
width、height顾名思义，是描述图片的宽和高。
可以添加在头部区域的元素标签为: <title>, <style>,<meta>, <link>, <script>, <noscript>, and <base>.
头部：
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html"; charset="utf-8">
<meta name="keywords" content="HTML,css,javascript,java,python">
<!--为搜索引擎定义关键词-->
<meta name="description" content="光荣之路软件测试">
<!--为网页定义描述内容-->
<meta name="author" content="ericqin">
<!--定义网页作者-->
<meta http-equiv="refresh" content="30">
<!--每30秒中刷新当前页面-->
<title>html头部</title>
<link rel="stylesheet" type="text/css" href="static/css/test.css">
<!--link定义了文档和外部资源的关系-->
<style type="text/css">
p{color:pink}
</style>
</head>
<body>
<base href="http://www.baidu.com" target="_blank">
<!--<base href="http://www.baidu.com" target="_self">-->
<!--base定义了页面链接标签的默认链接地址-->
<a href="/s?wd=html">首页</a>
<a href="/s?wd=css">主页</a>
<a href="/s?wd=javascript">菜单</a>
<p>超级链接是一个很有用的元素</p>
</body>
</html>
表格跨行或跨列的表格单元格：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<h4>横跨两列的单元格:</h4>
<table border="2">
<tr>
<th>姓名</th>
<th colspan="2">电话</th>
</tr>
<tr>
<td>李园园</td>
<td>15801351015</td>
<td>18611011413</td>
</tr>
</table>
<h4>横跨两行的单元格：</h4>
<table border="2">
<tr></tr>
<th>姓名</th>
<td>李园园</td>
</tr>
<tr>
<th rowspan="2">电话</th>
<td>15801351015</td>
</tr>
<tr>
<td>18611011413</td>
</tr>
</table>
</body>
</html>
表单：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<form action="http://127.0.0.1:843/api/submit" method="get">
<p>姓氏：<input type="text" name="surname" /></p>
<p>名字：<input type="text" name="name"/></p>
<p>
<input type="radio" name="sex" value="male" />男
<input type="radio" name="sex" value="female" />女
</p>
<p>
<p><input type="checkbox" name="bike" value="bike"/>自行车</p>
<p><input type="checkbox" name="car" value="car"/>汽车</p>
</p>
<p>
<select name="role">
<option value="1">老师</option>
<option selected="selected" value="2">学生</option>
</select>
</p>
<p>
<textarea name="mark" cols="35" rows="3"></textarea>>
</p>
<input type="submit" value="submit"/>
</form>
<p>请单击确认按钮，输入会发送到服务器上名为 "/example/html/test" 的页面。</p>
</body>
</html>
使用框架可以在同一个浏览器中显示多个页面
框架
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html" charset="utf-8">
<title></title>
</head>
<body>
<iframe src="frames/frame_a.html" width="200" height="200" frameborder="0"></iframe>
<p>某些老式的浏览器不支持内联框架</p>
<p>如果不支持，则iframe是不可见的</p>
<iframe src="frames/frame_b.html" width="400" height="300" name="iframe_a"></iframe>
</body>
</html>
框架垂直
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<frameset cols="25%,50%,25%">
<frame src="frames/frame_a.html">
<html>
<head></head>
<body bgcolor="#8F8FBD">
<h3>FrameA</h3>
</body>
</html>
<frame src="frames/frame_b.html">
<html>
<head></head>
<body bgcolor="#EBC79E">
<h3>FrameB</h3>
</body>
</html>
<frame src="frames/frame_c.html">
<html>
<head></head>
<body bgcolor="#FFFFCC">
<h3>FrameC</h3>
</body>
</html>
</frameset>
</html>
框架水平
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<frameset rows="25%,50%,25%">
<frame src="frames/frame_a.html">
<html>
<head></head>
<body bgcolor="#8F8FBD">
<h3>FrameA</h3>
</body>
</html>
<frame src="frames/frame_b.html">
<html>
<head></head>
<body bgcolor="#EBC79E">
<h3>FrameB</h3>
</body>
</html>
<frame src="frames/frame_c.html">
<html>
<head></head>
<body bgcolor="#FFFFCC">
<h3>FrameC</h3>
</body>
</html>
</frameset>
</html>
框架混合
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<frameset rows="50%,50%">
<frame src="frames/frame_a.html">
<html>
<head></head>
<body bgcolor="#8F8FBD">
<h3>FrameA</h3>
</body>
</html>
</frame>
<frameset cols="25%,75%">
<frame src="frames/frame_b.html">
<html>
<head></head>
<body bgcolor="#EBC79E">
<h3>FrameB</h3>
</body>
</html>
<frame src="frames/frame_c.html">
<html>
<head></head>
<body bgcolor="#FFFFCC">
<h3>FrameC</h3>
</body>
</html>
</frame>
</frameset>
</frameset>
</html>
常见的html字符实体
HTML新特性：
表单新特性
音频
视频
拖拽
- web前端-之一
- web前端学习之一Windows快捷方式简介
- Web前端性能优化之一：优化浏览器访问
- 前端项目整理之一
- editplus初学前端之一
- Web前端
- WEB前端
- Web前端
- web前端
- web前端
- web前端
- Web前端
- Web前端
- web前端
- web前端
- web前端
- web前端
- web前端
- 几个简单适合小程序的Makefile
- textivew的跑马灯
- JavaScript 对象深入学习总结
- OpenCV计算物体的重心坐标（2值图像）
- gsoap工具生成头文件和源文件
- web前端-之一
- 图解如何用打印机套打快递单
- Web Service单元测试工具实例介绍之SoapUI
- 用TextViews实现的ExpandableTextView效果
- tabelayout,GridLayout的一些基础属性
- Android 之 自动匹配字符AutoCompleteTextView
- spring mvc 中web.xml配置信息解释
- EAS BOS编辑界面刷新序时簿界面
- JS/JavaScript前台异步加载并调用回调函数
