HTML基础（二）

最新推荐文章于 2022-08-18 20:09:20 发布
最新推荐文章于 2022-08-18 20:09:20 发布
阅读量315 收藏 2
点赞数 1
分类专栏： Java Web 文章标签： html elementui postman
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/smell201611010513/article/details/88918729
版权 
	DOCTYPE:是一个文档声明--- 当前HTML版本以及约束
	.dsd   dsd约束 约束标签的顺序
	.xsd  在框架中常用的约束：schema约束

一、HTML标签

1..HTML列表标签

HTML支持有序、无序和自定义列表标签。

无序列表
<ul>
    <li>文本1</li>
    <li>文本2</li>
    <li>文本3</li>
</ul>



有序列表
<ol>
    <li>文本1</li>
    <li>文本2</li>
    <li>文本3</li>
</ol>


自定义列表
<dl>
    <dt>自定义列表项1</dt>
    <dd>自定义列表项1的定义1</dd>
    <dd>自定义列表项1的定义2</dd>

    <dt>自定义列表项2</dt>
    <dd>自定义列表项2的定义1</dd>
    <dd>自定义列表项2的定义2</dd>

</dl>

说明：
1）无序列表是一个项目的列表，此列项目使用粗体圆点（典型的小黑圆圈）进行标记。无序列表始于<ul>，每个列表项始于<li>。
2）有序列表也是一列项目，不同的是，列表项目使用数字进行标记。有序列表始于<ol>标签，列表项也始于<li>。
3）自定义列表以<dl>标签开始，每个自定义列表项以<dt>开始，浏览器效果为从每行的顶格显示。每个自定义列表项的定义以<dd>开始，浏览器效果。
4）无序和有序列表项内部都可以使用段落、换行符、图片、链接以及其它列表等等。

2.HTML块元素和内联元素

可以通过<div>和<span>将HTML块元素组合起来。

2.1 HTML块级元素

大多数HTML元素被定义为块级元素（block level element）或内联元素（inline element)。块级元素在浏览器显示时，通常会以新行来开始（结束）。例如：<h1>,<p>,<ul>,<table>。

<div>标签
定义：
<div>可定义文档中的分区或节(division/section)
<div>标签可以把文档分割为独立的、不同的部分。它可以用作严格的组织工具，并且不使用任何格式使之关联。
如果用id/class来标记<div>，那么该标签的作用会比那的更有效。
用法：
<div id/class="属性值">内容</div>
效果:<div>是一个块级元素。这意味着它的内容自动地开始一个新行，浏览器显示它的内容自动开始一个新行。实际上，换行是<div>固有的唯一格式表现，可以通过<div>的class或者id应用额外的格式。

2.2 HTML内联元素

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

<span>：
定义：
<span>元素是HTML的内联元素，可用作文本的容器。<span>也没有特定的定义。当与CSS一同使用时，<span>元素可用于为部分文本设置样式属性。
用法：
<span>标签被用来组合文档中的行内元素。
注意：span没有固定的格式表现。当对它应用样式时，它才会产生视觉上的变化。如果不对span使用样式，那么span元素中的文本与其它文本不会产生任何视觉上的差异。
属性：
id  用于标识单独的、唯一的元素。
class  用于元素组（类似的元素，可以理解为某一类元素）
可以应用这两个属性，对span应用样式。

3.表格标签

HTML语言中，表格是没有列的概念的，列的概念由单元格来体现。

