Web学习第一天：HTML

其他 2019-02-22 11:41:12 阅读次数: 0
版权声明：斌哥版权，如有雷同，纯属虚构 https://blog.csdn.net/iostream992/article/details/85016057

 

html的简介

1、什么是HTML

HyperText Markup Language

超文本标记语言，网页语言

*超文本：超出文本范畴,html轻松实现

*标记：html所有操作通过标记来实现，标记就是标签<标签名称>

*网页语言：

第一个HTML程序  后缀为.html

<font size="5" color="red">第一个html</fond>

HTML固定的规范（5个）

1、一个html文件开始的标签和结束的标签<html></html>

      java里定义一个Java方法  {  }

   

2、html包含两部分内容

（1）<head>设置相关信息</head>

   (2）<body>显示页面上的内容都写在body里面</body>

3、html的标签有开始标签也有结束标签

    <head></head>

4、html代码不区分大小写

5、有些标签没有结束标签

比如：换行<br/>在标签内结束

                 <hr/>一条水平线

 

 

 

HTML的操作思想（理解）

网页中有很多数据，不同数据可能需要不同的效果

通过修改标签的属性值实现修改标签样式的变化

一个标签相当于一个容器，想要修改容器内数据的样式只需要改变容器的属性值就可以实现容器内数据样式的变化

 

HTML中常用的标签

1、文字标签和注释标签

     文字标签：修改文字样式的标签

    <fond></fond>

    属性：

    -size:文字大小 取值1-7 超过7取7

    -color:文字颜色

      两种表达方式：

    英文单词：red、green、blue

      使用16进制表示 #ffffff：RGB

     通过工具实现不同的颜色

 

     注释标签

java注释有几种？3

html的注释：<!--html的注释-->

 

 

2、标题标签、水平线标签、特殊字符

标题标签：

<h1>标题一</h1>

<h2>标题二</h2>

<h3>标题三</h3>

<h6>标题六</h6>

h1到h6字体不断变小，而且自动换行

 

 

水平线标签：

</hr>

属性： size：1-7

           color：

<hr size="4" color="red"/>

 

特殊字符

-想要在页面上显示 <html>:x  xx

-想要对特殊字符进行转移

<  &lt ；

>  &gt ；

空格   &nbsp；

&    &amp

<fond>&lt；html&gt；x&nbsp：&nbsp；xx</fond>

 

3、列表标签

-比如显示这样子的效果

 邹泽斌

     aaaaa

     bbbbb

<dl></dl>表示列表的范围

<dt></dt>上层结构

<dd></dd>下层内容

代码：

<dl>

        <dt>邹泽斌</dt>

        <dd>aaaaa</dd>

            <dd>bbbbb</dd>

</dl>

 

 

想要表示以下效果

1.aaa

2.bbb

3.ccc

 

a.aaa

b.bbb

c.ccc

 

i.aaa

ii.bbb

iii.ccc

 

<ol><ol>:有序列表的范围

属性：type：设置为1（默认） a   i

在ol标签里面<li>具体内容</li>

<ol type="1">

<li>aaa</li>

<li>bbb</li>

<li>ccc</li>

</ol>

<ol type="a">

<li>aaa</li>

<li>bbb</li>

<li>ccc</li>

</ol>

 

<ol type="i">

<li>aaa</li>

<li>bbb</li>

<li>ccc</li>

</ol>

 

快捷键：向前移动shift+tab    向后移动tab键

 

 

想要在页面上显示这样的效果

特殊符号（方框）aa

<ul></ul>:表示无序列表的范围

属性：type：空心圆circle 实心圆disc 实心方块square

<ul type="circle">

<li>aaa</li>

<li>bbb</li>

<li>ccc</li>

</ul>

 

 

4、图像标签（很重要）

 

<img src="图片的路径"/>

属性：src图片的路径

          width：图片的宽度

height：图片的高度

alt：图片上显示文字，把鼠标移到图片上，停留片刻

 

5、路径的介绍

分类：两类

绝对路径

相对路径

一个文件相对于另外一个文件的位置

三种写法：

1、html文件和图片在一个路径，直接写文件名称

2、在HTML文件中，使用img文件下的a.jpg

在HTML中使用图片4.HTML和img在同一个路径中

img\a.jpg

 

 

3、图片在HTML文件的上层目录

html文件所在目录和图片是一个目录

图片和HTML文件是什么关系？

图片在HTML所在目录的上层目录 day01

怎么表示上层目录？../

../:day 01

../c.png

 

想要表示上层的上层 ../../

 

6、超链接标签

链接资源（重点）

   <a href="链接到的路径">显示在页面上的内容"></a>

   **href:链接资源的地址：

  **target：设置打开的方式，默认是在当前页打开

       _blank:在一个新窗口打开

      _self:在当前页打开，默认

当超链不需要到任何的地址，只需要在href加一个#号

定位资源

  如果我想要定位一个资源：

定义一个位置

<a name="top">顶部</a>

回到这个位置

<a href="#top">回到顶部</a>

   引入一个标签：原样输出标签 <pre></pre>

  代码：

<a name="top">顶部</a>

<pre>

内容

</pre>

<a href="#top">回到顶部</a>

 

 

 

7、表格标签（重要）

可以对数据进行格式化，使数据显示更加清晰

<table></table>:表示表格的范围

在table里面<tr></tr>

设置显示方式 align left center right

在tr里面     <td></td>

设置显示方式 align left center right

使用th也可以表示单元格（居中加粗）

表格的标题

<caption></caption>

 

 

 

   首先定义一个表格的范围使用table

   定义一行使用tr

   定义一个单元格使用td

操作技巧：

首先数有多少行，数每行里面有多少个单元格

 

合并单元格

rowspan：跨行

colspan：跨列

<td colspan="3">人员信息</td>

 

 

 

8、表单标签（最重要）

可以提交数据到开心玩规定服务器，这个过程可以用表单标签实现

<form></form>:定义一个表单范围

-属性

action：提交到地址，默认提交到当前页面

method：表单的提交方式

常用的有两种 get和post，默认get请求

get：把数据直接显示出来

post：地址栏信息不会显示

 

一个笔试题目：

get和post的区别？

1、get请求地址栏会携带提交的数据，post不会带（请求体里，第7天http协议的时候）

2、get请求的安全级别较低，post较高

3、get请求有数据大小的限制，post没有限制

 

enctype：一般情况下不需要这个属性，在做文件上传时候需要设置这个属性（第22天的时候讲）

 

输入项：可以输入内容或者选择内容的部分

 

****在输入项里面要有一个name属性表单才能提交

大部分输入项使用 <input type="输入项类型"/>

普通输入项<input type="text"/>

密码输入项<input type="password"/>

单选输入项<input type="radio"/>

-在这里面要给一个name属性

-name的属性值必须要相同

-必须要有一个value值

 

单选/多选实现默认选中的属性

-checked=“checked”

下拉选框默认选中

selected="selected"

-表示单选框

复选输入项：<input type="checkbox"/>

-在这里面要给一个name属性

-name的属性值必须要相同

-必须要有一个value值

 

 文件输入项：<input type="file"/>

文件上上传时用到

下拉输入项：（不是在input标签里）

<select name="birth">

           <option value="0">请选择</option>

<option value="1991">1991</option>

<option value="1992">1992</option>

<option value="1993">1993</option>

</select>  

          文本域：<textarea cols="10" rows="10"></textarea> 

          隐藏项：（不会显示在页面上，但是会存在html里面）

  提交按钮：<input type="submit" />

   <input type="submit" value="注册"/>

当全部都写了name属性的时候

问号表示后面带参数

参数之间用&隔开

参数用键值对形式进行传递

                 单选复选value加上的时候

        ?输入项name的值=输入的值&

       

         使用图片提交

<input type="imge" src="图片路径"/>

 

重置效果:回到初始状态

<input type="reset"/>

 

普通按钮(会和js一起使用)鼠标点击事件

<input type="button" value=""/>

 

 

9、案例  完成

案例代码：

 

10、html中其他标签的使用

i：斜体

b:加粗

s:删除线

u:下划线

pre：原样输出

hr:水平线

sub：下标

sup：上标（可以表示几次方）

===css常用

div：自动换行

div的应用场景：上下

span：不换行，在一行进行显示

 span的应用场景：左右

 p：段落标签 比br标签多一行

 

 

11、html头标签的使用

html两部分组成head、body

head里面的标签就叫头标签

title：表示在标签上显示的内容

<meta>标签

<meta name="keywords" content="詹姆斯、科比">

早期搜索引擎的用法

3秒钟后跳转，实现页面的定时跳转 几秒跳转;跳转的路径

base标签：设置超链接的基本设置

<base target="_blank"/>打开方式统一（建立新的页面打开）

Link标签：引入外部文件

明天css中，可以使用link标签引入css文件

 

12、框架标签（会用就行）

很少用，一般用div

 

<frameset>

-rows:按照行进行划分

<frameset rows="80,*">

-cols：按照列进行划分

<frameset cols="80,*">

<frame>

-具体显示的页面

-<frame name="loswer_left" src="b.html">

框架标签不能写在body里面

 

 

13、

 

 

14、

 

 

 

 

 

14:37-18:00 19:00-21:37一共六个小时，感觉学到了很多

猜你喜欢

转载自blog.csdn.net/iostream992/article/details/85016057
今日推荐
openKylin 社区生态委员会第六次会议圆满召开
阿里云正式发布通义千问 2.5
Python 3.13 发布首个 Beta：实验性自由线程模式和 JIT、改进交互式解释器
Stack Overflow 拿我的代码去训练 AI 大模型，还封了我的账号
Pop!_OS 的 COSMIC 桌面完成 App Store 上架工作
报告：Django 仍然是 74% 开发者的首选
《2024 年一季度互联网投融资运行情况》研究报告
15 年前上了“FFmpeg 耻辱柱”，今天他还得谢谢咱——腾讯QQPlayer一雪前耻？
TIOBE 5 月榜单：Fortran “复活”进入 Top 10
GCC 14.1 发布
面壁智能发布 Eurux-8x22B 开源大模型 —— 堪称「理科状元」
开源日报 | 谷歌扶持鸿蒙上位；开源Rabbit R1；Docker加持的安卓手机；微软的焦虑和野心；海尔电器把开放平台关了
周排行
计算机组成与设计（七）—— 除法器
Integer Approximation(分治+枚举)
大话数据库索引
windows10系统JDK的配置及下载地址
mysql实现秒值转换中原六仔平台搭建
Codeforces Round #556 (Div. 1)
百练1064 网线主管
Codeforces 995F Cowmpany Cowmpensation
子集生成之增量构造法，位向量法，二进制法
ERROR: cmd.exe failed with args /c "/APK\gradle\rungradle.bat...
每日归档
更多
2024-05-10(38)
2024-05-09(35)
2024-05-08(42)
2024-05-07(14)
2024-05-06(40)
2024-05-05(0)
2024-05-04(7)
2024-05-03(19)
2024-05-02(0)
2024-05-01(4)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022