首页 > 其他分享 >html基础知识

html基础知识

时间:2024-03-02 10:00:09浏览次数:28  
标签:标签 29 value 表单 html 基础知识 页面

第一章html简单介绍
1.1 html定义

html:超文本标记语言 (Hyper Text Markup Language) ;它的作用是控制页面的结构,页面的内容。
1.2 web最基本
html:用于对网页元素进行整理和分类
css:用于设置网页元素的版式、颜色、大小等外观样式
javascript:网页模型的定义及交互的编写

第二章html常见标签
2.1排版标签
排版标签有标题,段落,横线,换行等标签,可以对页面的文字标题段落进行合理的排版。
h1-h6
p 文本内容
hr 横线
br 换行

2.2 字体的修饰标签
编写网页时,经常需要为文字设置粗体、斜体或下划线效果,这时就需要用到HTML中的字体的修饰标签,使文字以特殊的方式显示。

 

<body>
<strong>加粗</strong>
<em>斜体</em>
<del>过时</del>
<ins>下划线</ins>
</body>

2.3 图像标签

调用图片的两个方法

<body>
<!-- 相对路径 -->
<img src="../imgs/1.jpg" />
<!-- 绝对路径 -->
<img src="D:\java\web-workspace\day01-html\imgs\1.jpg" />
</body>

 

2.4超链接标签
<a href="跳转目标" target="目标窗口的弹出方式">文本或图像</a>
1
href:用于指定链接目标的url地址,当为标签应用href属性时,它就具有了超链接的功能。
**target:**用于指定链接页面的打开方式,其取值有_self和_blank两种,其中self在本窗口打开,blank为在新窗口中打开方式。

<body>
<!--本地相对路径-->
<!--_self在本窗口-->
<a href="./1.排版标签.html" target="_self">html入门</a>
<!--_blank在新窗口-->
<!--网络路径-->
<a href="http://www.baidu.com" target="_blank">百度</a>
</body>

2.5列表标签

列表标签分为

1、 有序列表 (ol li)
2、 无序列表 (ul li)
3、 自定义列表 (dl dt dd)

<body>
<!--无序列表-->
<ul>
<li>洗衣机</li>
<li>电视</li>
<li>空调</li>
<li>冰箱</li>
</ul>
<!--有序列表-->
<ol type="a">
<li>洗衣机</li>
<li>电视</li>
<li>空调</li>
<li>冰箱</li>
</ol>
<!--自定义列表-->
<dl>
<dt>帮助中心</dt>
<dd>账户管理</dd>
<dd>购物指南</dd>
<dd>订单操作</dd>
</dl>
<dl>
<dt>服务支持</dt><!--dt为标题行-->
<dd>售后政策</dd>
<dd>自助服务</dd>
<dd>相关下载</dd>
</dl>
</body>

 

table>(tr>td*3)*3 快捷方式
<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>表格标签</title>
</head>

<body>
<!--table入门-->
<table border="1px">
<tr>
<th>姓名</th>//头部
<th>性别</th>
<th>年龄</th>
</tr>

<tr>
<td>爱丽丝</td>
<td>女</td>
<td>30</td>
</tr>

<tr>
<td>路西法</td>
<td>男</td>
<td>29</td>
</tr>

<tr>
<td>莱恩</td>
<td>男</td>
<td>29</td>
</tr>
</table>
<hr />
<!--table加入样式-->
<table border="1px" cellspacing="0" width="800px" align="center" cellpadding="7px">
<tr>
<th>姓名</th>
<th>性别</th>
<th>年龄</th>
</tr>

<tr>
<td>爱丽丝</td>
<td>女</td>
<td>30</td>
</tr>

<tr>
<td>路西法</td>
<td>男</td>
<td>29</td>
</tr>

<tr>
<td>莱恩</td>
<td>男</td>
<td>29</td>
</tr>
</table>
<hr />
<table border="1px" cellspacing="0" width="800px" align="center" cellpadding="7px">
<tr>
<th>姓名</th>
<th>性别</th>
<th>年龄</th>
</tr>

<tr>
<td>爱丽丝</td>
<td>女</td>
<td>30</td>
</tr>

<tr>
<td>路西法</td>
<td>男</td>
<td>29</td>
</tr>

<tr>
<td>莱恩</td>
<td>男</td>
<td>29</td>
</tr>
<tr>
<td colspan="3" align="center">首页 上一页 下一页 末页 当前2/5页,总共123条记录</td>
</tr>
</table>
</body>

</html>

 

2.7表单标签
表单由三部分组成,表单域、表单控件、表单提示信息三部分组成
**1、**表单控件:包含了具体的表单功能项,如单行文本输入框(text)、密码输入框(password)、单选框(radio)、复选框(checkbox)、提交按钮(submit)、重置按钮(reset)、普通按钮(button)、下拉式(select)等。
2、提示信息: 一个表单中通常还需要包含一些说明性的文字,提示用户进行填写和操作。
3、表单域: 他相当于一个容器,用来容纳所有的表单控件和提示信息,可以通过他定义处理表单数据所用程序的url地址,以及数据提交到服务器的方法。如果不定义表单域,表单中的数据就无法传送到后台服务器

