前端基础知识-html

前端的三把利器:HTML、CSS、JS

HTML:
1、head 中的信息不会在页面中呈现
1.1、head中的title是浏览器tab的标签名
 
2、标签
2.1、自闭和标签:单个出现
2.2、主动闭合标签:成对出现
2.3、标签中的属性:有标签自带属性 和 自定义属性
 
head部分:
 1 <head>
 2 <!--字符集编码-->
 3 <meta charset="UTF-8">
 4 <!--每隔多少秒刷新请求-->
 5 <meta http-equiv="refresh" content="2">
 6 <!--打开页面2秒钟之后,跳转到百度-->
 7 <meta http-equiv="refresh" content="2;http://www.baidu.com">
 8 <title>Title</title>
 9 <!--title的图标-->
10 <link rel="shortcut icon" href="tubiao.ico">
11 <!--引入css-->
12 <link rel="stylesheet" href="tmp.css">
13 <!--css样式-->
14 <style></style>
15 <!--引入js和编写js-->
16 <script src="tmp.js"></script>
17 </head>

 

body部分:
<p>:段落标签
<br>:换行标签
<h1~9>:标题标签,数字1的字体最大
<div>:块级标签,不论自己有多大,都占满一整行
<span>:行内标签 或叫 内联标签,行内标签自己有多大,就占多大
白板标签:没有附着任何css样式
伪白板标签:附着其他的css样式
<input>:文本框,默认是text 文本框
 1 <!--文本框-->
 2 <input type="text" placeholder="提示文案">
 3 <input type="text" name="username" value="默认值">
 4 <!--密文文本框-->
 5 <input type="password" name="passwd" placeholder="请输入密码">
 6 <!--radio 单选,当name的值相同时,每个元素直接互斥-->
 7 <span></span><input type="radio" name="sex">
 8 <span></span><input type="radio" name="sex">
 9 <!--checkbox 多选框,checked="checked"默认勾选-->
10 <span>华为</span><input type="checkbox" checked="checked">
11 <span>iphone</span><input type="checkbox">
12 <!--上传文件-->
13 <input type="file">
14 <!--按钮-->
15 <input type="button" value="登录">
16 <!--submit按钮如果和form表单连用,则会直接触发请求-->
17 <input type="submit" value="注册">
18 <!--reset 和 form 表单连用时,会触发表单重置-->
19 <input type="reset">

<form>:表单

<label>:扩展input的可点击范围,for属性的值为input所对应的id

1 <!--扩展input的可点击范围,for属性的值为input所对应的id-->
2 <label for="i1">用户名:</label><input id="i1" type="text" placeholder="请输入用户名">

<textarea>:复文本标签

<textarea>复文本标签</textarea>

<select>:下拉框标签

1 <!--下拉框标签-->
2 <select name="s1">
3     <option selected="selected" value="0">请选择</option>
4     <option value="1">中秋</option>
5     <option value="2">国庆</option>
6     <option value="3">都不上</option>
7 </select>

<select><optgroup>:分组下拉框

 1 <select name="s2">
 2     <optgroup label="黑龙江">
 3         <option>哈尔滨</option>
 4         <option>松花江</option>
 5     </optgroup>
 6     <optgroup label="河北">
 7         <option>石家庄</option>
 8         <option>秦皇岛</option>
 9     </optgroup>
10 </select>

<a>:超链接标签

1 <a href="http://www.baidu.com">跳转到百度</a>

<img>:图片标签

1 <img src="图片地址" alt="图片加载失败提示" title="鼠标悬浮提示">

<ul>:点的列表

<ol>:数字的列表

 1 <!--列表 点的列表-->
 2 <ul>
 3     <li>列表1</li>
 4     <li>列表2</li>
 5 </ul>
 6 <!--列表 数字的列表-->
 7 <ol>
 8     <li>列表3</li>
 9     <li>列表4</li>
10 </ol>

 

表格操作:

 1 <table border="1">
 2     <thead>
 3         <tr>
 4             <td>序号</td>
 5             <td>方法</td>
 6             <td>内容</td>
 7             <!--colspan 合并列-->
 8             <td colspan="2">操作</td>
 9         </tr>
10     </thead>
11     <tbody>
12         <tr>
13             <td>1</td>
14             <!--rowspan 合并行-->
15             <td rowspan="3">post</td>
16             <td>{}</td>
17             <td>修改</td>
18             <td>执行</td>
19         </tr>
20         <tr>
21             <td>2</td>
22             <td>{}</td>
23             <td>修改</td>
24             <td>执行</td>
25         </tr>
26         <tr>
27             <td>3</td>
28             <td>{}</td>
29             <td>修改</td>
30             <td>执行</td>
31         </tr>
32     </tbody>
33 </table>

 

特殊符号:

空格:&nbsp

<:&lt

>:&gt

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

posted @ 2019-06-17 15:42  年轻小阿姨  阅读(152)  评论(0编辑  收藏  举报