html学习笔记
1.html的结构
<html>
<head>
<title>...</title>
<meta>
<link>
<style>...</style>
<script>...</script>
</head>
<body>
<h1> <p> <a> <img>
</body>
</html>
文本
1.
<hx>文章标题,一共6个等级 1-6,递减
2.强调
<strong></strong>用粗体表示
<em>用斜体
3.设置单独的样式
<span>文本</span>
<style>
span{
color:blue;
}
</style>
4.
简短文本引用 <q>引用</q> 效果是双引号
长文本引用 <blockquote>引用文本 </blockquote>效果是缩进样式
<br>换行
空格
<hr>水平横线
5.
<address>地址栏
6.加入代码
<code>代码语言</code>
多行代码可用<pre>
列表
1.使用ul,添加列表,默认圆点
语法<ul>
<li>信息</li>
<li>信息</li>
<li>信息</li>
</ul>
2.使用ol,添加列表,默认数字排序
语法<ol>
<li>信息</li>
<li>信息</li>
<li>信息</li>
</ol>
3.划分板块
<div id="板块名称"><div>
4.创建表格
table;tbody;tr;th;td
1、<table>…</table>:整个表格以<table>标记开始、</table>标记结束。
2.<tbody>...</tbody>可以将表格分段显示
3.<tr>...</tr>表格的一行
4.<td>...</td>表格的一个单元格,一行中包含几对,就有几列
5.<th>...</th>表格表头
5.表格摘要
<table summary="">
表格标题 <caption></caption>
6.使用<a>标签,链接到另一个页面
<a href="目标网址" title="鼠标滑过显示的文本" target="_blank">链接显示的文本</a>
有title的显示效果就是鼠标滑到该处可以看到文字
target 在新的窗口打开网页
7.电子邮件 href="mailto:地址"
8.插入图片
<img src="myimage.gif/png/jpeg" alt="替换文本" title="提示文本">
9.使用表单,与用户交互
<form method="传送方式" action="服务器文件">
密码框
<form>
<input type="text/password" name="名称" value="文本(默认值)" />
</form>
10.
<textarea rows="行数" clos="列数">文本</textarea>
11.单选框,复选框
<input type="radio/checkbox" value="值" name="名称" checked="checked"/>
1、type:
当 type="radio" 时,控件为单选框
当 type="checkbox" 时,控件为复选框
2、value:提交数据到服务器的值(后台程序PHP使用)
3、name:为控件命名,以备后台程序 ASP、PHP 使用
4、checked:当设置 checked="checked" 时,该选项被默认选中
12.下拉列表框
<select>
<option value="看书(向服务器提交的值)">看书</option>
selected="selected"
下拉列表多选框
<select multiple="multiple">
13.label
二.
CSS 层叠样式表,主要用于定义HTML内容在浏览器内的显示样式
在<head>中使用p{
样式}
在body中p
2.内联样式:
<p style="color:red;font-size=12px">这里文字是红色。</p>
3.外部CSS
<link href="style.css" rel="stylesheet" type="text/css" />
一般写在head内
4.优先级
内联式 > 嵌入式 > 外部式
5.选择器
1.自定义,段落
2.类选择器 <span class="Name1"> .Name1{
}
3.ID选择器
<span id="setGreen">公开课</span>
#setGreen{
color:green;
}
类选择器和id选择器的区别
id选择器只能在文档中使用一次
类选择器可以有样式列表,id选择器不行