HTML学习笔记

最新推荐文章于 2024-03-13 17:37:45 发布

原创最新推荐文章于 2024-03-13 17:37:45 发布

· 458 阅读

0 ·

版权

文章标签：

#html

前端基础专栏收录该内容

5 篇文章

订阅专栏

1.html简介

2.文字标签和注释标签

3.标题标签,水平线标签和特殊标签

4.列表标签

-<dl></dl>:表示列表的范围
**在dl里面<dt></dt>:上层内容
**在dl里面<dd></dd>:下层内容

代码:
<dl>
<dt>传智播客</dt>
<dd>财务部</dd>
<dd>财务部</dd>
<dd>财务部</dd>
</dl>

<ol></ol>:有序列表范围
-属性type:设置排序方式1(默认) a i
**在ol标签里面<li>具体内容</li>

代码:
<ol>
<li>传智播客</li>
<li>财务部</li>
<li>财务部</li>
<li>财务部</li>
</ol>

-想要在页面上显示这样的效果
特殊符号(方块) 财务部
特殊符号(方框) 学工部

**<ul></ul>:表示无序列表的范围
属性:type 空心圆circle 实心圆disc 实心方块square,默认disc
在ul里面<li></li>
-代码
<ul>
<li>财务部</li>
<li>学工部</li>
<li>人事部</li>
</ul>

5.图像标签(*****)

*<img src="图片的路径"/>
-src:图片的路径
-width:图片的宽度
-height:图片的高度

-alt:图片上显示的文字,把鼠标放到图片上,停留显示的内容
**某些浏览器下不显示

6.路径的介绍

**绝对路径
-http://www.baidu.com/b.jpg
c:\User\asus\Desktop\b.jpg

**相对路径
-一个文件相对另外一个文件的位置
1)html文件和图片在一个路径下,可以直接写文件名称
2)图片在html的下层目录
** img\a.jpg

3)图片在html文件的上层目录
** ../ 表示上层路径
** ../../ 表示上层的上层

7.超链接标签(*****)

*链接资源
-<a href="链接到资源的路径">显示的内容</a>
**href:链接资源的地址
**target:打开方式默认是当前页面打开
--_blank:在一个新窗口打开
--_self:在当前窗口打开

<当超链接不需要跳转到任何地址在href里加#
<a href="#">这是一个超链接</a>

*定位资源
**如果想要定位资源:定义一个位置
<a name="top">顶部</a>
**回到这个位置
<a href="#top">回到顶部</a>

**引入一个标签pre: 原样输出

8.表格标签(重要的标签)

*可以对数据进行格式化

*<table></table>:表示表格的范围
-border:表格线
-bordercolor:表格线的颜色
-cellspacing:单元格之间距离
-wigth:表格的宽度
-height:表格的高度

**在table里面一行<tr></tr>
-设置对齐方式 align=left center right
**在tr里面<td></td>
-设置对齐方式 align=left center right
***使用th也可以表示单元格
-表示可以实现居中和加粗

*代码
<table border="1" bordercolor="blue" cellspacing="0" width="200" height="150">

*画图分析表格的写法
-首先定义一个表格的范围使用table
-定义一行使用tr
-定义一个单元格使用td
**操作技巧
-首先数多少行,数每列里面多少个单元格

**表格的标题
<caption></caption>

**合并单元格
-rowspan:跨行

-colspan:跨列
**<td colspan="多少列">人员信息</td>

9.表单标签

*可以提交数据到某网的服务器,这个过程可以使用表单标签实现

*<form></form>:定义一个表单的范围

-属性
**action:提交到地址,默认提交到当前的页面
**method:表单提交方式
-常用的有两种 get和post,默认是get请求

面试题目:get和post区别
1.get请求地址栏会携带提交的数据,post不会携带
2.get请求安全级别低,post高
3.get请求数据大小的限制,post没有限制

**enctype:一般请求不需要这个属性,做文件上传时候需要设置

**输入项:可以输入内容或者选择内容的部分
-大部分的输入项使用<input type="输入项类型"/>

********在输入项里面需要有一个name属性

***普通输入项:<input type="text"/>
***密码输入项:<input type="password"/>
***单选输入项:<input type="radio" />
-在里面需要属性name
-name的属性值必须相同
-必须有一个value值
****实现默认选中的属性
checked="checked"

***复选输入项:<input type="checkbox"/>
-在里面需要属性name
-name的属性值必须相同
-必须有一个value值

****实现默认选中的属性
checked="checked"

***文件输入项
-<input type="file"/>

***下拉输入项
<select name="birth">
<option value="0">请选择</option>
<option value="1997" selected="selected">1997</option>
<option value="2003">2003</option>
</select>

-默认选中
selected="selected"

***文本域
<textarea cols="10" rows="10"></textarea>

***隐藏项
<input type="hidden"/>
***提交项
<input type="submit"/>
<input type="submit" value="提交"/>

