html学习笔记

最新推荐文章于 2023-06-27 13:59:52 发布

CreabineChen

最新推荐文章于 2023-06-27 13:59:52 发布

阅读量458

点赞数

本文链接：https://blog.csdn.net/creabinechen/article/details/49056099

版权

从2015年十一长假开始正式自学前端，到现在的这几天也整理了一些笔记，从今天开始复习整理，并把新学的内容笔记记在这里，整理思路，鼓励自己，同时也防止电脑出问题资料丢失。加油~

◆ html的介绍

html 是一种标记语言，主要的用途是开发网页，使用html可以展现文字、图片、视频、声音...

html 是我们web开发（网页开发）的基础

网页设计师（html+css+js+flash+美工）

◆ 发展历程

1993年第一个版本----->>>>1999年 html4.01----->>>>html5.0

xhtml（发展）

◆ w3c

w3c是制定web（html，xml）标准的机构

◆html的运行原理

1 本地运行

html文件使用浏览器（软件）运行

视频文件使用暴风软件运行

2 远程访问运行

除了开发测试外，其他时候都是用远程访问html文件

快速体验

开发hello.html，放在tomcat（还不会用）下

◆ html的基本结构

不管这个thml文件有多复杂，它的基本结构式：

<元素属性=属性值。。。><元素>

元素就是标记

案例：

<font size=“”>字号标记</font> size 取值可以为1到7

<h#>标题字体</h#>#=1,2,3,4,5,6

<b></b>字体加粗

html 的代码：

<html>

<head>

<title>第一个网页</title>

</head>

<body>

<b>第一个creabine</b><br>

<p><font color=#FAB500>第二个creabine</font></p>

<font size=7>第三个creabine</font><br/>

<font size=7><font color=red>第四个Creabine</font></font><br>

**********字符实体案例*****************<br/>

◆注意<p></p>（段落，跟上下的其他部分留一段空白）和<br/>（仅换行）的区别

◆取色工具

◆html的字符实体（用实体名称）

◆html的超链接

使用超链接，可以让网页连接到另外一个页面

举例

**********超链接案例*****************<br/>

<a href="a.html" target="_blank">老鼠爱大米</a></br>

◆ 说明href 可以连接到外部网站注意href拼写

◆ html文件不区分大小写

◆html图片元素（标记）

也可以是 <img src=’图片的路径’ width=’宽度’ height=’高度’/>，直接/，省略后边的</img>

案例

***************图片元素********************<br/>

特别说明 src可以是外部网站的一个图片 url

◆html表格案例

表格的主要用途是显示数据和图片，并且可以起到网页布局的作用

案例：

******************表格******************<br/>

</table>

基本语法

*表格的元素名称是 table

*<tr></tr>表示行

*<td></td>表示列

*cellspacing 表格空隙大小，格子间的距离大小

*cellpadding 表示填充大小，每个格子的大小。能在一定程度上把格子撑大，表格变大。

*可以用<th></th>表示表头，自动加粗里边的字

*可以用width height设置表格大小

*可以用valign设置表格里边的字显示在哪里，可以是上中下，默认居中；align控制左右中，默认中。

*表格可以加背景色

表格菜谱实例：时常回顾不然会忘记

程序：

<html>

<head>

</head>

<body>

<tr align=center><td colspan=3>星期一菜谱</td></tr>

</table>

</body>

</html>

显示：

html无序列表 ul-li，列表前边是三角，菱形等

案例：

代码：

</ul>

</ul><ul type='circle'>

</ul>

◆ html 的有序列表

案例：

代码：

***********有序列表************</br>

</ol>

*若无type默认为1（数字顺序）;a/A（字母顺序）;i/I(罗马数字)，一共5种

*只有当type类型为数字，也就是type=1的时候，可以用start，这个属性可以定义排序从几开始，start=6，也就是排序是6、7、8、9……

◆html 的框架标记（元素） frameset/framef

案例：

基本语法：

</farmeset>

代码：

把aa和bb放入 all。