<table></table>  表格标签
<tr></tr>        行标签
<td></td>        单元格标签
<th></th>        表头标签(自动加粗并且在单元格中加粗），定义在表格第一行的行标签中。
<caption></caption>标题标签（必须紧随table标签之后，只能对一个表格定义一个标题，通常会居中于表格之上）

范例：HTML表格
<html>
    <body>
        <table border="1">
		<caption>caption用来命名表格标题</caption>
		<tr>
		<th>表格的表头在行标签中定义</th>
		<th>第二列</th>
		</tr>
        <tr>
            <td>row 1，cell 1</td>
            <td>row 1，cell 2</td>
        </tr>
        <tr>
            <td>row 2，cell 1</td>
            <td>row 2，cell 2</td>
        </tr>
        </table> 
    </body>
</html>

<table>表格标签的属性
	属性：border 指定边框大小。如果不定义边框属性，表格将不显示边框。
	属性：width/height 
	属性：caption 标题  必须紧跟<table>标签之后。
	属性：bgcolor 背景色
	属性：对齐方式：align
	属性：cellspacing 单元格边沿与边框线中间的空间
	属性：cellpadding 单元格边沿与内容的空间的距离

说明：

1）数据单元格的内容可以是文本、图片、列表、段落、表单、水平线、表格等等。

2）如果不定义属性（border属性），表格将不显示边框。

3）没有内容的表格单元显示的不太好，如果某个单元格是空的（没有内容），浏览器可能无法显示单元格的边框。解决办法是：在空单元格加上一个空格占位符(&nbsp;)，这样就可以将单元格的边框显示出来。

表格的合并与拆分

合并  行合并：rowspan  列合并：colspan="2"：2个单元格合并。
默认的拆分：
	thead 头 tbody 体 tfoot 脚
拆分的作用：拆分之后解决用户体验差的问题
在一些特定的需求中，开发者可以将这三个标签置入到表格中。
开发者在表格中添加上面三个标签不会影响效果显示。后期通过表格拆分来完成一个特定需求。

4.超链接标签

HTML常使用超链接与网络上的另一个文档相连。点击链接可以从一个页面跳转到另一个页面，或者在本页面内进行跳转。超链接可以是一个字，一个词，一个句子或者是一张图片。当把鼠标指针移动到网页中的某个链接上时，箭头就会变成一只小手。

<a></a>超链接标签（通过<a>标签在HTML中创建链接）
属性：
href：创建指向另一个文档的链接，跳转到另一个文档（可以是本页面，也可以是另一个文档）。
name：创建文档内的书签，跳转至当前页面的某个位置,规定锚的名称。书签不会以任何特殊方式展示，它对读者是不可见的。也可以使用id属性来替代name属性，命名锚同样有效。
target:打开目标资源的一个方式。
	属性值：_blank:新建一个窗口打开
	             _self:在当前窗口直接打开
用法：
<a href="#另一个文档的资源地址">显示在页面上的文本</a>
<a name="锚点名称">显示在页面上的文本</a>
如：
在HTML中对锚进行命名（创建一个书签）
<a name="tips">锚点（书签点）</a>
然后，在同一个文档中创建指向该锚的链接：
<a href="#tips">跳转到锚点</a>
作用：
超链接标签有两个作用：1）链接资源文件的跳转 
		     2）作为锚链接来使用

说明：
1)可以使用id属性替代name属性，命名锚同样有效。
2)书签不会以任何特殊方式向读者显示，它对读者是不可见的。
3)可以在本页面或者其它页面创建锚链接，锚链接的使用：

<a name="top"></a>   <!--锚点-->
在该页面的某个位置写到：
<a href="#top>跳转到顶部</a>
点击“跳转到顶部”即可跳转到该页面中“<a name="top"></a>”的位置

5.HTML图像标签

img标签<img 属性=属性值>
  属性：src 链接图片 属性值：图像的url地址（必需）
  属性：width/height(px/百分比） 100%平铺  
  属性：alt 替代文本，当图片失效时，来解释图片的文字。（必需）
  属性：title标题属性
  属性：align：对齐方式 
src：属性，通过js方式来操作img的src属性改变图片。

说明：

1)img标签是一个空标签，只包含属性，没有闭合标签。
2)浏览器将图片显示在文档中图像标签出现的地方。
3)gif和jpg均可作为HTML背景图片。body标签的background属性设置背景图片。如果图像小于页面，图像会重复。可以通过CSS样式进行设置。

一些练习的代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>html标签练习</title>
	</head>
	<body>
		<a id="top"></a>
		<h5>使用无序列表</h5>
<ul>
<li>Java从入门到精通</li>
<li>HTML从入门到精通</li>
<li>Java Web从入门到精通</li>
</ul>
<h5>使用有序列表</h5>
<ol>
<li>Java从入门到精通</li>
<li>HTML从入门到精通</li>
<li>Java Web从入门到精通</li>
</ol>
<h5>使用自定义列表</h5>
<dl>
<dt>Java从入门到精通</dt>
<dd>Java IO</dd>
<dd>JVM</dd>
<dt>Java Web从入门到精通</dt>
<dd>HTML</dd>
<dd>CSS</dd>
<dd>JavaScript</dd>
</dl>
<h1>一个嵌套列表：</h1>
<ul>
<li>咖啡</li>
<li>茶</li>
<dl>
<dt>红茶</dt>
<dt>绿茶</dt>
</dl>
<li>牛奶</li>
</ul>
<style>
tbody tr:hover{
	color="#0F0";
	}
	</style>
