前端学习之html5

wangbobobobo      2022-02-14     511

关键词:

一、文本与段落标记

技术分享图片

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>文本与段落标记</title>
</head>
<body>
<h1>欢迎来到HTML5</h1><br>
<hr width="500px" size="10px" color="red" aline="center">
<b>欢迎来到HTML5</b><br>
<i>欢迎来到HTML5</i><br>
<strong>欢迎来到HTML5</strong><br>
<font size="5" color="#ff00ff" face="黑体">欢迎来到HTML5</font><br>
<p align="center">欢迎来到HTML5</p>
</body>
</html>

技术分享图片

二、列表标签

1、有序列表

<ol type="序号类型>
    <li>...</li>
    <li>...</li>
</ol>

其中,属性type指定列表项前的项目编号的样式,其取值:1编号为阿拉伯数字(默认值);a小写英文字母;A大写英文字母;i小写罗马数字;I大写罗马数字

2、无序列表

<ul type="类型样式>
    <li>...</li>
    <li>...</li>
</ul>

其中type指定列表项前的项目符号样式,其取值为disc:实小原点;circle:空心圆点;square:实心方块。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>列表标签</title>
</head>
<body>
<ol type="i">
    <li>欢迎来到h5</li>
    <li>欢迎来到h5</li>
    <li>欢迎来到h5</li>
    <li>欢迎来到h5</li>
    <li>欢迎来到h5</li>
</ol>
<hr width="100%" size="10px" color="red">
<ul type="circle">
    <li>欢迎来到h5</li>
    <li>欢迎来到h5</li>
    <li>欢迎来到h5</li>
    <li>欢迎来到h5</li>
    <li>欢迎来到h5</li>
</ul>
</body>
</html>

技术分享图片

三、超链接标签

超链接格式:

<a href="url">超链接名称或图片</a>

其中:属性href:指定链接的目标

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>超链接</title>
</head>
<body>
<h4>超链接标签的使用</h4>
<a href="http://www.mount-tai.com.cn/nature.shtml">泰山风景介绍</a>
<hr width="100%" size="1" color="red">
<h4>图片超链接标记的使用</h4>
<a href="http://www.mount-tai.com.cn/nature.shtml">
    <img src="baiguan.JPG" width="80px" height="80px" alt="点击该图片">
</a>
</body>
</html>

技术分享图片

四、定时刷新与跳转

1、定时刷新

基本语法: <meta http-equiv="refresh" content="1" />
该语句表示,页面每隔一秒刷新一次,其中属性content的值代表间隔的时间。

2、定时跳转

基本语法: <meta http-equiv="refresh" content="3;http://www.sohu.com" > 
该语句表示,页面3秒后自动转到搜狐主页。 注意:上述标签一般放在head标签中。

五、表格

表格由行、列、单元格组成,一个表格是由<table>(表格)、<tr>、<td>(数据)或<th>(列名)标 记来定义的

基本语法:

<table>
    <caption>表格标题</caption>
    <tr><th>列名一</th><th>列名二</th>......</tr>
    <tr><td>数据一</td><td>数据二</td>......</tr>
    ......
</table>

 技术分享图片

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表格</title>
</head>
<body>
<table width="500px" height="400px" border="1px red solid" align="center" cellpadding="2px" cellspacing="30px" bgcolor="#faebd7">
    <caption>这里是表格标题</caption>
    <tr>
        <th>姓名</th>
        <th>学号</th>
    </tr>
    <tr align="center">
        <td>张三</td>
        <td>123</td>
    </tr>
    <tr align="center">
        <td>张三</td>
        <td>123</td>
    </tr>
    <tr align="center">
        <td>张三</td>
        <td>123</td>
    </tr>
    <tr align="center">
        <td>张三</td>
        <td>123</td>
    </tr>
    <tr align="center">
        <td rowspan="2">1</td>
        <td>2</td>
    </tr>
    <tr align="center">
        <td>3</td>
    </tr>
    <tr align="center">
        <td colspan="2">张三</td>
    </tr>
</table>
</body>
</html>

技术分享图片

 

六、图片标签

<img src="url" height="" width ="" alt="图片显示错误">
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>图片标签</title>
</head>
<body>
<img src="baiguan.JPG" height="500" width="500" alt="图片显示错误">
</body>
</html>

 技术分享图片

七、表单标签

1、form标记及其属性 

表单是由文本框、密码框、多行文本框、单选、复选框、下拉菜单/列表、 按钮、文件域、隐藏域等各种表单元素及其标记组成的。

表单使用<form>和</form>来定义的,<form>标记有属性:name、method、action、target等属性。
<form name="表单名" method="提交方法" action="处理程序‘>
...
</form>

 

2、input标记及其属性

<input name="输入域名称" type="域类型" value="输入域的值"> 
<input>标记主要有六个属性: type,name,size,value,maxlength,check。
其中,name和type是必选的两个属性: name:属性的值是响应程序(由form标记中的action属性指定)中的变量名

type的九种类型如下:

技术分享图片

3、下拉列表框:<select>、<option>

<select name="" size="" multiple>
<option value="" selected>...</option>
<option value="">...</option> ...... </select>

4、多行文本框

<textarea name="" rows="" cols="" wrap="off|virtual|physical">
  初始值
</textarea>
其中:rows设置输入域的行数;cols设置输入域的列数;wrap设置是否自动 换行。

八、窗口分割与设置

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>框架集</title>
</head>
<body>
<iframe src="html6.html" width="600px" height="400px"></iframe>
<iframe src="Html7.html" width="600px" height="400px"></iframe>
</body>
</html>

