HTML基础学习

最新推荐文章于 2024-07-25 11:52:08 发布

Zinsser_

最新推荐文章于 2024-07-25 11:52:08 发布

阅读量99

点赞数

分类专栏：前端学习文章标签： html

本文链接：https://blog.csdn.net/weixin_40279063/article/details/108787289

版权

前端学习专栏收录该内容

1 篇文章 0 订阅

订阅专栏

HTML列表

HTML区块

HTML列表

~~虽然刚开始使用MD很不熟练但是还是咬咬牙坚持下去以后就熟练了~~

~~好的富文本编辑器支持html代码看来md暂时是没法用了等学到js之后再用md来写作吧~~
1. 无序列表

无序列表是一个项目的列表,此列项目使用粗体原点进行标记

<ul>
    <li>Coffee</li>
    <li>Milk</li>
</ul>

无序列表使用<ul>标签

2. 有序列表

有序列表也是一列项目,列表项目使用数字进行标记.有序列表始于<ol>标签,每个列表项始于<li>标签,列表项使用数字来标记

<ol>
    <li>Coffee</li>
    <li>Milk</li>
</ol>

~~看起来富文本编辑器也有奇奇怪怪的问题使用嵌入式列表的时候不能达到我想要的效果虽然还是有点难用但是尽力去习惯~~

3. 自定义列表

自定义链表不仅仅是一列项目,而是项目及其注释的组合

自定义列表以<dl>开始,每个自定义列表项以<dt>开始,每个自定义列表项的定义以<dd>开始

<dl>
    <dt>Coffee</dt>
        <dd>- black hot drink</dd>
    <dt>Milk</dt>
        <dd>- white cold drink</dd>
</dl>

HTML区块

大多数html元素被定义为块级元素或内联元素

1.html区块元素:

块级元素在浏览器显示时,通常会以新行来开始和结束如:<h1>,<p>,<ul>,<table>

2.html内联元素

内联元素在显示时通常不会以新行开始,如<b>,<td>,<a>,<img>

3.html<div>元素

<div>是块级元素,可以用来组合其他HTML元素的容器

如果和CSS一起使用,<div>可以用于对大的内容块设置样式属性

<div>还用一个用途就是文档布局

4.html<span>元素

HTML<span>元素是内联元素,可以用作文本的容器

与CSS一同使用的时候可以用于为部分样本设置样式属性

HTML表单

多数情况下被用到的标签是输入标签<input>

输入类型由类型属性所定义,大多数经常被用到的输入类型如下

文本域

文本域通过<input type="text">标签来设定

<form>
First name: <input type="text" name="firstname"><br>
Last name: <input type="text" name="lastname">
</form>

密码字段

密码字段通过标签<input type="password">来定义

<form>
Password: <input type="password" name="pwd">
</form>

单选按钮复选框

这个与上面有所不同的在于多了一个value属性

---单选按钮(Radio Buttons)
<form>
<input type="radio" name="sex" value="male">Male<br>
<input type="radio" name="sex" value="female">Female
</form>
---复选框(Checkboxes)
<form>
<input type="checkbox" name="vehicle" value="Bike">I have a bike<br>
<input type="checkbox" name="vehicle" value="Car">I have a car 
</form>
---

提交按钮

<input type="submit">定义了提交按钮

当用户单击确认按钮时,表单的内容会传送到另一个文件.表单的动作属性定义了目的文件的文件名,由动作属性定义的这个文件通常会对接收到的输入数据进行相关的处理.

<form name="input" action="html_form_action.php" method="get">
Username: <input type="text" name="user">
<input type="submit" value="Submit">
</form>

表单大融合示例

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>表单学习</title>
	</head>
	<body>
		<form action="demo-form.php">
			<fieldset >
				<!-- legend标签里面的是表单标题 -->
				<legend>Zinsserinformation</legend>
				<!-- 输入文本框 -->
				<a>Name  :</a><input type="text" size="30"><br>
				<a>E-mail:</a><input type="text" size="30"><br>
				<a>Date  :</a><input type="text" size="30"><br>
				<!-- 复选框 -->
				<input type="checkbox" name="vehicle[]" value="Bike">I have a bike<br>
				<input type="checkbox" name="vehicle[]" value="Car" checked="checked">I have a car<br>
				<!-- 单选 -->
				<input type="radio" name="sex" value="Male">Male<br>
				<input type="radio" name="sex" value="FeMale" checked="checked">FeMale<br>
				<br><input type="submit" value="提交">
			</fieldset>
		</form>
	</body>
</html>

Zinsser_

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
HTML基础学习

目录HTML列表HTML区块HTML列表虽然刚开始使用MD很不熟练但是还是咬咬牙坚持下去以后就熟练了好的富文本编辑器支持html代码看来md暂时是没法用了等学到js之后再用md来写作吧1. 无序列表无序列表是一个项目的列表,此列项目使用粗体原点进行标记 <ul> <li>Coffee</li> <li>Milk</li></ul> 无序列表使用...
复制链接

扫一扫