HTML的常用标签
(笔记)
* 排版的标签
* <!-- --> HTML的注释
* <br /> 换行标签
* <hr /> 一条水平线
* <br /> 换行
* <hr /> 一条水平线
* color: 颜色
* 值的写法:两种 :1、直接写英文的单词(red green blue) ;2、RGB三原色(red green blue) #ab1255
* width: 宽度 * 值两种写法: 1、 200px; 2、 可以写百分比
区别:百分比跟着浏览器的大小而改变,像素值不会。
* <p></p> 段落标签
* 代表空格
* 段落标签的开始和结束位置留一空行。
* align:对齐方式;center 中间;
* 在浏览器声明一块区域,区域中放入其他(文字,子标签)
* <div></div> (换行) * div块级元素(换行的符号)
* <span></span>(不换行) * span标签不会换行 行内元素
* 字体标签 * <font>字体的内容</font>
* 字体标签:
* <font></font>
* color: 颜色
* size: 字体的大小
* 最大值和最小值
* 最小值是:1
* 最大值是:7
* 默认值: 3
* face: 字体的类型
* 标题标签
* <h1></h1>
...
<h6></h6>
* 特点:逐渐缩小
* 粗体
* <b></b>
* 斜体
* <i></i>
* 标签可以嵌套的
<b><i>文本的内容</i></b>
特殊字符(常用的)
* < <
* > >
* & &
* 代表空格
数据格式化列表
<dl>
<dt>上层项目</dt>
<dd>下层项目</dd>
<dd>下层项目</dd>
* 自动对齐,缩进的
</dl>
* 有序列表和无序列表
* 有序
<ol>
<li>数据的条目</li>
<li>数据的条目</li>
<li>数据的条目</li>
</ol>
* 无序(传说用的最多)
<ul>
<li>数据条目</li>
<li>数据条目</li>
<li>数据条目</li>
</ul>
* 图片标签
<img />
* 属性:
* src="图片的地址"
* width="图片的显示宽度"
* height:图片显示的高度
* alt:图片的说明文字
* 超链接标签
* 写法:<a></a>
* 链接资源
* 必须要指定属性:href="链接的地址"
* 需要编写协议
* HTTP
* 默认file文件的协议
* 定位资源
* name 定义锚点
* 点击 href="#锚点名称"
* 表格标签
* 把数据封装成表格。
* 表格标签
<table>
<caption>用户列表</caption>
<tr>
<th>数据</th>
<th>数据</th>
</tr>
<tr>
<td>数据</td>
<td>数据</td>
</tr>
</table>
table的属性
* border: 边框
* width: 宽度
* height: 高度
tr的属性
* align:中间的文字的对齐方式
td获取th
区别:th中间的内容粗体显示。
th中间的内容默认居中。
th一般用来表格的表头
td的属性
* width 宽度
* height 高度
* 合并单元格(值的写法:合并几个单元格,值就写几)
* 行合并 rowspan=""
* 列合并 colspan=""
(还可以用在行或者列的那个格子里写空格的方式 )
* <caption></caption>必须要写在table的中间
* 表单标签
* 收集用户输入的数据
* 表单的标签
<form >
* form的属性
* action="表单的提交路径"
* http://www.baidu.com
* html页面
* method="提交方式(默认是get方式)
* post和get提交方式的区别:
* get方式会把参数列表显示在地址栏上,post方式不会 。
* get方式说明网站安全级别较低,post安全级别较高。
* get方式不支持大数据,post支持大数据。
* 视频里面的老师推荐使用post方式。
* 用户输入的内容
<input type="类型" name="名称(必须要指定)" value="是否指定value属性" />
* name属性必须要指定,value可以看情况指定
* type="text" 普通的文本框
* name必须指定
* type="password" 密码框
* * name必须指定
* type="radio" 单选按钮
* name必须指定 value必须指定
* name的属性,值要相同
* 默认值:checked=checked或者true
* type="checkbox" 多选按钮
* name必须指定 value必须指定
* 默认值:checked=checked或者true
* type="reset" 重置:恢复到最初的状态
* type="submit" 提交表
* type="file" 选择文件
* type="hidden" 隐藏组件
* type="button" 按钮
* value="显示的文字"
* 和js(javascript) 绑定事件
* type="image" 图片
* 提交 引入外部的一个文件(图片)
* 声明选择框
<select name="city">
<option value="bj"></option>
<option value="sh"></option>
</select>
* <textarea>文本域
* rows="行"
* clos="列"
* name属性指定
* selected="selected" 代表默认值
</form>
***************************************************************************************************************************************** * HTML: HyperText Markup Language 超文本标记语言。
* HTML的代码都是由标签所组成。
* HTML的基本格式
<html>
<head>
存放属性的信息,辅助性的信息
引入外部的文件(重要)
会先加载
</head>
<body>
存放的是真正的数据
</body>
</html>
* html不区分大小写
* 多数标签都是有开始标签和结束标签,其中有个别标签因为只有单一功能,或者没有要修饰的内容可以在标签内结束。比如</br> 而且发现</br><br/><br>竟然都有用;
* 属性与属性值之间用“=”连接,属性值可以用双引号或单引号或者不用引号,一般都会用双引号。如果外面有双引号就用单引号
* 配置工作空间的编码(采用UTF-8编码)
写了几个小练习,单单呈现页面。配合着练习,标签会记的更熟一些。现放上其中一个。(正在学习中,代码写的还很稚嫩,多包涵。)
小练习的页面
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>注册</title>
</head>
<body>
<div style="background-color:#6699ff;">
<h1 align="center" >免费开通冰哥聊足球中文网账号 </h1></br>
</div>
<img src="bj.jpg" width=100% height=100%>
<!-- 插入背景图片-->
<span style=" width:300px;hight:300px; position:absolute; left:120px; top=:800px;">
</br> </br> </br> </br>
<!-- 怎么调整top值都没用,只能多来几个回车,问题记下,后面解决-->
<img/ src="tls.jpg">
</span>
<span style=" width:500px;hight:500px; position:absolute; left:500px; top=:100px; float:left;">
<form action="../1/footballTest1.html" method="POST" name="footballRegist">
<table width="100%">
<tr>
<td align="right">注册邮箱 : </td>
<td><input type="test" name="Emal" /><td>
</tr>
<tr>
<td> </td>
<td>你还可以使用<a href="#"> 账号</a> 或者<a href="#">手机号</a>注册</td>
</tr>
<tr>
<td align="right">创建密码 :</td>
<td><input type="password"name="password" value=""></td>
</tr>
<tr>
<td align="right">真实姓名 : </td>
<td><input type="test"name="trueName" value=""/><td>
</tr>
<tr>
<td align="right">性别 : </td>
<td><input type="radio"name="sex" value="na"/>男 <input type="radio" name="sex" value="nv">女<td>
</tr>
<tr>
<td align="right">生日 : </td>
<td>
<select name="year">
<option>1992</option>
<option>1993</option>
<option>1994</option>
</select>
年
<select name="month">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
<option>6</option>
<option>7</option>
<option>8</option>
<option>9</option>
</select>
月
<select name="day">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
<option>6</option>
<option>17</option>
<option>18</option>
<option>29</option>
</select>
日
</td>
</tr>
<tr>
<td align="right">我现在 : </td>
<td>
<select name="now">
<option>正在上学</option>
<option>已经工作</option>
<option>无业游民</option>
</select>
</td>
</tr>
<tr>
<td align="right">照片 : </td>
<td>
<input type="file"/ name="photo">
</td>
</tr>
<tr>
<td align="right">爱好 :</td>
<td>
<input type="Checkbox" name="hobby" value="football" >足球
<input type="Checkbox" name="hobby" value="basketball" >篮球
</td>
</tr>
<tr>
<td align="right">自我介绍 : </td>
<td>
<textarea cols="30" rows="10" name="produce" ></textarea>
</td>
</tr>
<tr>
<td> </td>
<td><img src="verycode.gif"> <font color="blue"><u>看不清换一张?</u></font></td>
</tr>
<tr>
<td align="right">验证码 : </td>
<td><input type="text" name="yan" value=" "></td>
</tr>
<tr>
<td> </td>
<td>
<input type="image" src="btn_reg.gif ">
</td>
</tr>
</table >
</span>
</form>
</body>
</html>