学习目标:html基础
学习内容:
1.1HTML介绍。
1.11html是一种描述网页的语言。
1.web三大核心技术:html(负责网页架构)css(负责网页样式,美化)js(负责网页的行为)
2.html 单标签 双标签 内容
3.属性格式:属性名=“属性值” 例如 (< a href=“httpqq.com”>经典 < /a>)
2.HTML 骨架标签
《!DOCTYPE HTML》
《html》
《head》
《meat charset=“utf-8”》
《tltle》小王非常简单《/title》
《/head》
《body》
代码编写区域
《/body》
《/html》
所有标签都在《html》这个标签中。head头标签 body身体标签
ctrl+/ 注释快捷键
标题标签
《h1》–《h6》h1最大
段落标签
《p》换行
超链接标签
《a href=“http:www.baidu.com”》百度《/a》
《a href=“http:www.baidu.com” target=“_blank”》百度《/a》
属性:href :跳转地址。target:新窗口打开 默认值 _blank。
图片标签:
《img src=" 图片地址" title=" 图片名" alt=" “width=“104” height=” "》
属性:src:图片路径
title:光标移上去后显示文字
alt:图片未加载时显示文字
width:图片宽度
height:图片高度
img标签必须有src 和title标题。
空格(& nbsp; )与换行(< br />)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<!-- 测试h1-h6 -->
<h1>卧槽</h1>
<h2>卧槽</h2>
<h3>卧槽</h3>
<h4>卧槽</h4>
<h5>卧槽</h5>
<h6>卧槽</h6>
<p>金樽清酒斗十千,玉盘珍羞直万钱。</p>
<p>停杯投箸不能食,拔剑四顾心茫然。</p>
<p>欲渡黄河冰塞川,将登太行雪满山。</p>
<p><闲来垂钓碧溪上,忽复乘舟梦日边。</p>
<p>行路难!行路难!多岐路,今安在?</p>
<p>长风破浪会有时,直挂云帆济沧海。</p>
<a href= "http:www.baidu.com"> 百度</a>
<p></p>
<a href= "http:wwww.baidu.com" target="_blank">百度</a>
<img src="F:\javaphoto\1.png" title="ATM取款流程"alt="ATM取款流程图"width=" 600" height="200">
<h1>小王很简单 N1</h1>
<br />
<h2> 不简单 </h2>
</body>
</html>
布局标签
div 标签 独占一行
span 标签 一行可以放多个
列表标签
分为两种 有序:< ol >
< li> … < /li>
< li> … < /li>
< /ol >
无序:< ul>
< li> … < /li>
< li> … < /li>
< /ul>
input标签
属性:type=“text”文本框
type=“password”密码框
type=“radio”单选按钮
type="check"复选框
type=“submit“ 提交按钮
type=“reset“ 重复按钮
type=“button“ 普通按钮
form标签 将页面输入的信息提交到后台。
属性:action:将数据提交到哪个页面
method:提交参数的方法
一般用于查询 get:参数url明文显示 提交速度快 提交长度有限制 (与浏览器有关)
post:参数非明文显示 提交速度慢 提交长度无限制
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
.d1{background-color: red;}
.d2{background-color: #00FFFF;}
.c1{color: chocolate;}
</style>
</head>
<body>
<div class="d1">大盒子</div><div class="d2">小盒子</div>
<span class="c1">span1</span> <span>span2</span>
</span></span>
<br />
<br />
<br />
<br />
<ol>
<li>北京 </li>
<li>天津 </li>
<li>上海 </li>
<li>江苏</li>
</ol>
-----------------------------------------
<ul>
<li>广州 </li>
<li>武汉 </li>
<li>长沙 </li>
<li>重庆 </li>
</ul>
<form action="2.html" method="post">
用户名: <input type="text" /><br />
密码: <input type="password" /><br>
男 <input type="radio" name="sex"/>
<!-- name相同时为单选 -->
女 <input type="radio" name="sex"/><br>
qq <input type="checkbox" />
wechat <input type="checkbox"/><br>
<input type="button" value="登录" /><br>
<input type="submit"/><br>
<input type="reset"/>
</form>
</body>
</html>
学习产出: