html笔记
来源：互联网 发布：php echo pre 编辑：程序博客网 时间：2024/05/22 19:20
html介绍
html是一种标记语言，主要用于开发网页，使用html可以展现文字，图片，视频，声音，，，
html是我们网站开发的基础
html可以编写静态网页，不能编写动态的，动态是指能与网站进行交互
一、Html的运行原理
1.本地运行
html文件 使用 浏览器（软件）打开
2.远程访问运行
你的电脑（浏览器） 另一台电脑 远程服务器（hello.html）
在基本情况，除了自己测试外，基本都是远程访问html文件
将html文件放在tomcat下
二．html的基本结构
<html>
<head>
<title>第一个网页</title>
</head>
<body>hello</body>
</html>
<元素名 [属性]>元素内容</元素名>
1．不管这html文件有多复杂，它的基本结构是
<元素名 [属性]>元素内容</元素名> 元素也叫标记
<font size=2 color=red>举头望明月</font></br>
2.案例
<p>段落标记</p> 跳转到下一行的下一行
<fontsize=””>字体标记</font>size取值1到7
<h#>标题字体</h#> #=1，2，3，4，5，6
<b></b>：字体加粗
</br>换到下一行
将html的内容放在</body>体内
<html>
<head>
<title>第一个网页</title> 文件的头部，此处可以略去不写
</head>
<body>
<!==我们的内容放在这部分中==> 注释这样写
<h3>静夜思</h3>
<p><b>床前明月光</b></p>
疑是地上霜</br>
<font size=2color=red>举头望明月</font></br>
低头思故乡</br>
</body>
</html>
三、html符号实体
<fontsize=7>© £ ®</font>
四、html超链接
使用超链接，可以使网页链接到另外一个页面
<br/>*******************超链接案例********************<br/>
<ahref='a.html' target="_blank">hello hello</a>
<!-- target 常用属性值 _blank（开新的页面） _self（替换当前页面）-->
<ahref='a.html' target="_blank">hello hello</a><br/>
<ahref='a.html' >hello hello</a><br/>什么也不写，默认是_self（替换当前页面）
<br/><ahref='http://www.baidu.com' target="_blank">百度首页</a><br/>
<br/><ahref='http://www.sohu.com' target="_blank">搜狐首页</a>
五、html图片元素（标记）
Html文件不区分大小写
指定宽度之后高度不用再指示，会自动按比例计算
<imgsrc="d://1.jpg" width=300 ></img>
可以盗连别人的图片
方法：复制要盗连的图片的网址
<imgsrc="http://www.baidu.com/img/baidu_jgylogo3.gif" ></img>
<imgsrc="d://1.jpg" width=300 border=1 ></img> 加边框
特别说明：url可以是外部网站的一个图片
六．html表格
表格的主要用途：显示数据和图片，布局
基本语法：
1.做出这样的一个表格的代码
<table border=5width=500 align="center" bgcolor="yellow" cellspacing=5bordercolor=red>
<tralign=center><td>1</td><td>2</td><td>5</td></tr>
<tralign=center><td>1</td><td>2</td><td>5</td></tr>
<tralign=center><td>1</td><td>2</td><td>5</td></tr>
</table>
表格元素名称是table
<tr>表示一行 <td>表示一列
cellspacing是指空隙大小：指列与列，行与行之间的空隙大小
cellpadding表示填充大小：表示各行各列中的内容的填充，这样就会在一定程度上撑大格子
2.练习
<html>
<head>
<title></title>
</head>
<body>
<table border=1bordercolor=red width=400 align="center" cellspacing=0>
<tr><tdalign="center" colspan=3 >星期一菜谱</td></tr>
<tr><tdrowspan=2>素菜</td><td>青草茄子</td><td>花椒扁豆</td></tr>
<tr><td>小葱豆腐</td><td>炒白菜</td></tr>
<tr><tdrowspan=2>荤菜</td><td>油焖大虾</td><td>海参鱼翅</td></tr>
<tr><tdwidth=280 height=150>红烧肉 <img src="d://1.jpg"width=100></img></td><td>烤全羊</td></tr>
</table>
</body>
</html>
说明：colspan合并行，rowspan和并列 详见菜谱.html文件
七．无序列表ul/li
基本语法
默认的是实心的小圆点
<ul>
<li>传奇</li>
<li>三国</li>
<li>精英</li>
</ul>
八.有序列表
基本语法
默认的编号是1,2,3
代码如下：
<ol type=astart=2>
<li>传奇</li>
<li>三国</li>
<li>精英</li>
</ol>
九．html框架标记frameset/frame
基本语法：
1.
代码：
a1.html 文件
<bodybgcolor=yellow>
周杰伦</br>
齐秦
</body>
a2.html文件
<body >
歌词
</body>
all.html文件
<framesetcols="50%,*" frameborder=0>
<framesrc="a1.html" noresize>
<framesrc="a2.html" noresize>
</frameset>
注意：all.html文件中不能带body标记，norsize使中间不能拖拽
2.综合的小案例
代码如下：
top.html文件
<body>
<imgsrc="d://1.jpg"></img>
</body>
left.html文件
<bodybgcolor="yellow">
<ahref="right1.html" target="right">青花瓷</a></br>
<ahref="right2.html" target="right">当兵的人</a>
</body>
right1.html文件
<body>
青花瓷的歌词
</body>
right2.html文件
<body>
当兵的人的歌词
</body>
zong.html文件
<framesetrows="15%,*" frameborder=10 framespacing=5 bordercolor=red>
<framesrc="top.html" noresize scrolling="no">
<framesetcols="20%,*">
<framesrc="left.html" noresize>
<framesrc="" noresize name="right">
</frameset>
</frameset>
十．Html常用标记-form
介绍：html表单元素主要是让用户输入数据，提交给服务器
1.基本语法
默认的是get方法
2.案例
login.html文件
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>
<inputtype="submit" value="登陆"><input type="reset"value="重新填写">
</form>
</body>
</html>
OK.html文件
<body>
登陆OK！
</body>
从上面的案例，我们可以看出
（1） 表单元素的格式
<inputtype=* name=**/>
type= text（文本框） password（密码框） hidden（隐藏框）
checkbox（复选框） radio（单选框） submit（提交按钮）
reset（重置按钮） image（图片按钮）<input type=”image” src=””>
name 是给该表单元素取名
（2） action指定把请求提交给哪个页面
post不会在地址栏上显示，但是get会在地址栏上显示，这样很危险
input元素的举例
<body>
<formaction="" method="post">
您的姓名：<input type="text"name="username"></br>
密码：<input type="password"name="pwd"></br>
<inputtype="checkbox" name="水果">苹果</br>
<p><inputtype="checkbox" name="水果">香蕉</p>
<p><inputtype="radio" name="sex">男</p>
<p><inputtype="radio" name="sex">女</p>
<p><inputtype="hidden" name="sal" value="1000">这里有一个隐藏的表单元素</p>
<inputtype="image" src="d://1.jpg" name="图片"width=100>
</form>
</body>
注意：隐藏的作用是既可以提交数据，又不影响数据，不占有空间
单选框和复选框都要使用相同的名字。
Checked单选框复选框都可以使用，表示默认选项
<inputtype="checkbox" name="水果" checked>苹果</br>
<p><inputtype="checkbox" name="水果">香蕉</p>
select/option/texterea举例
select 默认选中selected
代码：select.html文件
<body>
<formaction="" method="post">
请选择你得爱好：<select name="like">
<optionvalue=xuanze >请选择</option> 提交的时候要提交value的值
<optionvalue=yumao>羽毛球</option>
<optionvalue=dianshi>看电视</option>
</select></br></br>
<textarea cols="30" rows="10">请在这里输入文本
</textarea></br></br>
<inputtype="file" name="文件"> 可以进行文件的选择
<input type="submit"value="提交"><input type="reset"value="重置">
</form>
</body>
十一.html的加强
1.语言字符集
您在浏览主页时，最好自己在浏览器的选项菜单内选择相应的语言。
但是如果 HTML 文件里写明了设置，浏览器就会自动设置语言选项。
<head>
<title>hello</title>
<metahttp-equiv="Content-Type"content="text/html;charset=gbk">
</head>
2. 背景色彩和文字色彩
<body link=redtext=blue>你好
<ahref="http://www.baidu.com">百度</a>
</body>
文本是蓝色，链接是红色
3.页面空白
<body leftmargin=0 topmargin=0>你好
</body>
让文本靠近左上角
4.target
<a href=urltarget=_blank> 新窗口
<a href=url target=_self> 本窗口
<a href=url target=_parent> 父窗口
<a href=url target=_top> 整个浏览器窗口
<a href=url target=指向frame的名字>
5.标识线
<hr color=”red”/>
6.字体大小
<fontstyle=”font-size:150px”>标题</font>
次句可以将字体无限放大，因为用<h1>最大此时满足不了需要
face=”华文新魏” 可以给字设置不同的字体
7.图像
<img src=”d://1.jpg” alt=”这是小狗”> </img>
鼠标点到图片时，显示文字
8.会移动的文字
<marquee>啦啦啦，我会移动耶！</marquee>
- HTML笔记-HTML基础
- 【HTML】HTML学习笔记
- html笔记
- html笔记
- html笔记
- HTML笔记
- html笔记
- html笔记
- HTML笔记
- HTML 笔记
- html笔记
- HTML笔记
- html笔记
- HTML笔记
- HTML 笔记
- HTML笔记
- html笔记
- HTML 笔记
- 预定义超全局变量、$_GET
- python学习笔记
- USACO 2.1 健康的好斯坦奶牛 (DFS)
- python爬虫项目笔记
- 1081. Rational Sum
- html笔记
- LA 5031 Graph and Queries (离线处理 + Treap树维护名次)
- Android Studio导入项目的几种方法
- 论文引文分类代号
- 关于2的补码
- opencv注意小知识点
- 前端CSS规范大全
- 表达式求值
- inode
