一.html常用标签 2021-01-21

.html常用标签

    1.什么是 html

           (注意HTML语言不会报错)

 

    2.常用标签

 

 

 

例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body style="height:2000px;">


	<a href=""id="box">我是顶部的a标签</a>

<!--h1	在一个页面上出现一次h2-h6自己分配-->
	<h1>helloword</h1>
	<h2>helloword</h2>
	<h3>helloword</h3>
	<h4>helloword</h4>
	<h5>helloword</h5>
	<h6>helloword</h6>

	<h2>段落标签</h2>
	<p>
	&emsp;&emsp;Python是一种计算机程序设计语言。是一种动态的、面向对象的脚本语言,最初被设计用于编写自动化脚本(shell),随着版本的不断更新和语言新功能的添加,越来越多被用于独立的、大型项目的开发。
	</p>
	<p>
	Python是一种计算机程序设计语言。是一种动态的、面向对象的脚本语言,最初被设计用于编写自动化脚本(shell),随着版本的不断更新和语言新功能的添加,越来越多被用于独立的、大型项目的开发。
	</p>

	<h2>粗体标签</h2>
<!--b	标签只是物理加粗strong不仅加粗还利于seo搜索-->


<!--br	换行标签hr水平线标签-->
	<strong>我是strong标签</strong><br>
	<b>我是b标签</b><hr>
	我是正常的
	
	<h2>斜体标签</h2>
<!--i	标签只是斜体em不仅斜体还利于seo搜索-->
	<em>我是em标签</em>
	<i>我是i标签</i>
	我是外面的
	<em><b>lalal</b></em>
	<b><em>hhhh</em></b>
	
	<h2>a标签</h2>
	<ahref="http://www.baidu.com"target="_blank">去百度</a>
<!--href	是a标签的标签属性-->
	<!--
	target属性
	_self当前页面打开默认
	_blank在新窗口打开
	-->

	<ahref="#box">去到顶部</a>
<!--
只有拥有name属性的a标签才有锚点
其他标签可以通过id属性实现锚点
-->
	
	<a href="javascript:void(0);">死链接</a>
	<ahref="#">#回到顶部</a>


	<h2>特殊符号</h2>
	<p>
	大于号:---&gt;<br>
	小于号:---&lt;<br>
	空格符号:---12&nbsp;34<br>
	空白位:---12&emsp;34<br>
	版权符号:---&copy;<br>
	</p>
<!--
HTML书写规范
1.名字用小写字母
2.以英文开头,可以包含英文字母,数字,_,-,不能使用中文
3.驼峰命名
className第二个单词首字母大写
4.id命名
id只能有一个名字,而且在页面中相同的名字只能出现一次,相当于身份证号码一样
5.class命名
class可以出现多次,而且相同的名字可以有多个,相当于人名一样
-->
</body>
</html>

程序实现

      3.Html 基本模板

 

                 单标签: 有头无尾  <h1>

                 双标签:  有头有尾   <h1>      </h1>

例:

<!DOCTYPEhtml>#告诉浏览器我是html文件
<htmllang="en">
<head>
    <metacharset="UTF-8">#文件编码
    <title>初识HTML</title>#文件标题
</head>
<body>#可视文件

    <h1>你好啊,小可爱!</h1>>


    <!--Ctrl+/快捷注释-->


    <!--Ctrl+/快捷注释-->
    <!---->
    <!--什么是HTML?-->
    <!--HTML是用来描述网页的一种语言。-->
    <!--HTML指的是超文本标记语言(HyperTextMarkupLanguage)-->
    <!--HTML不是一种编程语言,而是一种标记语言(markuplanguage)-->
    <!--标记语言是一套标记标签(markuptag)-->
    <!--HTML使用标记标签来描述网页-->

    <!--HTML标签(元素)-->
    <!--HTML标记标签通常被称为HTML标签(HTMLtag)。-->
    <!--HTML标签是由尖括号包围的关键词,比如<html>-->
    <!--HTML标签通常是成对出现的,比如<b>和</b>-->
    <!--标签对中的第一个标签是开始标签,第二个标签是结束标签-->
    <!--开始和结束标签也被称为开放标签和闭合标签-->

    <!--HTML文档=网页-->
    <!--HTML文档描述网页-->
    <!--HTML文档包含HTML标签和纯文本-->
    <!--HTML文档也被称为网页-->
    <!--Web浏览器的作用是读取HTML文档,并以网页的形式显示出它们。-->
    <!--浏览器不会显示HTML标签,而是使用标签来解释页面的内容.-->
    <!---->


