0


前端三剑客之HTML入门教程

1. 认识HTML标签

HTML的代码是由“标签”构成的。

例如:

<body>hello</body> 

说明:

body为标签名,必须放在**<>**中

大部分标签都是成对出现,**<body>为开始标签,</body>为结束标签**

少数标签只有开始标签,称为单标签

开始标签与结束标签之间的内容为标签的内容,示例的内容为hello

开始标签中间可能会带有属性,id属性相当于给这个标签设置了一个唯一的标识符

例如:

 <body id="b1">hello</body>

2. HTML文件基本结构

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

说明:

html标签是整个html文件的根标签(最顶层标签)

head标签中写页面的属性,示例中的title标签为标题

body标签中写的是页面上显示的内容

2.1 运行一个HTML文件

我们可以选在在idea中或者在vscode中创建一个html文件,利用“!+ Tab”键可以快速生成代码框架,如下所示:

<!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>Document</title>
</head>
<body>

</body>
</html>

细节解释:(了解即可,不必做过于深刻研究)

· <!DOCTYPE html> 称为DTD(文档定义类型),描述当前文件是一个HTML5的文件

· <html lang="en"> 其中的long属性表示当前页面是一个“英文页面”

· <meta charset="UTF-8"> 描述页面字符的编码方式,没有这行可能会导致中文乱码

· <meta name="viewport" content="width=device-width, initial-scale=1.0">,其中viewport指的是设备屏幕上能用来显示我们网页的那一块区域,后面的是在设置可视区和设备宽度等宽,并设置初始缩放为不缩放。

我们可以在body中写内容,然后运行,我这里用的是VScode,直接右键按下,如图所示:

运行结果:

2.2 标签层次结构

· 父子关系 ·兄弟关系

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

说明:

head,body是html的子标签

title是head的子标签,head是title的父标签

head,body是兄弟标签

3. HTML的常见标签

注释标签

注释不会显示在界面上,目的是提高代码的可读性

<!-- 注释 -->

**快捷键:ctrl + / **可以快速进行注释与取消注释

标题标签:h1-h6

有6个,从h1-h6,数字越大,则字体越小

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

段落标签:p

 <p>床前明月光</p>
 <p>疑是地上霜</p>

注意:

p标签之间存在一个空隙

当前的p标签描述的段落没有缩进(后面学习css的时候会学习)

html内容首尾处的换行,空格均无效

在html中文字之间输入的多个空格只相当于一个空格

html中直接输入换行不会换行,而是相当于一个空格

换行标签:br

br是一个单标签

**
**是规范写法,不建议写成

    举头望明月
    <br/>
    低头思故乡

格式化标签

· 加粗:strong标签,b标签

· 倾斜:em标签,i标签

· 删除线:del标签,s标签

· 下划线:ins标签,u标签

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

使用css也可以完成类似效果,实际开发中以css方式为主

图片标签:img

img标签必须带有src属性,表示图片的路径

 <img src="xxx.jpg">

此时要把xxx.jpg这个图片文件放到html中的同级目录中

img标签的其他属性:

· alt:替换文本,当图片不能正确显示的时候,会显示一个替换的文字

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

· width/height:控制宽度高度,高度和宽度一般改一个就可以,另外一个会等比例缩放

· border:边框,参数是宽度的像素,一般用css'来设定

例如:

<img src="tiger.jpg" title="老虎" width="500px" border="5px">

注意:

多个属性之间用空格间隔

属性不分先后

属性使用键值对的格式来表示

超链接标签:a

href:必须具备,表示点击后就会跳转到哪个页面

target:打开方式,默认是_self,_blank会用新的标签页打开

例:

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

点击就会跳转到百度页面

· 空链接:使用#在href中占位

 <a href="#">空连接</a>

· 下载链接:href对应的路径是一个文件(可以使用zip文件)

 <a href="test.zip">下载文件</a>

· 网页元素链接:可以给图片等任何元素添加链接

<a href="http://www.baidu.com"><img src="tiger.jpg"></a>

· 锚点链接:可以快速定位到页面中的某个位置

    <a href="#one">第一集</a>
    <a href="#two">第二集</a>
    <a href="#three">第三集</a>
    <p id="one">
        111<br>
        222
    </p>
    <p id="two">
        333<br>
        444
    </p>
    <p id="three">
        555<br>
        666
    </p>

禁止a标签跳转: 或者

表格标签

· table标签:表示整个表格

· tr:表示表格的一行b

· td:表示一个单元格

· th:表示表头单元格,会居中加粗

· thread:表格的头部区域(注意和th区分,范围比th大)

· tboday:表格的主体区域

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

表格标签有一些属性,可以用于设置大小边框等,这些属性要放到table标签中

align:表格相对于周围元素的对齐方式(不是内部元素的对齐方式)

