HTML具体实操

最新推荐文章于 2022-07-19 23:09:12 发布

后端成长小白

最新推荐文章于 2022-07-19 23:09:12 发布

阅读量252

点赞数 1

分类专栏： HTML 文章标签： html

本文链接：https://blog.csdn.net/zs025563/article/details/125053493

版权

HTML 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

基本段落文本：

注意：

1.标签为段落，段落与段落之间是有间距的；

2. 标签为换行。

源码：
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>体育新闻</title>
	</head>
	<body>
		<h1>水花61分伊戈达拉制胜抢断</h1>
		<h4>数据统计</h4>
		<p>段落1</p>
		<h4>兄弟对决升级</h4>
		<p>段落2</p>
		<p>作者<br>
		时间</p>
	</body>
</html>

含链接文本：

注意：

1.锚链接

<a href="#"></a>标签赋名，后续对应位置用id属性对应即可；

2.图片链接

<img src=""/>；

3.超链接

<a href="" target=""></a>善于用target属性。

源码：
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<h1>圣诞节的那些事</h1>
		<p>1.圣诞由来<br>
		<a href="#oldman">2.圣诞老人由来</a><br>
		<a href="#tree">3.圣诞树由来</a></p>
		<h2>圣诞由来</h2>
		<p>段落1解释</p>
		<img src="82846561d84ec487666f6db6779b48d6_157_121207115444.jpg" />
		<h2 id="oldman">圣诞老人由来</h2>
		<p>段落2解释：<a href="圣诞老人.html" target="_blank">圣诞老人</a></p>
		<img src="2b16b14d744e9414a690ec08b54cc191_t01e507233a404dac1e.jpg"/>
		<h2 id="tree">圣诞树由来</h2>
		<p>段落3解释</p>
		<img src="f510750060295f4c9f73e5be0ff989cc_083673cbedfb0325bc642c14b47b3fee.jpg"/>
		<p>更多内容可以<a href="http://www.baidu.com" target="_blank">百度一下</p>
	</body>
</html>

基本表格：

注意：

1.表格基本样式设置在table标签里，包括边框、宽高、单元格间距等;

2.表格框架基本标签tr/th/td;

3.表格内容td标签里可以嵌套图片、超链接等。

源码：
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>小说排行榜</title>
	</head>
	<body>
		<table border="2" align="center" width="1000" height="500" cellpadding="0" cellspacing="0">
			<tr>
				<th>排名</th>
			    <th>关键词</th>
				<th>趋势</th>
				<th>今日搜索</th>
				<th>最近7日</th>
				<th>相关链接</th>
			</tr>
			<tr>
				<td>1</td>
				<td>鬼吹灯</td>
				<td><img src="66e169a25d7bbf17230093171b14c956_300.jpg"/></td>
				<td>345</td>
				<td>123</td>
				<td><a href="">贴吧</a> <a href="">图片</a> <a href="">百科</a></td>
			</tr>
			<tr>
				<td>2</td>
				<td>盗墓笔记</td>
				<td><img src="66e169a25d7bbf17230093171b14c956_300.jpg"/></td>
				<td>124</td>
				<td>6667</td>
				<td><a href="">贴吧</a> <a href="">图片</a> <a href="">百科</a></td>
			</tr>
			<tr>
				<td>3</td>
				<td>西游记</td>
				<td><img src="66e169a25d7bbf17230093171b14c956_300.jpg"/></td>
				<td>567</td>
				<td>999</td>
				<td><a href="">贴吧</a> <a href="">图片</a> <a href="">百科</a></td>
			</tr>
		</table>
	</body>
</html>

表单（注册界面）：

注意：

1.主体框架应遵循表格形式，去掉边框即可；

2.区分各种输入形式：

单选按钮radio

复选框checkbox

下拉列表select为标签而不是属性

3.列表可以嵌套在表格内

无序用ul/li标签；有序用ol/li标签。

源码：
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<h4>青春不常在，抓紧谈恋爱</h4>
		<table >
			<tr>
				<th>性别：</th>
				<td>
					<input type="radio" name="sex" />男
					<input type="radio" name="sex" />女
				</td>
			</tr>
			<tr>
				<th>生日：</th>
				<td>
					<select>
						<option>--请选择年份--</option>
						<option>2001</option>
						<option>2002</option>
						<option>2003</option>
					</select>
					<select>
						<option>--请选择月份--</option>
						<option>1</option>
						<option>2</option>
						<option>3</option>
					</select>
					<select>
						<option>--请选择日--</option>
						<option>1</option>
						<option>2</option>
						<option>3</option>
					</select>
				</td>
			</tr>
			<tr>
				<th>所在地区：</th>
				<td>
					<input type="text" value="北京"/>
				</td>
			</tr>
			<tr>
				<th>婚姻状况：</th>
				<td>
					<input type="radio" name="jiehun" checked />未婚
					<input type="radio" name="jiehun" />已婚
					<input type="radio" name="jiehun" />离婚
				</td>
			</tr>
			<tr>
				<th>学历：</th>
				<td >
					<input type="text" value="硕士"/>
					</td>
			</tr>
			<tr>
				<th>喜欢的类型：</th>
				<td>
					<input type="checkbox" name="love" />妩媚的
					<input type="checkbox" name="love" />可爱的
					<input type="checkbox" name="love" />性感的
					<input type="checkbox" name="love" />高冷的
					<input type="checkbox" name="love" checked/>都喜欢
				</td>
			</tr>
			<tr>
				<th>自我介绍</th>
				<td>
					<textarea>个人简介</textarea>
				</td>
			</tr>
			<tr>
				<th></th>
				<td>
					<input type="submit" value="免费注册" />
				</td>
			</tr>
			<tr>
				<th></th>
				<td>
					<input type="checkbox" checked="checked"/>我同意注册要求
					</td>
			</tr>
			<tr>
				<th></th>
				<td><a href="">已注册，立即登录</a></td>
			</tr>
			<tr>
				<th></th>
				<td>
					<h5>我承诺</h5>
					<ul>
						<li>年满18岁</li>
						<li>单身</li>
						<li>真诚</li>
					</ul>
				</td>
			</tr>
		</table>
	</body>
</html>

后端成长小白

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
HTML具体实操

基本段落文本：注意：1.标签为段落，段落与段落之间是有间距的；2. 标签为换行。源码：<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>体育新闻</title> </head> <body> <h1>水花61分伊戈达拉制胜抢断</
复制链接

扫一扫