ICode9

精准搜索请尝试: 精确搜索
首页 > 其他分享> 文章详细

前端基础示例

2021-07-13 17:57:32  阅读:102  来源: 互联网

标签:时代 三百 前端 示例 基础 风帆 列表 nbsp 单元格


插入图片 

 地址=src        alt=图片异常显示        title=悬浮提示        width=宽度        height=高度

<img src="img/hetao.jpg" alt="核桃" title="核桃" width="150px" height="150px"/>

超链接 

 

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<p>欢迎来到诛仙</p>
	</body>
</html>

 

	<body>
		<a href="detail.html" target="_blank">
			<img src="img/hetao.jpg" alt="核桃" title="核桃" width="150px" height="150px"/>
		</a>
		<a href="detail.html" target="_blank">残酷的世界
		</a><br />
		<a href="detail.html" target="_self">火狐</a>
	</body>

跳转

<body>
		<h1>时代风帆股份高达三百</h1>
		<h3>二十个如果更高的分数</h3>
		<h1>时代风帆股份高达三百</h1>
		<h1>时代风帆股份高达三百</h1>
		<h1>时代风帆股份高达三百</h1>
		<h1>时代风帆股份高达三百</h1>
		<h2 name="marker">帮助</h2>
		<h1>时代风帆股份高达三百</h1>
		<h1>时代风帆股份高达三百</h1>
	</body>

 

<body>
		<a href="5.html#marker">跳转</a>
		<a herf="mailto:12345677892qq.com">联系我们</a>
	</body>

 无序显示/有序显示

<body>
		<ul type="square">
			<li>范冰冰出轨了</li>
			<li>日本投降了</li>
			<li>彩票中奖了</li>
			<li>无序</li>
		</ul>
		<dl>
			<dt>热爱时代的v</dt>
			<dd>文案购房非撒旦给v</dd>
		</dl>
		<ol>
			<li>有序</li>
			<li>列表2</li>
			<li>列表3</li>
			<li>列表4</li>
			<li>列表5</li>
		</ol>
	</body>

方框内选择,标记文本

    <body>
        <input list="cities">
        <datalist id="cities">
            <option value ="北京">北京</option>
            <option value ="上海">上海</option>
        </datalist>
        <p>我在<time datetime="2021/7/13">情人节</time>有个约会</p>
        <p>
            一段文字<mark>标记一下</mark>
        </p>
    </body>

音乐

    <body>
        <p>《无人之岛》</p>
        <audio controls="controls" autoplay="autoplay">
            <source src="audio/DJ彼岸%20-%20《无人之岛》蓝色的背后是纯净,天空一望无际.mp3"></source>
            <source src=""></source>
            当前浏览器不支持audio
        </audio>
        <p>蓝色的背后是纯净,天空一望无际</p>
    </body>

视频

<body>
        <video width="400px" height="250px" controls="controls" autoplay="autoplay">
            <source src="shads/微信小程序视频播放/wixin.mp4"></source>

            当前浏览器不支持 video直接播放,点击这里下载视频: <a href="myvideo.webm">下载视频</a>
        </video>
    </body>

斜体加粗换行版权符号特殊空格

<body>
		<h1>北&nbsp;&nbsp;京&nbsp;&nbsp;欢迎你-段落</h1>
		<p><em>北京-斜体</em><strong>欢迎你-加粗</strong></p>
		<p>,有梦想-换行<br />谁都了不起</p>
		<p>有勇气谁就会有奇迹</p>
		<p>
			&copy;课工场 &lt; &gt;
		</p>
</body>

邮箱 网址 颜色 

<body>
        <p>邮箱:<input type="email" name="email" /></p>
        <p>请输入你的网址:<input type="url" name="userUrl"/></p>
        <p><input type="color"</p>
        <p><input type="search"</p>
        <p>
            <input type="number" name="num" min="3" max="20" step="3" value="3"/>
        </p>
        <p>
            <input type="range" name="point" min="2" max="15" step="1" value="3"/>
        </p>
        <p><input type="date"</p>
        <p><input type="time"</p>
</body>

表格

<body>
		<table width="100%" border="1px" cellspacing="" cellpadding="">
			<tr><th>Header</th><th>Header</th><th>Header</th></tr>
			<tr><td>Data</td><td>Data</td><td>Data</td></tr>
		</table>
        <table width="100%" border="1px" cellspacing="" cellpadding="">
            <tr><th colspan="3">标题1</th></tr>
        	<tr>
                <td rowspan="2">单元格1</td>
                <td>单元格2</td>
                <td>单元格3</td>
            </tr>
        	<tr><td>Data</td><td>Data</td></tr>
</body>

from表格

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>post隐藏/get显示</title>
    </head>
    <body>
        <form action="#" method="get" name="myfrom">
            <p>readonly只读disabled禁用</p>
            <p>用户名
                <input type="text" name="userName" size="20" maxlength="5" value="请输入用户名" />
            </p>
            
            <p>密&nbsp;&nbsp;&nbsp;码:
                <input type="password" name="userPassWord" size="20" maxlength="10" value="请输入密码" />
                
            <p>性别:
                <input type="radio" name="sex"value="1"/>男
                <input type="radio" name="sex"value="2"/>女
            </p>
            
            <p>照片:
                <input type="file" name="pic"/>
            </p>
            
            <p>不显示的
                <input type="hidden" value="xxxxxxxxxxxx"/>
            </p>
            
            <p>图片
                <input type="image" src="img/hetao.jpg" />
            </p>
            
            <p>爱好:
                <input type="checkbox" name="hobby" value="1"/>java
                <input type="checkbox" name="hobby" value="2"/>c++
                <input type="checkbox" name="hobby" value="3"/>web
                <input type="checkbox" name="hobby" value="4"/>python
            </p>
                
            <p>城市:
                <select name="city">
                    <option value ="-1">请选择城市</option>
                    <option value ="1">南京</option>
                    <option value ="2">上海</option>
                </select>
            </p>
            <p>自我介绍:</p>
            <p>
                <textarea rows="10" cols="40"></textarea>
            </p>
            <p>
                重置<input type="reset" value="重置"/>
                普通按钮<input type="button" value=" 普通按钮"/>
                提交按钮<input type="submit" value="提交按钮"/>
            </p>
        </form>
    </body>
</html>

 

标签:时代,三百,前端,示例,基础,风帆,列表,nbsp,单元格
来源: https://blog.csdn.net/qq_52426874/article/details/118706002

本站声明: 1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享;
2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关;
3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关;
4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除;
5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

专注分享技术,共同学习,共同进步。侵权联系[81616952@qq.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有