</body>
</html>


程序实现

4.图片 /列表标签

4.1 图片

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <img src="https://res.shiguangkey.com/file/201808/08/20180808171627888011622.jpg?x-oss-process=image/format,webp" alt="我是一只小小鸟" width="300" height="200" title="数据分析">

    <img src="img/01.jpg" alt="">

<!--
       src 定义图片路径  相对、绝对
       alt 图片描述,用于seo搜索   当图片路径错误的时候 会显示在页面上
       width 定义图片宽度
       height 定义图片高度
       title 鼠标划入 有提示
       当width/height只给一个值的时候,另一个值等比例缩放,然后不给默认图片大小
-->
</body>
</html>

4.2 列表 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <h2>无序列表</h2>
    <ul type="circle">
        <li>1</li>
        <li>2</li>
        <li>3</li>
    </ul>
<!-- type
   disc  默认  小黑圆点
   circle  空心圆
   square  小方框
-->

    <h2>有序列表</h2>
    <!--ol>li{$}*3  tab-->
    <ol type="a">
        <li>1</li>
        <li>2</li>
        <li>3</li>
    </ol>
<!--
           1  1 2 3 4  默认
           a  a b c d
           A  A B C D
           I
           i
-->

    <h2>自定义列表</h2>
    <dl>
        <dt>前端</dt>
        <dd>html</dd>
        <dd>css</dd>
        <dd>js</dd>
    </dl>
</body>
</html>

程序实现

5. 行内和块级不同点

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div{
            background: red;
            width: 200px;
            height: 50px;
            /*display: inline; */
        }
        span{
            background: rebeccapurple;
            width: 200px;
            height: 50px;
            /*display: block;*/
            display: none;
        }
        li{
            width: 100px;
            height: 50px;
            background: skyblue;
            display: inline-block;
        }
    </style>
</head>
<body>
    <div>div1</div>
    <div>div2</div>
    <span>span11111</span>
    <span>span2</span>
    <p></p>

    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
    </ul>
<!--
块级元素div  display:block;
可以包含任何块和行内元素
独占一行,支持设置宽高
如果没有设置宽高,高度由内容撑开,宽度默认浏览器宽度
没有内容,在网页上肉眼看不到东西,但是审查元素,宽度是浏览器宽度,高度0

行内(内联)元素span   display:inline;
可以和其他行内元素位于同一行
行内元素不要包块级元素
不支持设置宽高
内容撑开宽高

行内块元素  display:inline-block;
块级元素可以横排展示
行内元素可以设置宽高
元素既能设置宽高 也能排在一排

display:none
隐藏元素,包括他的子标签,在页面中不占位置,等同于消失了
-->
</body>
</html>

程序实现

6.表格

 

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        table{
            /*border-collapse: separate; */
            border-collapse: collapse;
             /*
            collapse 边框合并,如果相邻的话,共用一个框
            separate 默认值,边框分开,不合并
            */


            /*文字水平居中*/
            text-align: center;
        }

    </style>
</head>
<body>
    <table border="1">
        <caption><b>学生信息表</b></caption>
        <thead>
            <tr>
                <!--th  文件加粗 水平居中-->
                <th>姓名</th>
                <th>班级</th>
                <th>年龄</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>吴成</td>
                <td colspan="2">18</td>
                <!--<td>18</td>-->
            </tr>
            <tr>
                <td>倪启斌</td>
                <td rowspan="2">29</td>
                <td>20</td>
            </tr>
            <tr>
                <td>摇滚男孩爱摇滚</td>
                <!--<td>29</td>-->
                <td>20</td>
            </tr>
        </tbody>
    </table>
</body>
</html>

程序实现

7.表单

 

 

 

 

 

 

<!DOCTYPEhtml>
<htmllang="en">
<head>
	<metacharset="UTF-8">
	<title>Title</title>
	<style>
		textarea{
			width:300px;
			height:30px;
			/*禁止拉伸*/
			/*resize:none;*/
			/*垂直方向可以拉伸*/
			/*resize:vertical;*/
			/*水平方向可以拉伸*/
			resize:horizontal;
		}
	</style>
