html基本操作
<!DOCTYPE html>#####网页渲染标准 <head> #(1)head标签里的meta标签 #####meta属于head标签,meta标签有两个属性:http-equiv属性和name属性 <meta charset="UTF-8"> <meta name="keywords" content="it培训,达内"> <meta name="description" content="老男孩培训机构是由一个....创建的"> <meta http-equiv="Refresh" content="2;URL=https://www.baidu.com"> <meta http-equiv="content-type" charset=UTF8"> <meta http-equiv="X-UA-Compatible" content="IE=EmulateTE7" /> #(2)非meta标签 <title>oldboy</title> <link rel="icon" href="http://www.jd.com/favicon.ico"> <link rel="stylesheet" href="css.css"> #将css代码引入html <script src="hello.js"></script> #将js代码引入html #(3)html注释 <!--<meta http-equiv="Refresh" content="2;URL=https://www.baidu.com">--> </head> #(4)body标签 <body> <h1>hello world</h1> #####hn标签:n取值范围为1-6;从大到小,用来表示标题 <p>鹅鹅鹅</p> <p>曲项向天歌</p> <p>白毛浮绿水</p> #####p标签功能:换行加间隙 红掌拨清波</br> #####br标签:换行 <b>飞流直下三千尺</b>#####b标签:加粗 <strong>飞流直下三千尺</strong>#####strong标签:加粗 <strike>hello</strike>#####strike标签:文本上加横线 <em>斜体</em>#####em标签:斜体 <div>hello</div>#####div标签:无任何效果,div标签属于块级标签 <span>hello</span>#####span标签和div标签效果一样,区别:Span标签属于内联标签 </body> #(5)块级标签和内联标签 块级标签特点:独占一行,宽度缺省时,他的容积为100%,除非人为设定一个宽度;他可以容纳内联元素和其他块元素 内联标签特点:和其他元素同占一行,宽度就是他的文字和图片的宽度,不可改变 常见块级标签:<p>,<h1>,<table>,<ol>,<ul>,<form>,<div> 常见内联标签:<a>,<input>,<img>,<sub>,<sup>,<textarea>,<span> #(6)image标签 <img src="要显示图片的路径" alt="图片没有加载成功时的提示" title="鼠标悬浮时的提示信息" width="200px" height="200px"> #(7)音视频标签 <embed src="要播放的音视频路径" with="设置播放器的宽" height="设置播放器的高"> #(8)a标签:超链接标签 <a href="http://www.xiaohuar.com" target="_blank">校花网</a>#####点击文本“校花网”,跳转到href指定的网址 a标签实现功能-跳转回顶部: div<id="abc">顶部</div> a<href="#abc">返回顶部</a> #(9)列表标签 <ul>:无序列表 <ol>:有序列表 <li>:列表中的每一项 <dl>:定义列表 <dt>列表标题 <dd>列表项 #(10)表单标签<table> (a)表单用于向服务器传输数据 (b)表单能够包含input元素,比如文本字段,复选框,单选框,提交按钮等 (c)表单还可以包含textarea、select、fieldset和label元素 (d)表单属性: HTML表单用于接收不同类型的用户输入,用户提交表单时向服务器传输数据,从而实现用户与web服务器的交互。表单标签,要提交的所有内容都应该在该标签中 action的内容为server端路径,表示表单提交到哪儿,一般指向服务器端的一个程序,程序接收到表单提交过来的数据(即表单元素值)作相应处理;method:表单的提交方式Post/get. get:提交的键值对放在地址栏中url后面;安全性相对较差;对提交内容的长度有限制。 post:提交的键值对不在地址栏;安全性相对较高;对提交内容的长度理论上无限制。 (e)表单标签之<input>标签 ###<input>标签的属性和对应的值 type: text 文本输入框 password 密码输入框 radio 单选框 checkbox 多选框 submit 提交按钮 button 按钮(需要配合js使用.) file 提交文件(form 表单需要加上属性enctype="multipart/form-data"),上传文件注意两点:1,请求方式必须是post 2.enctype="multipart/form-data" name: 表单提交项的键.注意和id的区别:name属性是和服务器通信时使用的名称;而id属性是浏览器端使用的名称,该属性主要是 为了方便客户端编程,而在css和javascript中使用的 value: 表单提交项的值,对于不同的输入属性,value属性的用法也不相同: type="button","reset","submit"-定义按钮上的显示文本 type="text","password","hidden"-定义输入字段的初始值 type="checkbox","radio","image"-定义与输入相关联的值 checked:radio和checkbox默认被选中 readonly:只读 disabled:禁用,又所有的input都能用 ############################################################# <form action="http://127.0.0.1:8080/index" method="">#####action的内容为server端路径,method为提交数据的方式,有两种(get,post) <p>用户名<input type="text" name="username"></p> <p>密码<input type="password" name="password"></p> <p>爱好: 音乐<input type="checkbox" name="hobby" value="music" checked="checked">电影<input type="checkbox" name="hobby" value="movie"></p> <P>性别: 男<input type="radio" name="gender" value="men">女<input type="radio" name="gender" value="women"></p> <P><input type="reset" value="重置"></p> <p><input type="file" name="put_file" ></p>#####上传文件 <p><input type="submit" value="提交注册"></p> input标签,其中name属性是传递给server端的键,最后传递的字典为 {"username":"输入的text值","password":"输入的password值","hobby":"勾选的value值","gender":"勾选的value值"} </form> ############################################################## (f)表单标签之<select>标签 ###<select>下拉列表标签对应的属性 name: 表单提交项的键 size: 选项个数 multiple: multiple <option> 下拉列表中的选项 属性: value:表单提交项的值 selected: 下拉列表选项默认被选中 <optgroup>为每一项加上分组 ############################################################## 省 <select name="province" size="2" > <optgroup label="河北省"> <option value="handan">邯郸</option> <option value="langfang">廊坊</option> <option value="tangshan" selected="selected">唐山</option> </select> (g)表单标签之<testarea>文本域标签 ###<testarea>属性 name: 表单提交项的键 cols: 文本域默认有多少列 rows: 文本域默认有多少行 (h)<lable> <label for="www">姓名</label> <input id="www" type="text"> #####for和id内容相同,姓名才能和"text"关联 (10)表格标签 border: 表格边框. cellpadding: 内边距 cellspacing: 外边距. width: 像素 百分比.(最好通过css来设置长宽) <tr>: table row <th>: table head cell rowspan: 单元格竖跨多少行(即合并行) colspan: 单元格横跨多少列(即合并例) <th>: table header <tbody>(不常用): 为表格进行分区. ############################################### <table border="1px"> <thead> <tr> <th></th> <th></th> <th></th> </tr> </thead> <tbody> <tr> <td></td> <td></td> <td></td> </tr> </tbody> </table> ####################################################### (11)iframe 创建包含另外一个文档的内联框架(即行内框架) <iframe src="url"></iframe>
>>待续