<thead>
<table border="1" align="center" width="1300px" height="200px">
<caption>商品清单</caption>
<tr>
<th>商品</th>
<th>数量</th>
</tr>
</thead>
<!--利用表格拆分的方式-->
<tbody>
<tr align="center">
<td>牛奶</td>
<td>2</td>
</tr>
<tr align="center">
<td>鸡蛋</td>
<td>5</td>
</tr>
<tr align="center">
<td>奶茶</td>
<td>4</td>
</tr>
</tbody>
</table>
<hr />
<a href="网页时钟.html" target="_blank" text-decoration="none">跳转到网页时钟页面</a><br/>
<a name="锚点"></a>
<img src="/网页时钟/img/3.jpg" width="100%" alt="广告" >
<a href="#top">跳转[顶部]</a>
	</body>
</html>

网页时钟的代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>网页时钟</title>
	
	</head>
	<body>
		当前系统时间是：<span id="spanTip"></span>
		<a href="before练习.html#锚点">返回</a> 
	</body>
		<script>
			function htmlDate(){
				//1.创建日期对象
			var date=new Date();
//2.获取当前系统时间，拼接为字符串
			var dataStr=date.getFullYear()+"-"+(date.getMonth()+1)+"-"+date.getDate()+"&nbsp;&nbsp;"+date.getHours()+":"
				+date.getMinutes()+":"+date.getSeconds();
//3.dom操作：getElementId（id属性值）
				var span=document.getElementById("spanTip");
//4.设置span标签的innerHTML属性
				span.innerHTML=dataStr;
			}
			//定义定时器
			setInterval("htmlDate()",1000);
		</script>
</html>

结果：

6.表单标签

HTML表单用于搜集不同类型的用户输入。应用场景有注册和登录。表单处理程序通常是包含用来处理输入数据的脚本的服务器页面。表单元素指的是不同类型的input元素、复选框、单选按钮、提交按钮等。

form标签
<form></form>
    属性：
        action  定义在提交表单时执行的动作，向服务器提交表单的通常做法是使用提交按钮。通常，表单会被提交到web服务器上的网页。如果忽略action属性，则action会被设置为当前页面。
        method  规定在提交表单时所用的HTTP方法（默认是get()）。如果表单提交是被动的（比如搜索引擎查询），并且没有敏感信息，使用get()，GET适用于少量数据的提交。浏览器会设定容量限制；如果表单正在更新数据，或者包含敏感信息（例如密码），使用post()，post()提交的数据在页面地址栏中是不可见的。
        name：规定识别表单的名称（对于DOM使用：documents.forms.name）
        target  规定action属性中地址的目标（默认是_self）
        accept-charset  规定在被提交表单中使用的字符集（默认页面字符集）
        autocomplete  规定浏览器应该自动完成表单（默认：开启）
        enctype  规定被提交数据的编码
        novalidate  规定浏览器不验证表单


<input>元素--最重要的表单元素
属性：
    type
        属性值：
                text  定义常规文本输入  注意：文本字段的默认宽度是20个字符。
                radio  定义单选按钮输入（选择多个选项之一），name的属性值必须一样才能实现单选。
                submit  定义提交按钮（提交表单）
                name  保证浏览器正确输出
                checkbox 定义复选框。复选框允许用户在有限数量的选项中选择零个或多个选项。
                number  用于应该包含数字值的输入字段  而且可以通过min和max设置最小值和最大值。
                date  用于定义包含日期的输入字段，可以通过min和max进行设置。
                color  用于应该包含颜色的输入字段。根据浏览器支持，颜色选择器会出现输入字段中。
                email 用于应该包含电子邮件地址的输入字段。根据浏览器支持，能够在被提交时自动对电
                       子邮件进行验证。
    value   规定输入字段的初始值。
    readonly  规定输入字段为只读（不能修改），默认值为value的值。浏览器会显示，但不会修改。
    disabled  规定输入字段是禁止的。被禁用的元素是不可用和不可点击的。被禁用的元素不会被提交。浏览器中会显示被禁用的值（value值），如果是文本输入的话，该框为灰色。
    maxlength  规定输入字段允许的最大长度。如果输入超过设置的长度，浏览器会给输入内容加上红色的下划线，并且超过此长度的输入无效。
