Web前端学习——HTML

2018-06-24 02:04:08来源:未知 阅读 ()

新老客户大回馈,云服务器低至5折

HTML其实还是蛮容易学习的,无非就是一些标签、格式的填写,大学的时候也做过网站设计,所以这里主要记录一些常用的HTML标签、属性以及书写方法等。
一、常见HTML格式
主要包含文件type,html标签、head标签、body标签三个主题标签,其中Head主要包含字符集、描述、关键字等信息,而Body标签里是HTML的主要内容

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

</body>
</html>

 二、head标签

1、自闭合标签
(1)<meta>标签
    <meta charset="UTF-8"> ##设置html内容字符集
    <meta http-equiv="refresh" content="3"> ##每隔3秒刷新一次  
    <meta http-equiv="refresh" content="3;Url=http://www.hao123.com">  ##隔3秒刷新并跳转值url指定网页
    <meta name="keywords" content="测试网页,网页头部"> ##指定网页关键字,利于SEO,网页搜索排序
    <meta name="description" content="描述信息">  ##指定网页描述信息
(2)link
    <link rel="shortcut icon"  href="image/fac.ico">  ##头部图标
(3)stype
(4)script
2、主动闭合标签
(1)title
    <title>网页头部标题内容</title>   ##网页头部显示内容  
三、body标签
1、a标签:
定义超链接,最重要的属性为href,超链接和锚使用

##普通超链接
<a href="http://www.hao123.com" target="_blank">  中国人</a>

##通过a标签做锚点
<a href="#id1" > 第一章 </a>
<a href="#id2"> 第二章 </a>
<a href="#id3"> 第三章 </a>

<div id="id1" style="height:100px"> 第一章内容 </div>
<p id="id2"style="height:300px"> 第二章内容 </p>
<div id="id3"style="height:500px"> 第三章内容 </div>

 2、p标签:
定义段落,不换行,段落段落之间有间距

<p>  段落标签,不换行</p>

 3、br标签:
换行标签

<p>段落标签,不<br>换行</p>

 4、h标签:
标题标签,从h1-h6表示字体从大到小,加粗显示

<h1>中国人</h1>
<h2>中国人</h2>
<h3>中国人</h3>
<h4>中国人</h4>
<h5>中国人</h5>
<h6>中国人</h6>

 5、span标签
白板,行内标签,段与段之间只有空格,不换行

<span>中国人</span>
<span>中国人</span>
<span>中国人</span>

 6、div标签
白板,块级标签

<div>中国人</div>
<div>中国人</div>
<div>中国人</div>

 7、input标签
标准输入框

<input type="text"  name="username" value="Tom" ><br>
<input type="password" name="pwd" value="123456" >
<input type="button" value="注册"  >
<input type="submit" value="提交"  >
<input type="reset" value="重置"  >
<input type="checkbox" name="双选" value="1" checked="checkted" >
<input type="radio" name="单选" value="1" checked="checkted" >
<input type="file" name="fname" enctype="multipart/form-data" >

 8、form标签
表单使用,get方式提交数据拼接显示在url,post方式提交数据不拼接显示在url上(更安全)

<form action="http://www.hao123.com" method="get">
    <input type="text"  name="username" value="Tom" ><br>
    <input type="password" name="pwd" value="123456" >
    <input type="button" value="注册"  >
    <input type="submit" value="提交"  >
    <input type="checkbox" name="双选"  value="1" >
    <input type="radio" name="单选"  value="1" >
</form>

 9、textarea标签
接受多行文本输入,其中可以输入多行数据

<textarea  name="username" >默认值</textarea>

 10、select标签

下拉框标签,通过option指定下拉框内容

<select name="city"  >
    <option value="1" selected="selected">北京</option>
    <option value="2">上海</option>
    <option value="3">南京</option>
</select>

<select name="city" size=10 mutiple="mutiple">
    <option value="1" selected="selected">北京</option>
    <option value="2">上海</option>
    <option value="3">南京</option>
</select>

<select name="city">
    <optgroup label="省分">
        <option value="1">北京</option>
        <option value="2">上海</option>
        <option value="3">南京</option>
     </optgroup>
</select>

 11、img标签
图片标签

<img src="C:\Users\Desktop\001.jpg" style="height: 200px;width: 200px" >
<img src="file:///C:/Users/Desktop/001.jpg">

<a href="http://www.hao123.com">
    <img src="001.jpg" style="height: 200px;width: 200px" title="名称" alt="描述">
</a>

 12、ul标签
无序列表,对应的li标签标记列表行

<ul>
    <li>第一行</li>
    <li>第二行</li>
    <li>第三行</li>
</ul>

 13、ol标签
有序列表,对应的li标签标记列表

<ol>
    <li>第一行</li>
    <li>第二行</li>
    <li>第三行</li>
</ol>

 14、dl标签
分层列表,用dt标签表示标题,用dd标签表示列表内容

<dl>
    <dt>第一层</dt>
    <dd>1.第一层列表</dd>
    <dd>2.第一层列表</dd>
    <dd>3.第一层列表</dd>
    <dt>第二层</dt>
    <dd>1.第二层列表</dd>
    <dd>2.第二层列表</dd>
    <dd>3.第二层列表</dd>
</dl>

 15、table标签
表格标签,通过tr表示行,td表示单表格

(1)第一种table写法

<table border="1.5">
    <tr>
        <td>第一个行第一个表格</td>
        <td>第一个行第二个表格</td>
        <td>第一个行第三个表格</td>
        <td>第一个行第四个表格</td>
    </tr>
     <tr>
        <td>第二个行第一个表格</td>
        <td>第二个行第二个表格</td>
        <td>第二个行第三个表格</td>
        <td>第二个行第四个表格</td>
    </tr>
</table>

 (2)第二种table写法

<table border="1.2">
    <thead>
        <tr>
            <th>表头1</th>
            <th>表头2</th>
            <th>表头3</th>
            <th>表头4</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>第一列数据</td>
            <td>第二列数据</td>
            <td>第三列数据</td>
            <td>第四列数据</td>
        </tr>
        <tr>
            <td>第一列数据</td>
            <td>第二列数据</td>
            <td>第三列数据</td>
            <td>第四列数据</td>
        </tr>
    </tbody>
</table>

<td colspan="2">第一个行第二个表格</td>   ##横向合并合并单元格
<td rowspan="2">第一个行第四个表格</td>  ##纵向合并单元格

16、lable标签
用于标记文本输入

<label for="username"> 用户名: </label>
<input id="username"type="text"  >

 

17、fieldset标签

用于文本框

 

<fieldset>
    <legend>
        登陆
    </legend>
    <label for="username"> 用户名: </label>
    <input id="username"type="text"  ><br>
    <label for="password">&nbsp;&nbsp;&nbsp;码: </label>
    <input id="password"type="password"  >
</fieldset>

 







 

标签:

版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有

上一篇:grid 布局的使用

下一篇:HTML标签,简单归纳