</head>
<body>
	<form action="" method="post" autocomplete="off">
	<!--action规定当前提交表单向何处发送表单数据-->
	<!--method默认getpost-->
	<!--autocomplete自动完成,on输入框会提示off输入框不会提示-->
	<!--namevalue-->
	<!--?name=value&name=value....-->
	<!--?user=root&psd=safdasfasdgf&gender=on&hobby=on&hobby=on&hobby=on-->
		账号:<input type="text" name="user" placeholder="请输入你的账号"><br>
		密码:<inputtype="password"name="psd"required><br>
		<!--required必填字段-->
		文件上传:<inputtype="file"><br>
		
			
		<!--name-->
		单选框:<input	type="radio"name="gender">男
		<input type="radio" name="gender">女
		<input type="radio" name="gender" disabled>保密<br><br>
		
		<!--checked默认选中-->
		<!--disabled禁止选中-->
	
		多选框:<input type="checkbox" name="hobby">睡觉
		<input type="checkbox" name="hobby">吃
		<input type="checkbox" name="hobby">玩手机
		<input type="checkbox" name="hobby">看书
		<input type="checkbox" name="hobby" id="box" checked>
		<label for="box">运动</label><br><br>
		
		下拉框:
		<select name="xz">
		<!--size规定下拉列表中可见选项的数目-->
		<!--selected规定在option里面默认展示第几项-->
		<option value="1">长沙</option>
		<option value="2">北京</option>
		<option value="3"selected>上海</option>
		<option value="4">苏州</option>
		<option value="5">随州</option>
		</select><br><br>
		
		文本域:
		<textarea> </textarea><br><br>
		提交:<input  type="submit" value="提交数据"><br><br>
		重置:<input  type="reset" value="重置"><br><br>
		按钮:<inputtype="button" value="button按钮"><br><br>
		
	</form>
</body>
</html>

8.表格例子1 --- 书籍介绍

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        span{
            color: #ddd;
        }
        li{
            /*去掉li标签前面的小东西 比如默认小黑原点*/
            list-style: none;
        }
        div{
            display: inline-block;
        }
        ul{
            display: inline-block;
            /*垂直对其  top middle baseline bottom  给数值*/
            /*vertical-align: top;*/
        }
        img{
            width: 126px;
        }
    </style>
</head>
<body>
    <h1>毒液:致命守护者 Venom <span>(2018)</span></h1>
    <div>
        <img src="https://img3.doubanio.com/view/photo/s_ratio_poster/public/p2537158013.webp" alt="">
    </div>
    <ul>
        <li><span>导演:</span><a href="">鲁本·弗雷斯彻</a></li><br>
        <li><span>导演:</span><a href="">鲁本·弗雷斯彻</a></li><br>
        <li><span>导演:</span><a href="">鲁本·弗雷斯彻</a></li><br>
        <li><span>导演:</span><a href="">鲁本·弗雷斯彻</a></li><br>
    </ul>


<!--
div  h1-h6  ul li  ol  li
span  strong  b  em  i
-->
    <!--div*5 tab-->
    <!--ul>li*3-->
</body>
</html>

程序实现

9.表格例子2 --- 自我介绍

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>--自我介绍--</title>
    <style>
        table{
            border-collapse:collapse;
            display: inline-block;

            height: 250px;
        }

    </style>

</head>
<body>

    <table border="1">
           <thead>
           <tr><h1>--自我介绍--</h1></tr>>
           </thead>
           <tboby>
                   <tr><img src="http://p1.ifengimg.com/a/2016_23/8dbc27e13f7a530_size73_w451_h600.jpg" alt="吴彦祖自我简介"
                            width="200" height="250" title="吴彦祖照片"></tr>

                   <tr> <th>姓名:</th><td>吴彦祖</td></tr>
                   <tr><th>性别:</th><td>男</td></tr>
                   <tr><th>出生日期:</th><td>19--.0-.16</td></tr>
                   <tr> <th>国籍:</th>  <td> 中国</td></tr>
                   <tr><th>籍贯:</th><td>***市...</td></tr>
                   <tr><th>婚姻状况:</th><td>未知</td></tr>
                   <tr><th>兴趣爱好:</th><td>健身,网球,音乐</td></tr>


           </tboby>
    </table>>

</body>
</html>

程序实现

 

已标记关键词 清除标记
©️2020 CSDN 皮肤主题: 1024 设计师:白松林 返回首页