HTML笔记

1、什么是HTML

超文本标记语言
    类似于文本的一种标记语言，并不是开发语言

2、有哪些编写工具

HBuilder、WebStorm、NotePad、Dreamweaver、VS Code

3、html文件的后缀是什么？

以.html或者.htm结尾的文件成为网页文件

4、HBuilder建立完项目之后每个东西是干什么的？

1、CSS   层叠样式表    用来对网页进行修饰
2、img   存储图片或者视频的文件夹
3、js    存储的是JavaScript文件  用来让页面呈现动态效果的

5、HTML文件中有哪些内容？

<!--声明这个文件是一个HTML5文件-->
<!DOCTYPE html>
<!--以<html>开头-->
<html>
    <!--head称为网页的头部   开始-->
    <head>
        <!--meta标签中写的是页面的元信息  属性  配置-->
        <meta charset="utf-8" />
        <!--title标签中写的标题的内容-->
        <title></title>
    </head>
    <!--头部结束-->
    <!--body标签成为网页的身体   身体部分开始-->
    <body>
    
    </body>
    <!--身体部分结束-->
<!--以</html>结尾-->
</html>

6、标签的分类？

标签分为两种标签中含有属性
1、单标签 <meta>
2、双标签 <head></head>

1、块级标签  块级元素  自己独占一行
2、行内标签

7、常见的文字标签

font是文字标签 size属性表示字体大小范围1~7 color属性表示字体颜色 face属性表示字体样式

<font size="7" color="pink" face="DOUYU Font">这是一个文字标签</font>

b、strong 两个都可以实现加粗的效果

<b>你看我粗不粗</b>
<strong>你别光看他，再看看我</strong>

i、em 两个都可以实现倾斜的效果

<i>虽然我喝酒了，但是我就歪一点</i>
<em>我也喝了，都说喝车不开酒</em>

u u可实现下划线的效果

<u>小船儿轻轻飘荡在水中</u>

del、s 这两个都可以实现删除线的效果

现价￥<del>100</del>101
只卖￥<s>999</s>888

span 没有任何意义的标签意义就在于没有任何意义通过id结合js和css从而实现动态效果

<span id="">我没有任何效果</span>

h h是标题标签 h1~h6 大->小标题标签自己独占一行

<h1>我是一级标题</h1>
<h6>我是第六级标题</h6>

8、常见的段落标签(块)

p p是一个段落标签和文章中的一个自然段效果一样 align(呃烂)属性用来设置水平对齐方式常见的属性值有 left左对齐 center居中 right右对齐

<p align="">我是一段文字，我和小说中的一段是一个效果</p>

pre 预格式化标签，将内容按照编写的格式显示出来

<pre>
            窗前明月光
                    疑是地上霜
                            举头望明月
                                    低头思故乡
</pre>

9、图片标签

img src是图片的地址/路径 width图片宽度 height图片高度 border边框厚度 title光标放上去的提示文字 alt图片加载不出来的提示

<img src="img/1.jpg" width="200px" height="100px" border="10" title="光标放上去的提示" alt="图片加载不出来的提示">

10、超链接

a href表示跳转的目标地址可以写互联网地址 http://www.xxx.com 也可以写项目内地址+文件名
target="_blank"表示在新的标签打开这个页面

<a href="跳转的目标地址">百度</a>

超链接中的锚点链接可以根据href中的属性值，找到要跳转的位置

<a href="#abc">跳转到最底部</a>
<p>我是段落文字1</p>
...
<p>我是段落文字100</p>
<span id="abc">我是最后一行</span>

11、表单标签

表单标签在页面中是不可见的用来做登录界面、注册界面、录入信息界面

<!-- 表单标签 form  action属性是目标地址  method提交方式get和post-->
<!-- get方式  保密性差  传输少量数据 
post方式 保密性高  传输大量数据-->
<form action="index.html" method="get">
    <!-- 输入标签 input  -->
    <!-- type属性text表示文本输入框 value表示默认值-->
    账户：<input type="text" value="" placeholder="请输入账户" name="name"/><br>
    <!-- type=password表示密码框 placeholder="提示文字"-->
    密码：<input type="password" value="" placeholder="请输入密码" name="password"/><br>
    <!-- type=radio表示单选框 name属性可以将两个单选框连接在一起  checked属性默认选中-->
    性别：<input type="radio" name="sex" checked/>男 <input type="radio" name="sex"/>女<br>
    <!-- type=checkbox表示多选框 -->
    爱好：<input type="checkbox" />LOL <input type="checkbox" />DNF <input type="checkbox" />CSGO<br>
    <!-- select标签  用来制作下拉列表 -->
    地址：<select>
    <!-- 列表中的选项使用option标签 默认显示第一个 selected表示默认选中-->
        <option value="">辽宁</option>
        <option>河北</option>
        <option>吉林</option>
        <option>黑龙江</option>
        <option selected>请选择地址</option>
    </select><br />
    <!-- type=file表示文件上传标签 -->
    上传：<input type="file" /><br>
    <!-- textarea表示多行文本域 -->
    说明：<textarea></textarea><br>
    <!-- 按钮 type=reset表示重置页面内容的一个按钮-->
    <input type="reset" value="重置" />
    <!-- type=button是一个没有任何意义的按钮，而他的意义就是没有任何意义  后期结合JavaScript实现效果 -->
    <input type="button" value="提交" />
    <!-- type=submit具有提交功能的按钮 -->
    <input type="submit" value="提交" />
    <!-- 表单中的隐藏域 type=hidden  看不见但是具体是存在的-->
    <input type="hidden" />
</form>

12、水平线

hr水平线 size表示垂直高度 width水平宽度 color颜色

<hr size="20px" color="pink" width="600px" />

2021-08-03