技术分享图片

 

python第五周前端学习之html5/css/js

<!--html/head/body文本-h1-h6p/br/hr/sub/sup/strong/b/em/del/ins/列表-ul(li)/ol(li)/dl(dt/dd)/图像-img/figure/figcaption链接-a(页面链接/锚链接/功能链接)表格-table/tr/td/th/thead/tbody/tfoot表单-form/input(text/password/ra 查看详情

python基础下的web前端学习之html

一、参考书籍:《Web前端开发HTML5+CSS3+jQuery+AJAX从学到用完美实践》备注:本书为工具书。二、HTML5元素:按功能划分:基础、格式、表单、框架、图像、音频/视频、链接、列表、表格、样式/节、元信息、编程。(参考P76)元素... 查看详情

html5学习之webwork多线程处理

...中却一直是鸡肋在新的标准中,提供的新的WebWorkAPI,让前端的异步工作变得异常简单。使用:创建一个Worker对象,指向一个js文件,然后通过Worker对象往js文件发送消息,js文件内部的处理逻辑,处理完毕后,再发送消息回到当... 查看详情

前端学习之html

HTML介绍Web服务本质importsocketsk=socket.socket()sk.bind(("127.0.0.1",8080))sk.listen(5)whileTrue:conn,addr=sk.accept()data=conn.recv(8096)conn.send(b"HTTP/1.1200OK")conn.send(b"<h1>Helloworld 查看详情

前端学习之网站

在前端学习中会使用各种各样的网站,以下作为记录。一、阿里图标库  https://www.iconfont.cn/home/index二、layui经典模块化前端UI框架  https://www.layui.com/三、echarts数据可视化工具(各种图表)  https://echarts.apache.org/zh/index.html&... 查看详情

前端学习之css二

首先我们说一下各种属性: 1.水平对齐方式属性:  left:把文本排列在左边。默认值:由浏览器决定   right:把文本排列在右边   center:把文本排在中间   justify:实现两端对齐文本效果 2.用于调图标的... 查看详情

2018学习之混合开发

...需要下载安装,通过移动端浏览器来访问HTML5+CSS3+JS;Web前端开发人员开发成本低,更新维护迭代成本也很低,使用成本低,跨平台较为依赖网络,流畅度较低,吃性能不能调用设备的原生功能NativeAPP:需要下载安装,打开访问IOS... 查看详情

前端学习之html

<b> 定义粗体文本<big>定义大号字体<em>定义着重文字<i>定义斜体字<small>定义小号字<strong>定义加重语气<sub> 定义下标字<sup>定义上标字<ins>定义插入字<del>定义删除字  三... 查看详情

前端学习之jquery

一jQuery是什么? <1>jQuery由美国人JohnResig创建,至今已吸引了来自世界各地的众多 javascript高手加入其team。         <2>jQuery是继prototype之后又一个优秀的Javascript框架。其宗旨是——... 查看详情

前端学习之——入门篇

  学习前端大概已经有一个月的时间了,通过这一个月对前端的初步了解与学习,自己也从中总结了一些小小的经验。希望通过本文与同我一样刚刚开始学习前端的小伙伴进行一些交流。  我觉得作为一名前端工作人员必须... 查看详情

web前端学习之css

css概述:CSS(CascadingStyleSheets)是层叠样式表用来定义网页的显示效果。可以解决html代码对样式定义的重复,提高了后期样式代码的可维护性,并增强了网页的显示效果功能。简单一句话:CSS将网页内容和显示样式进行分离,提... 查看详情

前端学习之css3常用属性

一、字体属性<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title>字体属性</title></head><body><pstyle="font-family:黑体;">css之字体属性</p><psty 查看详情

前端学习之随笔

alert()函数:显示一个消息框,以便向用户发送通知或警告信息。显示的消息框是模态的。在alert()函数的括号中指定消息框中的消息,它称为函数的参数(parameter)。 prompt()函数需要如下两个信息:要显示的文本,通常用... 查看详情

js学习之-------前端下载文件(代码片段)

1、前端下载文件的两种形式(我目前知道的):(1)后台接口直接返回下载路径,根据路径下载;(2)后台接口返回文件流,根据blob来下载 2、根据路径下载具体怎么做?           ---... 查看详情

html5学习之html标记类型

Keyword:MarkupType,ContainerTags,SingleTag,Attributes1.ContainerTags(容器标记)成对的开始标记(StartTag)与结束标记(EndTag),利用这两个标记将文字围住,以达到预期的效果。大部分的HTML标记都属于此类,终止标记前会加上一个正斜线“/”。... 查看详情

html5学习之浏览器的私有前缀

浏览器的私有前缀是为了兼容老版本的写法比较新版本的浏览器无需添加1.私有前缀-moz-:代表firefox(火狐)浏览器的私有属性-ms-:代表IE浏览器的私有属性-webkit-:代表safarichrome私有属性-o-:代表opera(欧朋)浏览器私有属性2.提倡写法一... 查看详情

前端学习之函数式编程—闭包(代码片段)

闭包Part01闭包的概念闭包(closure):函数和其周围的状态(词法环境)的引用捆绑在一起形成闭包. 可以在另一个作用域中调用一个函数的内部函数并访问到该函数作用域中的成员//函数作为返回值functionmakeFn()letmsg='hellofunction'... 查看详情

bigger-mai养成计划,前端基础学习之html

HTML  1、一套规则,浏览器认识的规则。  2、开发者:    学习Html规则    开发后台程序:      写Html文件(充当模板的作用)@@@@      数据库获取数据,然后替换到html文件的指定位置(web框架)... 查看详情