<fieldset></fieldset>用于组合表单中的相关数据。
<legend>标题</legend>用于给<fieldset>定义标题。
<select></select>下拉列表
<option></option>定义待选择的选项。列表通常会把首个选项设置为被选选项。
    属性：selected  定义预定义选项

<textarea>元素定义多行输入字段（文本域）

<button>元素定义可点击的按钮

<datalist></datalist>规定预定义选项列表。
浏览器显示为：用户会在他们输入数据时看到预定义选项的下拉列表。
注意：input元素的list属性必须引用<datalist>元素的id属性。

说明：

1）action属性定义在提交表单时的动作。向服务器提交表单的做法通常是使用提交按钮。表单通常会提交到web服务器上的网页。如果省略action属性，则action属性会被设置为当前页面。

2）method属性用于规定在提交表单时的方法（get或post),默认是get方法。二者的区别是

a.get方式提交的数据大小有限制，一般不超过4Kb。
   get方式提交的数据会显示到URL地址栏中。
   http://localhost:8080/xxx.htmlusername=zhangsan&password=123456
b.post方式：
  提交的数据大小无限制，提交的内容不会显示到地址栏中，但是网络数据中是可以实现的。

3）name属性保证提交的正确性。如果要正确地提交，每个输入字段必须设置一个name属性。

4）fieldset元素组合表单中的相关数据，在浏览器中显示为加了一个外边框。

5）textarea元素用于定义多行输入字段。可以设置默认字段（可以修改）。在浏览器中显示为一个文本框，可以通过rows和cols属性来设置文本框大小。

6）复选框checkbox的用法 如果选中，浏览器中显示为小方框中打勾。

<input type="checkbox" name="name1" value="value1">选项1
<input type="checkbox" name="name2" value="value2">选项2
<input type="checkbox" name="name3" value="value3">选项3

7）number属性，在浏览器中显示为用户在输入数据后，可以进行上增下减的修改。

8）date属性，在浏览器中显示为用户可以自己选择之前或之后的具体日期。

9）color属性，会根据浏览器支持的颜色，供用户选择。默认为黑色。颜色选择器会出现在输入字段中。

10）email属性，如果输入不是邮箱格式，浏览器将会提示“请在电子邮箱地址中包含@”，“输入的内容”缺少@。

测试代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>html标签练习</title>
	</head>
	<body>
<form>
	username:
	<input type="text"><br/>
	password:
	<input type="text"><br/>
	<fieldset>
		<legend>您的信息</legend>
		First name:<br />
		<input type="text" name="first name" value="里" disabled><br />
		Second name:<br />
		<input type="text" name="second name" maxlength="5"><br />
	国家
	<input type="text" value="中国" readonly><br/>
	请选择性别：
	<input type="radio" name="sex" value="男" checked>男<br />
	<input type="radio" name="sex" value="女" checked>女<br />	
	请输入年龄
	<input type="number" name="age" min="18" max="50"><br />
	请输入手机号
	<input type="text" name="cellphone"><br />
	请输入出生年月
	<input type="date" name="birthday"><br/>
	请选择省份
	<select name="province">
		<option value="henan">河南</option>
		<option value="shanxi">陕西</option>
		<option value="hubei">湖北</option>
		<option value="hebei">河北</option>
	</select><br />
	请选择您喜欢的颜色
	<input type="color"><br/>
	请输入您的邮箱
	<input type="email"><br/>
	请描述您的优点：<br />
	<textarea name="message" rows="10" cols="30">
		The weather feels fine on Saturday.
	</textarea><br />
	</fieldset>
	<input type="submit" value="提交">
	<p>datalist的用法</p>
	</form>
	<form action="action_page.php">
		<input list="cars">
		<datalist id="cars">
			<option value="Benz">
				<option value="Audi">
					<option value="BMW">
						<option value="Ford">
		</datalist>
	</form>
	<p>checkbox复选框的用法</p>
	<form>
		<input type="checkbox" name="vehicle" value="Bike">I have a bike<br />
		<input type="checkbox" name="vehicle" value="Car"/>I have a car<br />
		<input type="submit">
	</form>
	</body>
</html>

效果展示：