aa.html

周杰伦的歌

</body>

bb.html

<body >

陈奕迅的歌

</body>

all.html ,

</frameset>

*all.html文件中不能带body标记，否则不显示

*frameborder=0 边框宽度为0

*noresize 禁止重置大小，不加这个属性，网页上可以自由用鼠标拖拽改变分割百分比

综合案例：

程序：

top.html

left.html

</body>

right1.html

right1.html文件内容青花瓷

</body>

righ2.html

right2.html文件内容呵呵呵

all2.thml

</frameset>

◆html的表单元素

介绍：html的表单元素，主要用于让用户输入数据，并提交给服务器

基本语法是：

各种元素{输入框，下拉列表，文本域，密码框……}

</form>

案例1：

代码：

<html>
<head>
<title>登录系统</title>
</head>
<body>
<h1>登录界面</h1>
<form action="ok.html" method="post">

用户名：<input type="text" name="username"></br>
密　码：<input type="password" name="pwd"></br>
密 &nbsp码：<input type="password" name="pwd"></br>

<input type="submit" value="登录"/><input type="reset" value="重新填写"/>

</form>

</body>
</html>

*从上边的案例可以看出：

1. 表单元素的格式：

type= text【文本框】 password【密码框】 hidden【隐藏框】 checkbox【复选框】 radio【单选框】 submit【提交按钮】 reset【重置按钮】 image【图片按钮】

name 是你给该表单元素取的名字

2. action 指定把请求交给哪个页面

◆input元素的举例说明

代码：

<html>
<head>
<title>input元素练习</title>
</head>
<body>
您的姓名：<input type="text" value="请输入名字" name="username"></br>

密　　码：<input type="password" name="pwd"></br>
*******喜欢的水果**********</br>
<input type="checkbox" name="f1">香蕉</p>
<input type="checkbox" name="f1" checked>苹果</p>


*****选择性别*****</br>
<input type="radio" name="sex" >男</br>
<input type="radio" name="sex" checked>女</br>


*****隐藏(它的用处主要是，即可提交数据，同时不影响界面)****</br>
<input type="hidden" name="add" value="hoge@hoge.jp">这里有一个隐藏的表单元素</p>


<input type="image" name="submit" align="top" src="桃子.png"></p>

****下拉选择****</br>
请选择你的出生地：
<select name="select" multiple size=3 >
<option value="">--请选择--</option>
<option selected value="hashi">哈什</option>
<option value="lanzhou">兰州</option>
<option value="xiamen">厦门</option>
</select>
</br>

********请留言*********</br>
<textarea cols="50" rows="10" wrap=off>请在这里输入.....</textarea></br>

***选择你要上传的文件***</br>
<input type="file" name="myfile"/>请选择文件

</body>
</html>

◆html加强

程序；

<html>

<head>
<title>hello</title>
<meta http-equiv="Content-Type" content="text/html;charset=gbk">

</meta>

</head>
<body link=red text=blue topmargin=0px leftmargin=0px>

<a href="http://www.baidu.com">baidu</a></p>

你好~！！

********标尺线******</br>

<a href="#" target="_blank"></a>新窗口

<a href="#" target="_self"></a>本窗口

<a href="#" target="_parent"></a>父窗口

<a href="#" target="_top"></a>整个浏览器窗口

***文字的分区显示div****</br>
<div style="border:1px solid red;width:400px;position:absolute;left:500px;top:600px">你好<img src="桃子.png"width=100/>
<table border=1><tr><td>名字</td><td>外号</td></tr></table>
</div>
***块引用****</br>
<blockquote>fajsdklfj</blockquote>

***闪烁,有的浏览器不认****</br>
<blink>金闪闪</blink></br>
***图片，加上alt属性，当网速慢等原因造成图片无法显示时，可以显示替代的文本****</br>
<img src="桃子1.png" alt="232" width="100px"/></br>

***跑马灯****</br>
<marquee direction="right" behavior="alternate">我会跑~~~<img src="桃子.png"/>
</marquee>