HTML基础学习

x33g5p2x  于2022-04-17 转载在 其他  
字(11.1k)|赞(0)|评价(0)|浏览(354)

一、HTML结构

1.认识HTML标签

HTML 代码是由 “标签” 构成的,在HTML中,对标签的叫法还有“元素”。每个标签可以视为一个对象,这些对象也可以包含一些属性和方法,然后就可以在JS 中来访问或者修改这里的属性,或者调用其中的方法。

这些对象,都是通过浏览器在解析html的时候自动创建的,咱们可以通过JS 就能操作这些对象了。还能使用 JS 新增对象,删除对象,修改对象。

形如:

<body>hello</body>
  • 标签名 (body) 放到 < > 中
  • 大部分标签成对出现. < body > 为开始标签, < /body> 为结束标签.
  • 少数标签只有开始标签, 称为 “单标签”.
  • 开始标签和结束标签之间, 写的是标签的内容. (hello)
  • 开始标签中可能会带有 “属性”. id 属性相当于给这个标签设置了一个唯一的标识符(身份证号码).同一个HTML 里面不能有两个id相同的标签。
<body id="myId">hello</body>

2.HTML 文件基本结构

<html>
    <head>
        <title>第一个页面</title>
    </head>
    <body>
       hello world
    </body>
</html>
  • html 标签是整个 html 文件的根标签(最顶层标签)
  • head 标签中写页面的属性.
  • body 标签中写的是页面上显示的内容
  • title 标签中写的是页面的标题.

3.标签层次结构

父子关系和兄弟关系

<html>
    <head>
        <title>第一个页面</title>
    </head>
    <body>
       hello world
    </body>
</html>

其中:

  • head 和 body 是 html 的子标签(html 就是 head 和 body 的父标签)
  • title 是 head 的子标签. head 是 title 的父标签.
  • head 和 body 之间是兄弟关系.

标签之间的结构关系, 构成了一个 DOM 树,DOM 是 Document Object Mode (文档对象模型) 的缩写

4. 快速生成代码框架和利用开发者工具看

在VS code中输入一个 ! ,再按一个回车键,就会自动生成代码的主体框架。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
</body>
</html>

细节解释:

二、写HTML的编译器

方式有两种,在idea上写,不过一定是专业版才可以。因此可以使用VS code,也可以使用记事本。
使用记事本是:先创建一个记事本,后缀改为html,之后再创建一个记事本,将html文件拖进该记事本中,再在记事本中写html即可。
但一般都是使用VS code。

在HTML中,代码的换行/空格 一般对于页面的显示效果是没有影响的。一个元素是否独占一行,这是一个专门的属性。

三、HTML常见标签

HTML里面的大部分标签都是包含“语义”的,不同的标签代表不同的含义,有不同的用途。

1. 注释标签

注释不会显示在界面上,目的是提高代码的可读性,但是,在按F12看源码时能够看到注释,并不会在编译时期把注释去掉。通过 ctrl+/ 快捷键来注释。HTML的注释标签是不能嵌套的

有人会问,如果按F12看到了源码,那不是很容易被人抄走了?这个的确存在,但是在 JS 中会采用一些“代码混淆” 的方式来一定程度地解决这个问题,保证在代码逻辑不变的基础上,把代码的可读性尽量破坏掉。(如:把缩进、空格、换行等能去掉的去掉,把变量名换成a,b,c等)

<!-- 我是注释 -->

2. 标题标签: h1-h6

有六个, 从 h1 - h6. 数字越大, 则字体越小。当前我们看到这些标题的显示效果,在不同的浏览器上,可能存在细节的差别(当前应用的是浏览器的默认样式,不同的浏览器可能会有默认值)。

<h1>hello</h1>
<h2>hello</h2>
<h3>hello</h3>
<h4>hello</h4>
<h5>hello</h5>
<h6>hello</h6>

看到一级标题的CSS格式,即使是一级标题和二级标题写在同一行,显示的效果不会是同一行,这个就是由里面的 display 来决定的。

3. 段落标签: p

把一段比较长的文本粘贴到 html 中, 会发现并没有分成段落,而是连在了一起。
使用p标签就能够将长文本进行换行

可以通过lorem 这样的方式构造出一个随机的长文本出来。
使用p标签的效果:内容不用管

段落和段落之间存在一定的间距,这个间距主要是为了区分段落和段落。这个间距,不同的浏览器不一样,这个可以通过CSS 来控制。

注意:

  • p 标签之间存在一个空隙
  • 当前的 p 标签描述的段落, 前面还没有缩进.
  • 自动根据浏览器宽度来决定排版.
  • html 内容首尾处的换行, 空格均无效.
  • 在 html 中文字之间输入的多个空格只相当于一个空格.

