首页IT科技html基本(01-HTML基础)

html基本(01-HTML基础)

时间2025-05-05 13:04:25分类IT科技浏览4626
导读:HTML基础 1、HTML的概念和作用 概念 HTML(Hyper Text Markup Language):超文本标记语言 超文本:不仅包含普通文本,还可以包含图片、视频、音频、超链接、表格等内容 标记语言:由标签构成的语言...

HTML基础

1            、HTML的概念和作用

概念 HTML(Hyper Text Markup Language):超文本标记语言 超文本:不仅包含普通文本             ,还可以包含图片                   、视频       、音频            、超链接                  、表格等内容 标记语言:由标签构成的语言 HTML的作用 编写网页

2       、W3C标准

网页主要由三部分组成 HTML:用于制作网页基础内容和基本结构 CSS:用于网页样式美化效果 JavaScript:用来制作数据验证      、交互行为效果                   ,可以动态 操作网页的元素增删改查

3                  、HTML的组成

标签 标签可以用于设置文本样式             、图片样式      、超链接样式等等            。用<>表示 例如:<h1>标签      ,代表一级标签                   。我们可以使用开始标签和结束标签包围文字      ,这些文字就以标题形式显示 属性 标签中还可以拥有属性                   ,属性可以位标签提供更多的信息 属性只能添加到开始标签中       。格式为:属性名=属性值 例如:align属性            ,表示对齐方式            。我们可以在开始标签中添加该属性      ,就能让内容显示在不同位置 eg

4                  、初始HTML页面属性说明

<!DOCTYPE.html>:HTML的文档声明 <html lang="en">: 根标签                   ,一个文件中只能有一个根标签            ,lang属性表示网页使用的语言,默认是en                   ,可以修改成zh <head>:头部标签 <meta charset="UTF-8">:设置字符集                  ,建议使用UTF-8 <title>:文档标题,显示在浏览器标签上 <body>:身体标签             ,包含所有的文档内容

5             、HTML基础语法

5.1、文本标签

h1~h6 用于文章标题                  ,一共有6级 1级最大      ,6级最小 这是块级标签             ,自带换行的功能 常用属性 align:标签对齐的方式 center居中                  、right右对齐                   、left左对齐 hr 水平线                   ,即可在此画一条水平线 <hr size="5"> 常用属性 width:设置水平线的宽度(长度) size:大小(粗细) color:线的颜色 font 设置字体、颜色            、字号等 PS 在HTML5中已经不推荐使用 内联标签      ,没有换行功能 常用属性 color:字体颜色 size:字体大小 face:字体      ,如:宋体 b bold加粗                   ,与strong功能一样 i italic斜体 br 换行 p 每个p标签代表一个自然段 paragraph            ,前后有一定间隔      ,首行没有缩进 常用属性 title:用于鼠标移上去显示提示文字信息

5.2                   、有序列表和无序列表

ol-li(有序列表) type属性 1:数字列表                   ,默认值 a            ,A:字母列表,包含大小写 i                   ,I:罗马数字编号 ul-li(无序列表) type属性 disc:黑心圆                  ,默认样式 circle:空白圆 square:黑色正方体

5.3       、特殊字符

什么是特殊字符 在HTML中,像<> “ ’ 空格 & 都是特殊字符             ,它们是语法本身的一部分                  。 常用特殊字符 特殊字符格式 以&开头                  ,以分号结尾      ,如&nbsp;表示空格

5.4            、div和span

标签 作用 特点 span 容器             ,可以包裹其他内容 是内联标签                   ,不带换行功能      ,用于小范围的内容划分 div 容器      ,可以包裹其他内容 是块标签                   ,不带换行功能            ,用于小范围的内容的划分      ,通常网页布局使用div将网页分成不同块

5.5                  、HTML案例-公司介绍

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>公司简介</title> </head> <body> <!-- 需求分析: - 1.将文本素材内容放入其中 - 2.使用<h1>标签设置标题                   ,修饰“公司介绍             ” - 3.使用<hr>标签加入水平线 - 4.使用4个<p>标签加入水平线 - 5.使用&nbsp;设置第一个段落首行文本缩进6个空格 - 6.使用<font>标签            ,设置第一段“黑马程序员                   ”字体颜色为红色 - 7.使用<i> <b>标签,设置第一段“传智教育“斜体与加粗 - 8.使用<span>标签                   ,设置其他段      ”黑马程序员“字体颜色为红色 - 9.价格部分使用无序列表:ul-li - 10.使用<br>标签实现换行                  ,在最后一段公司与版权中间实现 - 11.设置最后一段样式:文本居中,字体大小14px             ,颜色gray - 12.使用版权特殊字符实现©显示 --> <div> <h1>公司介绍</h1> <hr size="5"/> <p> &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <font>黑马程序员</font><i><b>传智教育旗</b></i> 下的高端IT教育品牌                  ,现已开设JavaEE       、产品经理      、HTML&JS+前端                  、C/C++             、 新媒体+短视频直播运营      、Python+人工智能                  、大数据             、UI/UE设计、软件测试                  、Linux云计算+运维开发                   、 拍摄剪辑+短视频制作、智能机器人软件开发            、电商视觉运营设计等培训学科      ,直营分校遍布北京                   、 上海       、广州            、深圳                  、武汉       、郑州      、西安                  、长沙             、济南      、重庆                  、南京             、杭州、成都                  、石家庄                   、合肥、 太原            、厦门                   、沈阳       、天津等城市       。 </p> <p> <span>黑马程序员</span> 是传智教育旗下高端IT教育品牌             ,致力于服务各大软件企业                   ,解决当前软件开发技术飞速发展      ,而企业招不到优秀人才的困扰      。我们的价值观: <ul> <li>责任      ,对教学质量精益求精全心全意教授好每一位学生                  。</li> <li>务实                   ,诚信待人            ,高效做事      ,不弄虚作假脚踏实地做好本职工作             。</li> <li>创新                   ,勇于创新            ,在工作中不断突破,为学生提供更优质的教学资源与服务      。</li> <li>育人                   ,在传授学生知识和技能的同时                  ,言传身教,正面引导学生实现人生应有的价值追求                  。</li> </ul> </p> <p><span>黑马程序员</span> 不仅着重培养学员的基础理论知识             ,更注重培养项目实施管理能力                  ,并密切关注技术革新      ,不断引入先进的技术             ,研发更新技术课程                   , 确保学员进入企业后不仅能独立从事开发工作      ,更能给企业带来新的技术体系和理念             。 </p> <hr/> <center><font size="2">江苏传智播客教育科技股份有限公司版权所有Copyright&copy;2006-至今, All Rights Reserved 苏ICP备16007882 </font></center> </div> </body> </html>

