首页 > Web开发 > 详细

html常用整理

时间:2019-10-17 12:05:09      阅读:66      评论:0      收藏:0      [点我收藏+]

视频链接:https://www.bilibili.com/video/av5862916?from=search&seid=12139895566389560177

我的第一个html

<!DOCTYPE html><!-- 告诉浏览器这是什么类型的文件(可以省略)-->
<html lang="en">
<head>
    <meta charset="iso8859-1"><!-- 设置显示到浏览器的格式-->
    <title>tittle name</title>
</head>
<body>
	HelloWorld!
	张
</body>
</html>

  

解决浏览器显示乱码问题:将iso8859-1改为utf-8

 技术分享图片

 运行:将上述代码保存为htm或者html格式用浏览器打开就可以看到效果了。

 

常用元素介绍:

<!DOCTYPE html><!-- 告诉浏览器这是什么类型的文件(可以省略)-->
<html lang="en">
<head>
    <meta charset="utf-8"><!-- 设置显示到浏览器的格式-->
    <title>tittle name</title>
</head>
<body>
	<b>加粗</b><br>
	<strong>加粗起强调作用</strong><br>
	<i>斜体</i><br>
	<em>斜体</em><br>
	<br><!--换行-->
	<u>下划线</u><br>
	<s>删除</s><br>
	<a href=https://search.bilibili.com/all?keyword=html target="_blank"> 超链接</a><br><!-- 原窗口跳转至链接-->
	<a href=https://search.bilibili.com/all?keyword=html target="_self"> 超链接</a><br><!-- 新建窗口跳转至链接-->
	张
</body>
</html>

  

技术分享图片

 列表标签(list):

列表分为有序和无序:ordered listunordered list

最基础的用法:

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>MyFirstPage</title>
</head>
<body>
		<ol>
            <li>a</li>
            <li>b</li>
            <li>c</li>
        </ol>
    <br>
        <ol reversed>
            <li>a</li>
            <li>b</li>
            <li>c</li>
        </ol>
        <ol type="a">
            <li>sdfs</li>
            <li>sdfs</li>
            <li>sdfs</li>
        </ol>

	<ul>
        <li>a</li>
        <li>b</li>
        <li>c</li>
    </ul>
</body>
</html>

 

技术分享图片

 

 

 表中有表:

<!DOCTYPE html><!-- 告诉浏览器这是什么类型的文件(可以省略)-->
<html lang="en">
<head>
    <meta charset="utf-8"><!-- 设置显示到浏览器的格式-->
    <title>tittle name</title>
</head>
<body>

<ol type="1" reversed><!-- 逆序有序列表 -->
<li>第一项</li>
<ol type="a">
<li>1.1</li>
<li>1.2</li>
<li>1.3</li>
</ol>
<li>第二项</li>
<ol type="a"><!-- 列表中还可以加表 -->
<li>2.1</li>
<li>2.2</li>
<li>2.3</li>
</ol>
<li>第三项</li>
<ol type="a">
<li>3.1</li>
<li>3.2</li>
<li>3.3</li>
</ol>

<ol>
<br>

<ul ><!-- 顺序无序列表 -->
<li>第一项</li>
<li>第二项</li>
<li>第三项</li>
<li>第四项</li>
<li>第五项</li>
<ul>

</body>
</html>

  

技术分享图片

 

 

 表格标签:

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


<table border="1px" align="center">
		<thead>
            <tr>
                <th>名字</th><!-- table head 表头-->
                <th>性别</th>
                <th>密码</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>张三</td>
                <td>男</td>
                <td>123</td>
            </tr>
            <tr>
                <td>李四</td>
                <td>女</td>
                <td>456</td>
            </tr>
            <tr>
                <td>王五</td>
                <td>男</td>
                <td>789</td>
            </tr>
        </tbody>
        <tfoot>
            <tr><!-- 表示当前行 -->
                <th>名字</th>
                <th>性别</th>
                <th>密码</th>
            </tr>
        </tfoot><!-- table foot 表脚-->
    </table>
</body>
</html>

  

技术分享图片

 

合并两个单元格可以看视频

 表单标签

<form action="" method ="post"><!--action里面写转的jsp或者相应servlet别名-->

<br/>
 账号:<input type="text" placeholder="输入账号" name="uname"><!--不占位-->
<br>
   密码:<input type="password" placeholder="输入密码" name="pwd">
<br>
单选:
选择题<br>
<input type="radio" name="choseA" checked>A
<input type="radio" name="choseA">B
<input type="radio" name="choseA">C

<br>
下拉选择:
<select>
    <option>苹果</option>
    <option>香脚</option>
    <option>西瓜</option>
</select>
<br>
</form>

  

技术分享图片

 

 

插入视频

<!DOCTYPE HTML>
<html>
<body>

<video width=50% height=50% controls autoplay muted>
    <source src=" http://vfx.mtime.cn/Video/2019/02/04/mp4/190204084208765161.mp4"  alt="Second slide" style="width: 100%"> 
 </video>

</body>
</html>

  

视频链接·: http://vfx.mtime.cn/Video/2019/02/04/mp4/190204084208765161.mp

 

 技术分享图片

 

 插入音频

<audio src="FlowerFire.mp3" controls></audio>

html常用整理

原文:https://www.cnblogs.com/cstdio1/p/11691078.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!