border:表示边框,1表示有边框(数字越大,边框越粗),“ ” 表示没有边框

cellpadding:内容距离边框的距离,默认1像素

cellspacing:单元格之间的距离,默认为2像素

width/height:设置尺寸

例:

 <table align="center" border="1" cellpadding="20" cellspacing="0"
     width="500px" heigth="500px">
        <tr>
            <th>姓名</th>
            <th>性别</th>
            <th>年龄</th>
        </tr>
        <tr>
            <td>小兰</td>
            <td>女</td>
            <td>18</td>
        </tr>
        <tr>
            <td>小花</td>
            <td>女</td>
            <td>19</td>
        </tr>
    </table>

列表标签

主要用来布局

· 无序列表:ul ,li

· 有序列表:ol ,li

· 自定义列表,dl(总标签),dt(小标题),dd(围绕标题来说明)

注意:

元素之间是并列关系

ul,ol标签中,只能放li标签,dl标签中只能放dt,dd

li中可以放其他标签

示例:

 <h3>无序列表</h3>
    <ul>
        <li>苹果</li>
        <li>香蕉</li>
        <li>橘子</li>
    </ul>
    <h3>有序列表</h3>
    <ol>
        <li>小学</li>
        <li>中学</li>
        <li>大学</li>
    </ol>
    <h3>自定义列表</h3>
    <dl>
        <dt>蔬菜:</dt>
        <dd>豆腐</dd>
        <dd>菠菜</dd>
        <dd>西红柿</dd>
    </dl>

表单标签

表单是让用户输入信息的重要途经

分成两个部分:

表单域:包含表单元素的区域,重点是form标签

表单控件:输入框,提交按钮,重点是input标签

form标签

 <form action="test.html">
        ...[form的内容]
 </form>

描述了要把数据按照什么格式,提交到哪个页面中,关于form需要结合服务器,网络编程,来进一步理解。

input标签

各种输入的控件,单行文本框,单选框,复选框

· type,取值种类:button,checkbox,text,file,image,password,password,radio

· name:给input起名字,对于单选框按钮,具有相同的name才能多选一

· value:input中的默认值

· checked:默认被选中(用于单选按钮,多选按钮)

· maxlength:设定最大长度

1. 文本框

 <input type="text">

2. 密码框

 <input type="password">

3. 单选框

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

4. 复选框

<input type="checkbox">吃饭
<input type="checkbox">睡觉
<input type="checkbox">打球
<input type="checkbox">跑步

5. 普通按钮

 <input type="button" value="按钮">

6. 提交按钮

    <form action="test.html">
        <input type="text" name="username">
        <input type="submit" value="提交">
    </form>

7. 清空按钮

 <form action="test.html">
        <input type="text" name="username">
        <input type="submit" value="提交">
        <input type="reset" value="清空">
    </form>

说明:当文本框输入内容时,点击清空即可清空文本框中输入的内容

8. 选择文件

 <input type="file">

说明:点击选择文件,即可从本地选择文件

label标签

搭配input使用,点击label也能选中对应的单选/复选框,能够提升用户体验

· for属性:指定当前label和哪个相同id的input标签对应

<label for="aaa">男</label>
<input id="aaa" type="radio" name="sex">
<label for="bbb">女</label>
<input id="bbb" type="radio" name="sex">

说明:这里点击汉字也可以选中,label标签就是用来实现这个功能的

select标签

下拉菜单

option中定义selected="selected"表示默认选中

     <select>
        <option>---请选择从哪里来---</option>
        <option>北京</option>
        <option selected="selected">上海</option>
        <option>厦门</option>
     </select>

textarea标签

   <textarea rows="3" cols="50">
        众鸟高飞尽
        孤云独去闲
        相看两不厌
   </textarea>

注意:文本域中的内容,就是默认内容,注意空格也会有影响

rows和cols代表行和列

无语义标签: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>

4. Emment常用快捷键

· 快捷输入标签:input[tab]

· 快捷输入多个标签:div3[tab]

· 标签带id:div#sex[tab]

· 标签带类名:div.sex[tab]

· 标签带子元素:ul>li*3[tab]

· 标签带兄弟元素:span+span

· 标签带内容:div{hello}

· 标签带内容带编号:div{$.hello}

5. HTML特殊字符

有些特殊的字符在html文件中是不能直接来表示的,例:

空格:&nbsp

小于号:&lt

大于号:&gt

按位与:&amp

  <div>&nbsp</div>
  <div>&lt</div>
  <div>&gt</div>
  <div>&amp</div>

6. 小结

HTML只是描述了页面的骨架结构

使用css可以针对页面进一步美化


本文转载自: https://blog.csdn.net/qq_58710208/article/details/123615985
版权归原作者 Java猿~ 所有, 如有侵权,请联系我们删除。

“前端三剑客之HTML入门教程”的评论:

还没有评论