首页 > 其他分享 >HTML

HTML

时间:2023-12-07 21:04:56浏览次数:24  
标签:表格 标签 元素 表单 width HTML 属性

HTML5基本骨架

1、<html></html>标签点限定了文档的开始点和结束点

2、<head></head>头部或标题

3、<body></body>浏览器中显示的主体内容

4、<title></title>可定义文档的标签式状态栏上

5、<meta>用来描述HTML网页文档的属性

<!dottype html>
<html>
 <head>
<meta charste="utf-8"/>
<title> 学习</title>
</head>
<body>
</body>
</html>

图片标签:

<img src="路径" alt=“替代文本” width=“宽度” height="高度" title=“提示”>

标题介绍与应用

标题<h1>(最大)<h6>

align(属性)left 左边   center 中间  right 右边

标签之段落、换行、水平线、

换行:<br/>

水平线:<hr/>  color  颜色  width  长度  size  高度  align  对齐方式

超文本链接

超文本链接标签<a>  <a hres="url">链接文本<a>

标签之文本

<em>  定义着重文字 <b> 定义粗体文字 <i> 斜体字 <strong>加重语气  <del> 删除字 <span>  元素没有特定含义

有序列表(可以进行嵌套)

<ol>每个列表项始于<li>标签

<ol>

 <li>

</li>

<ol>

type是<ol>的属性

1、1、表示数字

2、a表示小写

3、A大写

4、大小写罗马数字

无序列表

标签<ul>

属性: disc 实心圆  circle  空心圆  sguare 小方块  none 不显示

快捷键:ui>li*n

标签之表格<table>

表格组成特点 行<tr>、列 <td>、单元格

表格属性:  border  边框  width  宽度  height  高度

单元格合并

水平合并:colspan  保留左边,删除右边  垂直合并: rowspan 保留上边,删除下面

常见应用场景:无序的列表效果、导航效果

标签之表格

表格组成特点:表格 <table>、行<tr>、单元格<td>;快捷键生成:table>tr*N>td.

表格属性: border 边框 width 宽度 heigth 高度

表格单元格合并

1、水平合并:colspan (保留左边、删除右边)

2、垂直合并:rowspan (保留上边、删除下边)

form 表单 在web网页中用来给用户填写信息,从而能采用户信息,使网页有交互功能,如登录注册,搜索框

<form action="url" method="get/post" name="myform">
</form>

属性说明  action 服务器地址 name 表格名称

method get post 的区别

1、数据提交方式,get把数据提交的url 可以看到、post看不到

2、get 一般用于提交少量数据,post用来提交大量数据

表单元素 一个完整的表单包含三个基本组成部分:表单标签、表单域、表单按钮

表单标签 <form> 

表单域 <input type="text"/>

按钮 <input type="submit"/>

<button></button>

</form>

input(输入框)

表单元素

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

当用户要在表单中键入字母,数字等内容时,就会用到文本域

<form>
first name:<input type="text"namne=firstname><br>
last name:<input type="text" name="astname">
</form>

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

<form>
pass word:<imput type="passwodr" name="pwd"/>
</form>

提交按钮:value (替换文本)

元素分类

块元素与行内元素(内联元素)

常见块级元素(在页面中独占一行、自上向下垂直排列、可设置width、height属性,一般块级元素可以包含行内元素和其他元素)

div、 form 、h1-h6、p、table、ul、等等特点:上下摆放

常见行内元素(只占自身大小、不会独占、属性无效果、不包含块级元素)

a、b、me、i、span、strong、等特点:横向摆放

行内块级元素

button、img、input 等 特点:不换行,能够识别宽高

HTML5新增标签

1、<header></headr> 头部 

2、<nav></nav> 导航

3、<section></section> 定义文档中的节如章节、页眉、页脚

4、<aside></aside>侧边栏

 5、<footer></footer>(底部)

6、<article></article>代表一个独立的完整的相关内容块,例如一篇完整的论坛帖子,一篇博客文章,一个用户评论,等等;

标签:表格,标签,元素,表单,width,HTML,属性
From: https://blog.51cto.com/u_16405988/8727775

相关文章

  • HTML列表标签学习
    一、有序列表例子:<ol> <li>苹果</li> <li>梨子</li></ol>其中有序列表可以有不同的排序方式:<h4>大写字母列表:</h4><oltype="A"><li>Apples</li><li>Bananas</li><li>Lemons</li><li>......
  • Java登陆第二十天——HTML常用标签
    文本标签文本常用的HTML标签:标签名标签描述<h1></h1>标题标签<h6></h6>标题标签<p></p>段落标签<hr>换行标签<br>换行标签标签栗子:<!DOCTYPEhtml><htmllang="en"><head><metacharset=&quo......
  • 基于vue2开发的html5页面实现微信分享卡片(微信好友+朋友圈+qq好友+qq空间)
    首先附上文档链接:1.微信官方文档:https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/JS-SDK.html#1112.免费生成二维码的草料官网:https://cli.im/text/other 需求:在浏览器分享链接时携带用户id(因为是拉人活动,需要给用户积分),并且在微信中分享为卡片模式 具体......
  • Java登陆第十九天——HTML规范与语法
    使用IDEA新建一个空的Web项目,并填写路径与项目名称进入项目后,在根目录新建一个HTML页面,取名为index就可以得到一个最基础的HTML页面在IDEA中,使用浏览器打开此页面页面内容如下:如何修改浏览器选项File-Settings-Tools-WebBrowsersHTML页面规范标签<>一对这样的......
  • bs4 - HTML操作
    html_doc="""<html><head><title>TheDormouse'sstory</title></head><body><pclass="title"><b>TheDormouse'sstory</b></p><pclass="story"......
  • python HTML文件标题解析问题的挑战
    引言在网络爬虫中,HTML文件标题解析扮演着至关重要的角色。正确地解析HTML文件标题可以帮助爬虫准确地获取所需信息,但是在实际操作中,我们常常会面临一些挑战和问题。本文将探讨在Scrapy中解析HTML文件标题时可能遇到的问题,并提供解决方案。问题背景在解析HTML文件标题的过程中,......
  • 用html和css和js实现一个班级点名
    <!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width,initial-scale=1.0"><title>班级点名系统</title>......
  • NET Core 3.1 MVC 在html中引用js的方法使用时不生效异常
    在html的select元素添加了onchange事件,changeContent方法也在当前html下。<selectid="changeLanguage"class="form-controlinput-lg"asp-for="language"asp-items="Model.supportedLanguages"onchange="changeContent()">&l......
  • HTML学习笔记四:html-body-行内元素
    HTML学习笔记四:body元素行内元素MDN元素查询地址所有的html的元素我们都可以通过以下地址进行相关的查询和理解。https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/metabody中元素分类块级元素行内元素行内元素行内元素区别于块级元素,不会独占一行,一个行内元......
  • HTML学习笔记五:html-body-form表单
    HTML学习笔记五:html-body-form表单MDN元素查询地址所有的html的元素我们都可以通过以下地址进行相关的查询和理解。https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/meta表单元素在网页中,如果需要向web服务器提交用户输入的信息时候,需要用到form表单进行提交。......