01_java web 入门教程笔记_明日科技_HTML_CSS
1.HTML 文档结构
标记不区分大小写
<head>
<title>
<body>
换行 <br>
段落<p>
标题<h1>
居中
<center>
列表标记
无序
<ul>
<li>
<li>
</ul>
有序
<ol>
<li>
<li>
</ol>
表格标记
<table></table>
属性: width 表格宽度,border 边框,align 对齐方式 ,bgcolor 背景色
标题标记<caption> align valign
表头标记<th> align ,background ,colspan,valign
表格行标记 <tr> align ,background
单元格标记 <td> align,backgroud ,valign
2.1.5 HTML 表单标记
1 <form>..</form>表单标记
基本语法:
<form action="url" method="get"|"post" name="name" onSubmit="" target="">
</form>
target 属性 _bland 新窗口中打开;
_self表示同一窗口中打开;
_parent表求在上一级窗口中打开,一般使用框架页时经常使用;
_top 表示在浏览器的整个窗口中打开,忽略任何框架;
2.<input>表单输入标记
<input type="image" disabled="disabled" checked="checked" width="digit" height="digit" malength="digit"
readonly="" size="digit" src="uri" usemap="uri" alt="" name="checkbox" value="checkbox">
3.<select> </select> 下拉列表标记
<select name="name" size="digit" multiple="multiple" disabled="disabled">
</select>
例:
<!-- //下拉列表框 -->
<select name="select">
<option>数码相机</option>
<option>摄影器材</option>
<option>MP3</option>
</select>
<!-- //多行列表框(不可多选) -->
<select name="select2" size="2">
<option>数据相机区</option>
<option>摄影器材</option>
<option>MP4</option>
<option>U盘</option>
</select>
<!-- 多行列表框(多选) -->
<select name="select3" size="3" multiple>
<option>数据相机区</option>
<option>摄影器材</option>
<option>MP4</option>
<option>U盘</option>
</select>
4.<textarea> 多行文本标记
<textarea cols="digit" rows="digit" name="name" disabled="disabled" readonly="readonly" wrap="value">默认值</textarea>
2.1.6 超链接与图片标记
1. 超链接标记
<a href="></a>
2.图片标记
<!-- 2.图片标记 -->
<img src="uri" width="value" height="value" border="value" alt="提示文字">
2.2 HTML5 新增内容
<section>
<h2>section 标记的使用</h2>
<p>完成百分比:100%</p>
<input type="button" value="请单击"/>
</section>
<!-- 应用<acticle> 元素在页面中定义一个区域 -->
<acticle>
<header>
<h1>苹果美容</h1>
</header>
<p>..............................</p>
<footer>
<p>2011-9-27</p>
</footer>
</acticle>
<!-- 元素定义页面侧栏 -->
<aside>
<nav>
<h2>侧栏</h2>
<ul>
<li>
<a href="#">明日图书</a>2011-9-27
</li>
<li>
<a href="#">明日软件</a>2011-9-28
</li>
<li>
<a href="#">编程词典</a>2018-04-26
</li>
</ul>
</nav>
</aside>
2.2.2 新增的input 元素类型
2.3 CSS样式表
1.标记选择器
/*类别选择器*/
.one{
font-family: 宋体;
font-size:24px;
color: red;
}
.two{
font-family: 宋体;
font-size:16px;
color: red;
}
.three{
font-family: 宋体;
font-size:20px;
color: green;
}
</style>
h1,h2,h3{
color:#6CFw;
font-family: "Frebuchet MS",Arial,Helvetica,sans-serif;
}
p{
color: #F0Cs;
font-weight: 200;
font-size: 60px;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>获取元素</title>
<link rel="stylesheet" type="text/css" href="css.css"/>
</head>
<body>
<h2>页面文字</h2>
<p>页面文字2</p>
</body>
</html>
2.4 CSS3新特征