寻瀑
关注
  • 1
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
html基础教程
07-22
资源名称：html基础教程内容简介：HTML基础-第一讲HTML基础-第二讲HTML基础第三讲---字体HTML基础第四讲---图像HTML基础第五讲---控制表格及其表项的对齐方式HTML基础第六讲---表格HTML基础第七讲---框架HTML基础第...
DOM编程案例——innerHTML innerText操作div和span、去除字符串的前后空白trim
qq_45554909的博客
12-21 1325
1.innerHTML innerText操作div和span innerText和innerHTML属性什么区别？ 相同点： 都是设置元素内部的内容。 不同点： innerHTML会把后面的 “字符串”当做一段HTML代码解释并执行 。 innerText，即使后面是一段HTML代码，也只是将其当做普通的字符串来看待。 <body> <style type="text/css"> #div1{ background-color: #abacff;
js创建子元素：innerHTML与document.createElement()
wsj2311161832的博客
01-24 3722
建议（创建少量元素时）： 1.当父元素里没有其他元素，或者只添加少量行内元素或行内块元素时用innerHTML。 原因：此时不会破坏父元素内的整体布局，并且只添加如a标签、span标签这些行内元素时，用innerHTML更加快捷。 2.当父元素里已经布局了其他元素，并且添加有样式块元素时用document.createElement()。 原因：用document.createElement()创建元素插入顺序，可以通过elemen...
JavaScript.innerHTML属性
梦之归途的博客
12-05 363
innerHTML属性*这个属性不是dom的组成部分，但是大多数浏览器都支持的属性第一个作用：获取文本内容 * //获取span标签 哈哈哈 var span1 = document.getElementById(“sid”); alert(span1.innerHTML);第二个作用：向标签里面设置内容（可以是html代码） * //向div里
WEB innerHTML中div 和span
demon@blog
02-24 417
使用innerHTML属性来控制DIV和SPAN 今天开发中涉及到对一个层的信息控制，就是控制一个层中显示什么信息，查找资料才知道使用innerHTML属性来控制层的值，这个innerHTML跟表单里面的value属性有点类似，能够控制层的显示值。 　　比如说我一个div层里本来没有值，我处罚一个事件后要显示值，那么就能够使用innerHTML属性了，其实innerHTML属性除了能控制层...
网页前端设计-作业一（HTML5）
qq_61727355的博客
08-18 6192
1 .普通（2分）HTML5新增的格式标签有哪些？HTML5新增的格式标签如下： 记号标签：可用于突出显示指定区域的文本内容，底色默认为黄色效果； 进度标签：可用于显示任务的进度状态，可以配合JS使用以显示任务进度的动态进行效果； 度量标签：可用于显示标量测量结果，通常用于显示磁盘的使用量、投票数据统计等。
HTML 5基础教程第二章
03-20
HTML5 是最新的 HTML 标准。 HTML5 是专门为承载丰富的 web 内容而设计的，并且无需额外插件。 HTML5 拥有新的语义、图形以及多媒体元素。 HTML5 提供的新元素和新的 API 简化了 web 应用程序的搭建。 HTML5 是...
html基础实验
01-06
一、实习目的 1. 熟悉Dreamweaver 的工作环境；...二、实习内容 1. 熟悉Dreamweaver的工作环境； 2. Dreamweaver管理站点功能； 3. 制作图文混排的网页； 4. 制作图片展示网页； 5. 制作个人网站首页。
HTML:HTML 基础知识
05-13
1990 年，由于对 未来发展的远见，Tim Berners-Lee 提出了 的概念，并在第二年在 的基础上将其正式定义为一个标记语言。 于 1993 年正式开始制定 HTML 规范，并在经历了几个版本的草案后于 1995 年发布了 HTML 2.0 ...
html基础-第二天
05-28
该资源是我自学html第二天所敲的代码，供自己和他人学习和参考，博客地址：https://blog.csdn.net/lbqcsdn/article/details/80487760
innerHTML的用法
bytxl的专栏
10-09 6957
参考：http://blog.sina.com.cn/s/blog_3efffdd501000b9z.html innerHtml用法 function Test(){       var str="";       str+="Hello,";       str+="This is a Test!";       str+="I Love you;";
html基础知识汇总
最新发布
11-19
以下是HTML基础知识的汇总： 1. HTML标签是由尖括号包围的关键词，通常成对出现，第一个标签是开始标签，第二个标签是结束标签，也被称为开放标签和闭合标签。 2. HTML文档包含HTML标题和纯文本，也被称为网页。 3. ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值