5.6            、图像标签

img标签的作用

在网页中显示图片

img标签格式

<img src="https://www.cnblogs.com/OnlyOnYourself-lzw/p/%E5%9B%BE%E7%89%87%E6%96%87%E4%BB%B6%E8%B7%AF%E5%BE%84"/>

常用属性

img标签显示图片 作用 src 图片地址 width 宽度      ,如果只指定宽度                   ,高度会按等比例缩放 height 高度 alt 如果图片丢失            ,出现的替代文字

PS:src不能写绝对路径

audio:定义音频。(MP3                  、WAV       、OGG)

src:规定音频的URL controls:显示播放控件

video:定义音频格式:如MP4      、WebM                  、OGG

src:规定视频的URL controls:显示播放控件

5.7             、链接标签

链接标签的作用

跳转到其他页面

链接标签的格式

<a href="https://www.cnblogs.com/OnlyOnYourself-lzw/p/%E8%B7%B3%E8%BD%AC%E7%9A%84%E7%9B%AE%E7%9A%84%E5%9C%B0">内容</a> 标签名 作用 备注 a 超链接跳转页面功能 1.href属性      ,表示超链接跳转指向的url地址;2.target属性                   ,页面打开方式            ,_self表示当前页,_blank表示新标签页

小结

超链接标签跳转页面的功能 <a href="https://www.cnblogs.com/OnlyOnYourself-lzw/p/%E8%B7%B3%E8%BD%AC%E9%A1%B5%E9%9D%A2%E5%9C%B0%E5%9D%80">...</a> 超链接属性target的含义 表示设置跳转页面的打开方式 target="_self"表示在当前页面跳转 target="_blank"表示在新建标签页跳转

5.8      、表格标签

表格标签的作用

用来显示多条数据 用于一些页面的布局                   ,后期会使用div布局

表格布局其他标签与属性

标签名 作用 table 表格容器                  ,包含其他元素 tr 表示一行, table row th 列标题             ,加粗                  ,居中      ,table head td 普通单元格 caption 表格的标题 thead 在逻辑上将表格层分为三个部分:表格头部 tbody 在逻辑上将表格层分为三个部分:表格的主题(PS:如果没有写tbody             ,浏览器运行时会自动加上tbody) tfoot 在逻辑上将表格层分为三个部分:表格尾部 属性名 作用 width 表格宽度 border 外边框的粗细 align 对齐方式:用在table标签上是表示整个表格在父容器标签中居中;用在tr标签上表示表格这一行内容居中;用在td标签上表示这个单元格内容居中 rowspan 跨几行(将某几行融合为一行) colspan 跨几列(将某几列融合为一列) cellspacing 单元格之间的间距 cellpadding 单元格边框与内容之间的间距

5.9                  、表单标签

表单的作用

接收用户输入数据                   ,并提交数据给服务器

form表单格式

<form method="提交数据的方式" action="数据提交的目的地"> 手机数据标签 </form>

常用属性

form常用属性 作用 action 提交给服务器的地址 method 提交的方式

提交方法

提交方法 特点 GET 默认值      ,参数在地址栏显示 POST 参数不会显示      ,更加安全

注意事项

action 规定当提交表单的时候向何处发送表单数据                   , URL method:规定用于发送表单数据的方式 GET:浏览器会将数据直接附在表单的action URL 之后                  。大小有限制 POST:浏览器会将数据放到http请求消息体中            ,大小没有限制                   。 表单数据要想提交必须满足两个要求 1.必须使用form标签将表单项标签包起来 2.表单项标签必须要有name属性

6             、用户注册案例

用户注册案例显示效果 实现细节

创心域SEO版权声明:以上内容作者已申请原创保护,未经允许不得转载,侵权必究!授权事宜、对本内容有异议或投诉,敬请联系网站管理员,我们将尽快回复您,谢谢合作!

展开全文READ MORE
js回调函数带参数例子(JS中的 回调函数(callback))