html基本知识

打开网页的HTML页面步骤：快捷键——F12

Hbuilder快捷键
ctrl+N 在按住W——新建一个项目
ctrl+N 在按住H——新建一个HTML文件
ctrl+S———保存
ctrl+X——删除一行
ctrl+Z———后退一步
ctrl+R——在浏览器打开
！+tab——联想出HTML页面的基本结构
crtl+？——文字灰置

HTML的标签作用
<title>网页标题内容</title>——表示网页上显示的网页标题
<h1>内容...</h1>——表示改内容用的字体最大
<h6>内容...</h6>——表示该内容用的字体最小
<p>内容...</p>——表示一个段落
<br>——实现换行
<em>内容...</em>——表示该内容用的斜体
<i>内容...</i>——表示该内容用的斜体
<strong>内容...</strong>——表示该内容字体加粗
<b>内容...</b>示该内容字体加粗
font ：表示加颜色，color：加什么颜色
<font size="17" color="red">内容——表示这是一段字号17，字体颜色为红色的内容

图片标签
常见的图片资源格式：jpg，png，gif，jpeg
引用本地保存的图片：
<img src="../img/图片名称,jpg">
引用本地保存的图片并设置大小
<img src="../img/图片名称,jpg" width="数字" height="数字">
引用本地保存的图片，设置大小并在图片上加文字（鼠标移动到图片上文字出现）
<img src="../img/图片名称,jpg" width="数字" height="数字" title=“文字内容”>

引用本地保存的图片，设置大小并在图片上加链接
<a href="链接的地址">
<img src="../img/图片名称,jpg"  width="数字" height="数字">
</a>

链接标签
在文字上加链接
<a href ="链接地址">
文字内容
</a>
在图片上加链接
<a href="链接地址">
<img src=“图片地址”>
</a>
以新打开窗口形式打开链接地址
<a href="图片地址" target="_blank">
文字内容
</a>


列表标签
有序列表（ordered lists）：<ol><li></li></ol>
无需列表（unordered lists）：<ul><li></li></ul>

表格标签
<table border="" cellspacing="" cellpadding="" align="">
<tr><th>行内容1</th></tr>
<tr><td>行内容2</td></tr>
</table>

快速生成表格标签
1、table>tr*行数>td*列数
2、按住tab键

tr 表示行，td和th都表示列，但th列的文字默认加粗字体，通常用来做表头
border=“”——边距
cellspacing=“”——单元格与单元格之间的距离
cellpadding=""——单元格与内容之间的距离
align=“”——网页中表格所在位置，引号里面跟left，right或者center
colspan=“列数”——合并列，引号里面跟要合并的列数
rowspan=“行数”——合并行，引号里面跟要合并的行数


表单标签
<form action="" method="">,,,</form>
用户名格式：文本框输入（明文）——<input type="text" id="" name="" value="" />

密码格式：文本框输入（密文）——<input type="password" id="" name="" value="" />

单选框——<input type="radio" id="" name="" value="" />
-单选框只选择一个选项，必须所有选项的name值为同一个值，否则会出现同时选择几个的bug

<input type="radio" id="" name="" value="" checked=”checked“ />
-在某一个选项内添加为默认选项，在该选项内添加一个checked=“checked”即可

多选框——<input type="checkbox" id="" name="" value="" />

选择文件上传——<input type="file" id="" name="" value="" />

注册——<input type="submit" id="" name="" value="" />

重置——<input type="reset" id="" name="" value="" />

下拉框选择——<select name="">
<option value="">选择内容</option>
文本框设置——<textarea rows="列数" cols="行数"></textarea>

css样式表
style 是css样式代码

添加css样式的方法
1、在标签中添加style属性
<p style="color: 颜色;">文本内容</p>
2、在head中添加style样式
<style type="text/css">
h3{
color: 颜色;
}
</style>
3、通过外链的方法
<link rel="stylesheet" type="text/css" href="../css/名称.css />

三种添加css样式的方法中，在标签内部添加样式的优先级最高级，其余两种看谁更靠近标签的位置，则取谁的样式

id选择器(id选择器，id所对应的值前面要加#)
<style type="text/css">
#yy {
color: red;
}
</style>

标签选择器
<style type="text/css" >
p {
color: red;
}
</style

class选择器(class所对应的值前面要加．点)
<style type="text/css" >
.kk {
color: red;
}
</style>

组合选择器
<style type="text/css" >
b,i{
color: red;
}
</style>

伪类选择器
<style type="text/css" >
p {
color: red;
}
/*放置鼠标颜色会发生改变*/
p:hover{
color: blue;
}
</style>

字体和文本样式
<style type="text/css">
em{
font-size: 50px;——字体大小
font-family: "微软雅黑“——字体
font-style: italic; ——斜体
font-weight: bold——加粗
text-decoration: underline——下划线
text-align: center;——文本内容居中
cursor: pointer;——实现鼠标移动到具体内容上鼠标形状变为手状
}
</style>