前端HTML

一、html

一套规则
学习规则,写html文件
多个html文件时写一个模板即可

1.标签
分为自闭合、自动

DOCTYPE 声明了文档类型
<html> 与 </html> 描述了文档类型 lang="en"属性,指明语言
注释:<!-- -->
①<head>
<head>标签里除了title外其他都看不到,
<meta charset="UTF-8">
<meta http-equiv="refresh" Content="30" url=> #刷新,还能跳转
meta还能定义关键字,用于爬虫 name=”keywords“ content=”“
用于描述name=”description“ content=”“
<meta http-equiv="x-ua-compatible" content="IE=EmulateIE9;EmulateIE8">
使得html能兼容高版本

<link><style><script>
link能指定css文件路径,图标及路径<link rel="shortcut icon" href="">rel指定是图标还是css

②<body>
特殊符号:
空格:&nbsp; 能避免与标签符号冲突
<p>段落,一行内容,p与p标签之间有行距,要想换行,<br>,没有间距,一般推荐自闭合<br/>
<h1>标题,一行内容,块级标签
<span>内联标签

块级标签:p,h,自带特性,div也是白板,布局使用率最高,与span类似
内联标签:span(白板),用于css美化
标签的存在用于js获取值

chrome:定位和查看样式

<input />:自闭合,内联 type=submit才能提交form表单
<form>:只能获取标签内input输入框的值,其他标签获取不到
三个属性:
method:提交方式
action:提交网页
enctype:表单数据类型

<input type='radio' name='gender'/> name相同只能单选,加上value才能辨别
默认值:checked="checked"
<input type='checkbox' name='favor' value='' /> name分组,value取值

<input type='file' name=''/>
<input type='reset' value=''/>重置


多行文本和下拉框
<textarea name=''>默认值写中间</textarea>

<select name=''> #size:框展示大小 multipe='multipe'
<option value=''></option> #selected='selected'默认选中

</select>

返回顶部
<a href=''></a> #target='-blank'新页面打开 内联
- 跳转
- 锚:href='#i2' <div id='i2'></div> 跳转到该标签开始的地方,id重复时点击不跳转


<img src='' style='height:200px;width:200px;'> #自定义大小,可包裹在a标签里跳转
#alt=’‘图片加载失败时显示文本
#title=’‘ 鼠标放置时显示文本
<ul>
<li>
<ol>
<li>
<dl>
<dt>分层
<dd>子列

<table border='1'>
<tr>
<td>
正式写法
<table border='1'>
<thead>
<tr>
<th>
<tbody>
<tr>
<td colspan='2'> #合并两个单元格,rowspan相同

<label for='i1'> #通过for对input进行关联
<input id='i1'

<fieldset> #包裹框
<legend>登录</legend>
<input>.....
</fieldset>

猜你喜欢

转载自www.cnblogs.com/czlong/p/9382179.html
今日推荐