html 初始 - 各种标签
1.html 文档基本结构
HTML文档结构 <html> <head></head>:head内放的内容不是给用户看的 是给浏览器去识别做相应操作的 <body></body>:body内放的内容就是浏览器展示给用户看到的花里胡哨的页面 </html>
2.标签
1.标签分类
分类一：双标签 单标签(自闭和标签) 分类二： 块级标签 独占一行 h1~h6 p br hr div 1.块儿级标签内部可以嵌套任意的块儿级标签和行内标签 2.特列:p虽然是块儿级标签 但是它的内部只能嵌套行内标签 不能嵌套块儿级标签 如果嵌套了 没有问题 知识不符合html语法规范 行内标签 u s i b span label（一般结合input标签使用） 自身文本多大 就占多大 行内标签内部不能嵌套块儿级标签和行内标签
2.head内常用标签 本节只介绍标签 具体使用后面详细解释
title:定义网页标题 style:内部支持直接写css代码 link:引入外部的css文件 script: 1.内部可以直接编写js代码 2.可以通过src属性引用外部js代码 meta： 一般用于增加网站的曝光率 name属性 keywords description
<head>
<meta charset="UTF-8">
<title>亚洲最大的XXX网站</title>
<meta http-equiv="refresh" content="2;URL=https://www.oldboyedu.com"> 两秒后跳转到相应的网址
<!-- <style>-->
<!-- h1 {-->
<!-- color: green;-->
<!-- }-->
<!-- </style>-->
<!-- <link rel="stylesheet" href="mycss.css">-->
<!-- <script>-->
<!-- alert('你好啊 DSB')--> 这里js没有绑定任何事件，打开页面自动跳出弹出框
<!-- </script>-->
<!-- <script src="myjs.js"></script>-->
3.body内常用标签
标题标签：h1-h6
字体标签：s 删除线 b 加粗 u 下划线 i 斜体
行级标签： p 行标签 br 换行 hr 分割线
<p>何处望神州 满眼风光 北固楼</p><br>
<p>何处望神州满眼风光北固楼</p>
特殊符号
空格
<p>a大于b a > b</p>
<p>a小于b a < b</p>
<p>a&b a & b</p>
<p>人民币 ¥10000000000</p>
<p>版权标识 ©</p>
<p>注册商标 ®</p>
常用标签： 使用最多 用于页面布局
div 块级标签
span 行内标签 内容多大就占多少位置
img 图片标签
src
1.可以写一个网站图片地址
2.还可以写本地的图片地址
3.url(自动朝该url发送get请求要数据)
alt
当图片加载不出来的时候 默认展示的提示信息
title
当鼠标悬浮在图片上的时候 展示的提示信息
width,height
修改一个 另外一个会自动等比例缩放
如果两个都修改图片就会失真
<img src="download.jpg" alt="这个葫芦娃" title="这是七娃" width="200px" height="200px">
a 标签
列表标签
列表标签
无序列表(较多)
ul
li
只要页面上出现了比较有规则排列的文本 基本上都可以用无序列表来实现
有序列表
ol
li
标题列表
dl
dt标题
dd内容
表格标签
<table>
<thead>
<tr>
<th></th>
<th></th>
<th></th>
</tr>
</thead>
<tbody>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr></tr>
</tbody>
</table>
表单标签 form 标签
下拉框标签 select 标签 label标签
作用 ：用于获取用户输入 并提交给后台 以key-value的形式 name 属性即为key value 属性即为值
注意：一般 button 按钮 在没有type 属性时，直接即为提交，一般情况下，form 标签中使用input标签type 为 submit来定义提交按钮
表单标签(*******) form标签 获取用户输入（输入，选择，上传文件....）并且将数据打包发送给后端 action参数 用来控制数据提交的路径(到底朝哪个后端服务器提交数据) 三种写法: 1.不写 默认就是朝当前该页面所在的地址提交数据 2.全路径(https://www.baidu.com) 3.只写路径后缀(/index/) 获取用户输入 input标签 该标签是一个行内标签 input类似于前端的变形金刚 type属性 text 普通文本 password 密文 date 日期 radio 多选一 checkbox 多选多 默认选种 checked="checked" 当标签的属性名和属性值相同的时候 可以只写属性名 女<input type="radio" name="gender" checked="checked"> 简写 女<input type="radio" name="gender" checked> reset 重置 button 普通按钮 submit 触发form表单提交动作 file 获取文件 select标签 下拉框 一个个选项就是一个个option标签 默认是单选的 可以加一个multiple该成多选 <select name="" id="" multiple> <option value="">新垣结衣</option> <option value="">明老师</option> <option value="">嫖老师</option> <option value="">波老师</option> </select> 如何让option标签默认选中 加selected="selected" <select name="" id="" multiple> <option value="" selected="selected">新垣结衣</option> <option value="">明老师</option> <option value="" selected>嫖老师</option> <option value="">波老师</option> </select> textarea标签 获取大段文本 label通常是配合input一起使用的 for用来填写对应的input标签id值 点击label标签内的内容 会自动让对应的input标签 聚焦 能够触发form表单提交数据的按钮(******) <input type="submit"> 可以通过value属性来指定按钮文本内容 <input type="submit" value="注册"> <button>点我</button> input获取到的用户输入就类似于是字典的value input中的name属性就类似于是字典的ke
实例
<form action="">
<p>
<label for="d1">用户名:<input type="text" id="d1" name="username"></label>
</p>
<!-- <p>-->
<!-- <label for="d2">用户名:</label>-->
<!-- <input type="text" id="d2"></p>-->
<p>密码:<input type="password" name="password"></p>
<p>生日: <input type="date"></p>
<p>性别:
男<input type="radio" name="gender">
女<input type="radio" name="gender" checked>
其他<input type="radio" name="gender">
</p>
<p>爱好:
篮球<input type="checkbox" name="hobby">
足球<input type="checkbox" checked >
双色球<input type="checkbox">
肉球<input type="checkbox" checked>
</p>
<p>省份:
<select name="province" id="">
<option value="">北京</option>
<option value="">上海</option>
<option value="">深圳</option>
</select>
</p>
<p>前女友:
<select name="" id="" multiple>
<option value="" selected="selected">新垣结衣</option>
<option value="">明老师</option>
<option value="" selected>嫖老师</option>
<option value="">波老师</option>
</select>
</p>
<p>个人简介:
<textarea name="" id="" cols="30" rows="10"></textarea>
</p>
<p>个人简历:
<input type="file">
</p>
<p>
<input type="submit" value="注册">
<input type="reset" value="重置">
<input type="button" value="按钮"> 普通按钮
<button>点我</button>
form表单中的button 按钮自带提交功能，
一般情况 form标签中的提交按钮 用type为submit的 input标签 type=‘submit’来表示
</p>
</form>