4. 换行标签: br

br 是 break 的缩写. 表示换行。
注:

  • br 是一个单标签(不需要结束标签)
  • br 标签不像 p 标签那样带有一个很大的空隙.
  • < br/> 是规范写法. 不建议写成 < br>

5. 格式化标签

加粗: strong 标签 和 b 标签
倾斜: em 标签 和 i 标签
删除线: del 标签 和 s 标签
下划线: ins 标签 和 u 标签

<strong>strong 加粗</strong>
<b>b 加粗</b>
<em>倾斜</em>
<i>倾斜</i>
<del>删除线</del>
<s>删除线</s>
<ins>下划线</ins>
<u>下划线</u>

效果:

注:这几个格式化标签,不是独占一行的,如果想换行,就需要< br/>。这几种效果其实都可以使用CSS 来实现的,并且实际开发中还是用 CSS 来实现这些功能。

6. 图片标签: img

img 标签必须带有 src 属性. 表示图片的路径。它也是一个单标签。
这个路径可以是一个 本地 路径(要看图片和html之间的目录的相对关系),也可以是一个 网络路径(即网络上的图片,这个可以去看它的源码去指到该图片拿到地址)

这个 rose.jpg 这个图片文件放到和 html 中的同级目录中才能这样使用

<img src="rose.jpg">

如果 test.html 没在一个文件夹中,若而 rose.jpg 放在一个image文件夹里面,则只能这样使用

<img src="image/rose.jpg">

如果 test.html 在一个 test 文件夹中,若而 rose.jpg 放在一个image文件夹里面,则只能这样使用:

<img src="../rose.jpg">

img 标签的其他属性:

alt属性表示,如果图片挂了,显示这个文字,表示这个图片曾经来过

<img src="../rose.jpg",alt:"我是一个logo">

效果:

title: 提示文本. 鼠标放到图片上, 就会有提示.

<img src="../rose.jpg",alt:"我是一个logo",title="这是我的壁纸">

效果:

width/height: 控制宽度高度. 高度和宽度一般改一个就行, 另外一个会等比例缩放. 否则就会图片失衡
单位叫 px ,就是所谓的像素。

<img src="../rose.jpg",alt:"我是一个logo",title="这是我的壁纸",weight="500px",height="400px">

效果:

border: 边框, 参数是宽度的像素. 但是一般使用 CSS 来设定.

<img src="../rose.jpg",alt:"我是一个logo",title="这是我的壁纸",weight="500px",height="400px",border="10px">

效果:

注:border可能会标红,但是并不是错误!!!,并且image标签不是独占一行的。

7. 超链接标签: a

  • href: 必须具备, 表示点击后会跳转到哪个页面.
  • target: 打开方式. 默认是 _self. 如果是 _blank 则用新的标签页打开.
<a href="http://www.baidu.com">百度</a>

效果:点进去就是百度首页

注:href属性特别重要,是必须要有的。并且标签的内容也很关键,如果是<a href="http://www.baidu.com"></a>没有了百度两字,那么按F12去指该代码时就会出现:(标签的尺寸是0x0个像素)

是根本点不了的,因此需要有内容把它撑开。
我们发现上面的a标签,点完链接后是在本窗口跳转。如果要用新窗口去跳转,就涉及到target标签。

a标签里面的 target属性:
target属性描述跳转的过程具体是否要替换原来的标签页。默认就是替换,如果想新开一个标签页,可以使用target=“_blank”来实现。

<a href="http://www.baidu.com" target="_blank">百度</a>

效果:

a 标签这里的链接地址,可以有多种不同的写法:
1.直接写一个完整的 url (外面的网站)
2.也可以写一个相对路径
3.写作 # ,表示不跳转
4.下载文件,写文件的路径即可
5.锚点链接:可以快速定位到页面中的某个位置

8. 表格标签

基本使用:

  • table 标签: 表示整个表格
  • tr: 表示表格的一行
  • td: 表示一个单元格
  • th: 表示表头单元格. 会居中加粗
  • thead: 表格的头部区域(注意和 th 区分, 范围是比 th 要大的)
  • tbody: 表格得到主体区域

table 包含 tr , tr 包含 td 或者 th.

如:

<!-- 创建一个表格 -->
        <tr>
            <th>姓名</th>
            <th>性别</th>
            <th>年龄</th>
        </tr>
        <tr>
            <td>张三</td>
            <td>男</td>
            <td>20</td>
        </tr>
        <tr>
            <td>李四</td>
            <td>女</td>
            <td>19</td>
        </tr>
    </table>

效果及解释:

这个看着根本就不像表格,可以将其放大并且加上表格。添加属性width、height、border,单位都是像素 px 。
代码:

<!-- 创建一个表格 -->
    <table width="500px" height="300px" border="1px">
        <tr>
            <th>姓名</th>
            <th>性别</th>
            <th>年龄</th>
        </tr>
        <tr>
            <td>张三</td>
            <td>男</td>
            <td>20</td>
        </tr>
        <tr>
            <td>李四</td>
            <td>女</td>
            <td>19</td>
        </tr>
    </table>

效果:仔细发现,td和table都有边框,因此就有两层的边框,很丑。

因此可以作调整,使用 cellspacing 属性控制两个单元格之间的空隙,把这个空隙设为0即可:
注:如果在设置属性的时候,如果设为0,则不用写单位

<!-- 创建一个表格 -->
     <table width="500px" height="300px" border="1px" cellspacing="0">
        <tr>
            <th>姓名</th>
            <th>性别</th>
            <th>年龄</th>
        </tr>
        <tr>
            <td>张三</td>
            <td>男</td>
            <td>20</td>
        </tr>
        <tr>
            <td>李四</td>
            <td>女</td>
            <td>19</td>
        </tr>
    </table>

效果:

这些表格如果没有设置,则都是出现在左上角的,因此要想让表格居中,则添加 allign属性,如:allign=“center” 。如果是让th居中,则只能使用CSS 来实现了。
如:

table标签,除了表格以外,还可以用来进行“网页布局”,即可以规定什么东西是放在哪里的操作,靠表格的基本关系来完成布局

9. 列表标签

主要使用来布局的,为了整齐好看。l是list的意思,li里面的i指的是item
无序列表标签[重要] ul(整个无序列表标签unorder) , li (列表项,一个列表中包含多个表项)
有序列表标签[用的不多] ol(整个有序列表order) ,li (列表项,一个列表中包含多个表项)
自定义列表[用的不多] dl (总标签) dt (小标题) dd (标题里的内容)

如:

<!-- 有序列表 -->
    <ol>
        <li>吃饭</li>
        <li>睡觉</li>
        <li>打豆豆</li>
    </ol> 
    <!-- 无序列表 -->
     <ul>
        <li>吃饭</li>
        <li>睡觉</li>
        <li>打豆豆</li>
    </ul> 
        <!-- 自定义列表 -->
    <dl>
        <dt>我要干啥</dt>
        <dd>吃饭</dd>
        <dd>睡觉</dd>
        <dd>打豆豆</dd>
    </dl>

效果:

我们在网页中看到并列的,基本上都是用的 ul 标签,如:

10. 表单标签

表单就相当于让用户“填表”,注意:此处的填表,不一定是一个“表格”,就是让用户输入一些信息。
通过表单,就可以让用户和服务器之间进行一些简单的交互

表单标签是由好几个标签组成的,统称为表单。

  • form标签:表示整个表单
  • input标签:能够表示一些具体的输入控件,如:输入框、提交按钮、上传文件按钮。
  • textarea标签:表示一个多行文本框。

form标签里面的 action 属性:表示用户输入的数据最终要提交谁(哪个服务器)。写一个具体的 url (服务器的地址)
如果只放一个 form 标签,就什么都不显示<form action=""></form>因此要搭配其它标签来使用

input标签:表示各种用来输入的控件。”控件“这个词来源于”图形化界面“开发方式中涉及到的术语。简单来说,一个按钮 就是一个控件;一个文本框 就是一个控件;一个单选框、复选框 也都是控件(表示一个图形界面的基本元素,就可以称为是控件)。

10.1 input标签

input标签最核心的属性,叫做 type 。type 不同的取值,就表示不同的控件类型。注:input标签在form内部使用。它是一个单标签。
1.单行文本框,这是最基本的文本框,只能保存一行的内容,不能换行。

<input type="text">

效果:

2.密码框。这里输入的东西都变成小圆点。
注:如果在一个网页默认保存了密码,但是我们又忘记了密码,就可以使用chrome 的开发者工具,把input 的type 改为 text,就能看到里面的内容

<input type="password">

效果:

3.单选框
往往需要把多个 input type=“radio” 关联起来,才能达到 ”N选1“ 的效果。
通过name属性,把多个单选框关联起来。如果多个单选框的 name 相同,那么就只能取其中的一个

<input type="radio" name="gender">男
<input type="radio" name="gender">女

效果:

input 里面的checked 属性,它用来表示默认被选中的值。
代码:

<input type="radio" name="gender" checked="checked">男
<input type="radio" name="gender">女

一打开就是:

注:如果上面那两个input 标签都设置为checked,即使不科学编译器也不会报错。因为HTML 和 Java 的容错上有很大的区别。Java 对于语法错误是非常严谨的,并且也能规避一些逻辑上的错误。但HTML 就管的比较宽松。