<body>
<!-- **form是表单标签**,一对表单标签代表单作用域
1.action 停缴的服务器路径
2.method 提交方式
**1.get 明文
2.post 暗文提交**
3.input 标签
1.url?key=value
2.type 属性 输入类型 text 文本类型
3.name 提交参数的key
3.value 是提交参数的value,输入的参数会自动赋值给value属性值-->
<form action="http://www.baidu.com" method="get">
姓名<input type="text" name="username" value=""><br/>
手机号<input type="text" name="mobile" value=""><br/>
密码<input type="password" name="password" value=""><br/>
性别 男
<!-- name属性值要相同 -->
<input type="radio" name="sex" value="nan">

<input type="radio" name="sex" value="nv">
<br/> 爱好:
抽烟 <input type="checkbox" name="hobby" value="抽烟">
喝酒 <input type="checkbox" name="hobby" value="喝酒">
烫头:<input type="checkbox" name="hobby" value="烫头"/><br>
<!-- 没有value属性 提交的value值是标签内的内容 -->
<br/> 个人描述:
<textarea name="description"></textarea><br/> 地址:
<!-- 下拉选
将name作为key选中的option项的value作为value提交给服务器
-->
<select name="address">
<option value="beijing">北京</option>
<option value="shanghai">上海</option>
<option value="shenzhen">深圳</option>
</select>
<br>
<input type="button" value="普通按钮">
<input type="submit" value="提交">
</form>
</body>

2.8 浮动框架

html 提供**** 浮动框架标签,该标签的作用是提供一个局部的窗口,该局部窗口可以显示一个完整的页面;一般通过a标签链接一个页面,并通过target属性指定在局部窗口打开;
标签的 target 属性规定在何处打开链接文档

 

 

 

 

标签:标签,29,value,表单,html,基础知识,页面
From: https://www.cnblogs.com/wangtiantian/p/18048336

相关文章

  • 常用日期和时间标准对比:HTML, ISO 8601, RFC 3339, RFC 5322
    1.HTML,ISO8601,RFC3339,RFC5322对比日期和时间,对于不同系统和平台之间的数据交换和互操作至关重要。本文将对比HTML标准、ISO8601、RFC3339和RFC5322,为读者提供参考。表格文字版见文末-附1.1.标准链接HTML标准:https://html.spec.whatwg.org/multipage......
  • html 乱码
    一般中文乱码的原因:1、meta标签设置的编码格式与实际文件的编码格式不符,解决方案:将meta标签和文件实际编码设置统一<metacharset="UTF-8"/>2、未设置编码格式,使用了utf-8以外的编码,解决方案:设置meta标签为对应的编码或将文件的编码格式改为utf-83、文件本身已经乱码,用vsco......
  • CentOS基础知识大全
    1.关机(系统的关机、重启以及登出)的命令shutdown-hnow关闭系统(1)init0关闭系统(2)telinit0关闭系统(3)shutdown-hhours:minutes&按预定时间关闭系统shutdown-c取消按预定时间关闭系统shutdown-rnow重启(1)reboot重启(2)logout注销2.查看系统信息的命令a......
  • .net framework基础知识
    目录1.什么是.Net平台、.NET框架2..NET版本3.CLR(公共语言运行时)4.BCL(基础类库)5.FCL(框架类库)3..NET的运行机制6.为什么说.NET是平台无关的7.术语参考:1.什么是.Net平台、.NET框架“平台”(这里指软件技术平台,下面都指的是这个)就是能够独立运行并自主存在,为其所支撑的上层......
  • Vue学习笔记27--v-html
    1.v-bind:单向绑定解析表达式,可简写为:xxx2.v-model:双向数据绑定3.v-for:遍历数组、对象、字符串4.v-on:绑定事件监听,可简写为@5.v-if:条件渲染——动态控制节点是否存在6.v-else:条件渲染——动态控制节点是否存在7.v-show:条件渲染——空调控制节点是否展示8.v-text:......
  • webpack5多入口的时候HtmlWebpackPlugin怎么处理多个html文件
    constHtmlWebpackPlugin=require('html-webpack-plugin');module.exports={entry:{app1:'./src/app1.js',app2:'./src/app2.js'},output:{filename:'[name].bundle.js',path:path.resolve......
  • javaweb01-html&css
    HTML-CSS基础介绍html:超文本标记语言学习标签css:层叠样式表学习样式基础标签&样式-新浪新闻biao标题标题排版(标签介绍)标题标签h1、h2水平线标签hr图片标签img超链接a标题样式css引入方式:行内样式:内嵌样式:外联样式:<link颜色表示形式:关键字:redrbg表示法:#rgb(......
  • C语言基础知识入门(一)
    C语言一经出现就以其功能丰富、表达能力强、灵活方便、应用面广等特点迅速在全世界普及和推广。C语言不但执行效率高而且可移植性好,可以用来开发应用软件、驱动、操作系统等。C语言也是其它众多高级语言的鼻祖语言,所以说学习C语言是进入编程世界的必修课!一.C语言特点概述C语言......
  • Java中使用Jsoup实现网页内容爬取与Html内容解析并使用EasyExcel实现导出为Excel文件
    场景Pythont通过request以及BeautifulSoup爬取几千条情话:https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/87348030Node-RED中使用html节点爬取HTML网页资料之爬取Node-RED的最新版本:https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/124182289Jsoup......
  • 3. 了解数据可视化的基础知识
    数据建模和可视化是大规模数据分析解决方案支持的商业智能(BI)工作负载的核心。从本质上讲,数据可视化为报告和决策提供支持,帮助组织取得成功。在本模块中,你将了解分析数据建模和数据可视化的基本原则,使用MicrosoftPowerBI作为平台来在操作中探索这些原则。介绍PowerBI......