前端基础知识-html

时间 2019-11-18

标签前端基础知识 html 栏目 HTML 繁體版

原文原文链接

前端的三把利器：HTML、CSS、JScss

HTML:

一、head 中的信息不会在页面中呈现

1.一、head中的title是浏览器tab的标签名

二、标签

2.一、自闭和标签：单个出现

2.二、主动闭合标签：成对出现

2.三、标签中的属性：有标签自带属性和自定义属性

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>:复文本标签iphone

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

<select>：下拉框标签post

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>：超连接标签ui

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

<img>：图片标签编码

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

<ul>：点的列表spa

<ol>：数字的列表code

 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