4.复选框
可以选择多个选项。

<input type="checkbox">吃饭
<br/>
<input type="checkbox">睡觉
<br/>
<input type="checkbox">打豆豆

效果:

5.普通按钮

<input type="button" value="这是一个按钮" onclick="alert('hello')">

效果图:

6.提交按钮
提交按钮就是把当前表单里的用户输入数据,包装成一个 HTTP 请求,发送给服务器。

<input type="submit" value="提交">

假如 form标签里面的action 属性没有写,那么按这个提交键是没用的。如果action 属性中写了一个具体的地址,按了就会跳转到该地址。

如:

<form action="https:/www.baidu.com">
   <input type="text" name="key">
   <br/>
   <input type="submit" value="提交">
</form>

效果图:

提交后,跳转到百度首页,此时跳转的百度跟之前的不一样。

key就是在input里面设定的文本框的name 为key,abcd 是用户输入的信息,就是在上面的文本框中输入的信息。

7.清空按钮
把表单中当前用户输入的内容去掉。
代码:

<input type="text" name="key">
<br/>
<input type="submit" value="提交">
<input type="reset" value="清空">

效果图:

  1. 选择文件
    一般在上传文件的时候会用到。
    代码:
<input type="file">

效果:未选前是左上角,选了一个文件后是 左下角。
实际上没有上传到文件,只是选中了文件。因为 上传文件 过程中,浏览器具体给服务器发送了什么请求、服务器中该如何处理,解析这个请求、以及如何提取出文件的内容。servelet会详细说明,请看后续博客。

10.2 lable标签

一般搭配 input 使用,具体来说,是搭配 单选框 和 多选框 来使用。
我们之前知道了,单选的按钮点中按钮才能选中,这是没毛病的。
如:

<input type="radio" name="gender">男
        <input type="radio" name="gender">女
        <input type="radio" name="gender">未知

但是如果按钮过小,用户就不容易点中,因此可以设置为点中内容 也可以选择

lable里面有个 for 属性,它表示当前的 lable 要和哪个 input 标签 关联起来。这里就需要给对应的 input 标签起一个唯一身份标识(id)
因此有:

<input type="radio" name="gender" id="male"><label for="male">男</label>
<input type="radio" name="gender" id="female"><label for="female>女</label>
<input type="radio" name="gender" id="unknown"><label for="unknown">未知</label>

10.3 select标签

它是一个下拉菜单。select 是下拉菜单本身,它还要有选项,里面的选项是一个一个的opiton 标签。它不是嵌套于input 标签里面的
代码:

<select>
    <option>北京</option>
    <option>上海</option>
    <option>深圳</option>
    <option>广州</option>
    <option>杭州</option>
</select>

效果:

如果要设置默认的就是哪个选项,可以添加 selected 属性来制定。如果没有制定,就还是默认选第一项
代码:

<select>
    <option>北京</option>
    <option selected="selected">上海</option>
    <option>深圳</option>
    <option>广州</option>
    <option>杭州</option>
</select>

效果:

具体场景也可以通过在默认选项中补充选择的信息:
如:

<select>
        <option>--选择你的出生年份--</option>
        <option>1999</option>
        <option>2000</option>
        <option>2001</option>
        <option>2002</option>
</select>

效果:

10.4 textarea 标签

多行编辑框。像input里面的type属性为text 的时候,是一行的,往往不够用。而textarea标签就很好地解决了这一问题。
一个屏幕最多显示10 行,超过10行就会出现滚动条去滚。并且这个多行编辑器的有下角是可以拖动,来设置大小。

代码:

<textarea cols="30" rows="10"></textarea>

效果:

四、无语义标签

div和 span 就是无语义标签,无语义标签就是啥都可以干。
现在很多的网站,往往只用一个div 就够了(大部分标签都可以被div 和 span 标签来代替)

div可以视为是一个独占一行的”大盒子“,而span 可以视为一个不独占一行的”小盒子“,盒子里面又可以装其他的标签,或者盒子里面也可以再装盒子。

如果要表示的某个内容,在HTML 里有合适的标签来表示(标题,就可以使用h1-6 的标签)。如果没有合适的标签,就都可以使用div 或 span 。甚至于在极端情况下,整个页面都是 div 和span ,也不是不可以。

代码:

<div>
    <span>咬人猫</span>
    <span>咬人猫</span>
    <span>咬人猫</span>
</div>
<div>
    <span>兔总裁</span>
    <span>兔总裁</span>
    <span>兔总裁</span>
</div>
<div>
    <span>阿叶君</span>
    <span>阿叶君</span>
    <span>阿叶君</span>
</div>

效果:

相关文章