***使用图片提交
<input type="image" src=" "/>

***重置按钮:回到输入项初始状态
<input type="reset"/>

***普通按钮
<input type="button" value="普通按钮"/>

10.案例

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>html示例</title>
</head>


<body>
	<h2>注册传智播客的账号</h2>
    
    <form action="hello.html">
    <table border="0" width="100%">
    	<tr>
        	<td align="right">注册邮箱:</td>
        	<td><input type="text" name="mail" /></td>
        </tr>
        <tr>
        	<td> </td>
            <td>你可以使用<a href="#"/>账号</a>注册或者使用用<a href="#"/>手机号</a>注册</td>
                
        </tr>
        <tr>
        	<td align="right">创建密码:</td>
        	<td><input type="password"  name="pwd"/></td>
        </tr>
        <tr>
        	<td align="right">真实姓名:</td>
            <td><input type="text" name="name" /></td>
        </tr>
         <tr>
        	<td align="right">性别:</td>
            <td><input type="radio" name="sex" value="nv" />女<input type="radio" name="sex" value="nan"/>男</td>
        </tr>
        <tr>
        	<td align="right">生日:</td>
            <td>
            	<select name="year">
                	<option value="1945">1935</option>
                    <option value="1931">1931</option>
                    <option value="1949">1949</option>
                 </select>年
                <select name="month">
                	<option value="12">12</option>
                    <option value="11">11</option>
                    <option value="10">10</option>
                 </select>月
                  <select name="day">
                	<option value="1">1</option>
                    <option value="2">2</option>
                    <option value="3">3</option>
                 </select>日
                 
            </td>
        </tr>
        <tr>
        	<td align="right">我现在:</td>
            <td>
            	<select name="now">
                	<option value="study">正在上学</option>
                    <option value="work">正在工作</option>
           		 </select>
            </td>
        </tr>
        
        <tr>
        	<td> </td>
        	<td><img src="2.ico"/><a href="#">看不清换一张</a></td>
        </tr>
       <tr>
       		<td align="right">验证码:</td>
        	<td><input type="text"</td>
        	
        </tr>
       <tr>
       		<td> </td>
        	<td><input type="image" src="3.png"</td>
        	
        </tr>
	</table>
	</form>
</body>
</html>

11.html中的其他的常用标签

b:
s:
u:
i:
sub:下标
sup:上标
pre:原样输出
p:段标签

div:自动换行
span:在一行显示

12.html的头标签使用

*html两部分组成head和body
**在head里面标签就是头标签
**title标签:表示在标签上显示的内容
-<meta name
<meta http-
base标签: 设置超链接的基本设置
-可以统一设置超链接的打开方式
-<base target="_blank"/>
link标签:引入外部文件

13.框架标签的使用

*<frameset>
-rows:按照行进行划分
**<frameset rows="80,*">

-cols:按照列进行划分
**<frameset cols="80,*">

*<frame>
-具体显示的页面
-<frame name="lower_left" src="">

*使用框架标签的时候,不能写在body里面,使用框架标签,需要把body去掉

*<frameset rows="80,*"> //把页面划分成上下两部分
<frame name="top" src="hello.html"/> //上面页面

<frameset cols="150,*"> //把下面页面划分成左右两部分
<frame name="left" src="b.html"> //左边页面
<frame name="right" > //右边页面
</frameset>

</frameset>

*如果在左边的页面超链接,想让内容显示在右边的页面中
-设置超链接的里面属性target值设置为名称
-<a href="hello.html" target="right">超链接1</a>

14.总结

0.html操作思想
*使用标签把要操作的数据包起来,通过修改标签属性值,来实现标签内数据样式变化
1.font标签属性:size取值范围1-7 color:
2.标题标签 <h1-6></h1-6>:从1-6越来越小,自动换行
3.注释
4.列表标签
**<dl>
<dt></dt>
<dd></dd>
<dd></dd>
</dl>

**有序:<ol><li></li></ol>
**无序:<ul><li></li></ul>
5.图像标签
<img src="图片的路径" width="" height="" alt=""/>
6.路径
**同一级目录:直接写
**在下层路径:images/1.jpg
**在上层路径:../

8.超链接标签
<a href="路径">内容</a>
-打开方式target="_self _blank"

9.表格标签
<table>
<tr>
<td></td>
<td></td>
<th></th> //加粗居中
</tr>
</table>

10.表单标签

*<form></form>:
-action:提交到地址
-method:提交方式 (get和post)
-get和post区别

-enctype属性:上传的时候使用
*输入项
*输入项里面写name属性
*普通输入项<input type="text"/>
*密码:password
*单选框:radio
*复选框:checkbox
*下拉框:
<select name="">
<option value=""></option>

</select>
*文本域
<textarea cols="" rows="" name=""></textarea>

*文件file

*提交按钮submit
*重置teset
*使用图片提交<input type="image" src=""/>

*隐藏项hidden
*普通按钮button

11.div和span

12.框架标签