前端之HTML

最新推荐文章于 2024-04-11 09:24:40 发布

栋zzzz

最新推荐文章于 2024-04-11 09:24:40 发布

阅读量2.1k

点赞数 38

分类专栏：前端文章标签： html

本文链接：https://blog.csdn.net/qq_58266033/article/details/124437531

版权

前端专栏收录该内容

4 篇文章 7 订阅

订阅专栏

本篇内容主要还是一些比较基础的内容,了解就好了, 当前最主流的实现前端的方案就是我们平常所见到前端三剑客(HTML,CSS,JS)(其实我们的Java刚开始也是做前端的),那么今天我们就来聊一聊HTML!!

首先介绍一下HTML本身HTML本身的语法是比较简单的,其并不能表达一些逻辑,而只是能表达"有什么东西"这样一种信息

第一份HTML代码

简单写一个HTML代码:可以直接在一个记事本里面写一行hello,然后将这个文件后缀改成.html就是可以执行的(而且执行也不需要什么额外的运行环境,只要有浏览器就是可以运行的)

这就算执行结束了,但是这个并不是一个正确的html代码,而一个合法的html是使用标签结构(开始标签和结束标签都是成对出现的,标签之间是可以嵌套的,整体这些标签就构成了一个树形结构,称为DOM树)来写的类似于这样的,就算是一个合法的html代码效果是和上面一样的,上面错误的代码之所以能运行就是因为浏览器的鲁棒性(更准确的就是容错能力)很强!!

HTML的编译器使用

上面是使用记事本写的,显然记事本本就不是写代码的地方,那么我们可以在其他地方写html代码吗?当然是可以的,一个是可以直接使用IDEA来写这个代码,但是我们通常所用的社区版IDEA是只支持HTML的,不支持其他代码的,不会有高亮和提示等一系列快捷方式,这也就和记事本差不多了,因此我更推荐使用另一个编译器来写前端代码就是VSCode,这个就是专门来写前端代码的而且不需要任何额外的插件,就可以很好的执行前端代码了,而具体的操作就是在VSCode里面写好代码之后进行保存,然后直接打开保存好的文件就可以直接运行了

HTML基本语法

注释:

HTML的标签是和其他语言的注释不一样的,这是标签类的,因此也是使用标签来进行注释的,另外需要注意的是这个注释是不可以嵌套使用的

标题:

有六种标题,从h1-h6字体会逐渐变小
    <h1>标题</h1>
    <h2>标题</h2>
    <h3>标题</h3>
    <h4>标题</h4>
    <h5>标题</h5>
    <h6>标题</h6>
这样写就会出现这样的效果,一般比较常用的标题是h3或者h4!!

段落:

p就是段落标签,两个段落之间是段间距的
    <p>这是一个段落:Lorem ipsum dolor sit amet consectetur adipisicing elit. Perferendis aut quasi aspernatur nulla tenetur et, consectetur deleniti esse, illum in minus? Et explicabo numquam minima quaerat, quis quam vitae dolorem!</p>
    <p>这是二个段落:Lorem ipsum dolor sit amet consectetur adipisicing elit. Quos rem minima voluptatem, exercitationem velit aperiam at odit hic, cum delectus voluptate necessitatibus alias ullam atque reprehenderit? Eum quos illo distinctio!</p>
    <p>这是三个段落:Lorem ipsum, dolor sit amet consectetur adipisicing elit. Quidem commodi quo temporibus beatae animi. Nemo accusantium cupiditate soluta, dolorem distinctio officia, at quae voluptas dolore esse velit labore eligendi hic.</p>
    <p>这是四个段落:Lorem ipsum dolor sit amet consectetur adipisicing elit. Doloribus dolor ipsa velit in tenetur possimus, neque est non tempora. Architecto consequuntur voluptates reprehenderit, est repellendus libero odio incidunt provident iusto.</p>
另外使用lorem是可以生成随机的一段字符串的,这个可以为后面的调试起到一定作用,这就是呈现出来的效果,每个段落之前都是有间距的,另外如果想让每个段落开头都有两个字的空格的话就需要使用CSS才能表现出来,这里先暂不做介绍了

换行:

在HTML里面你在代码写的换行是不会被执行的,是会被主动忽略的,因此如果想要换行的话就需要单独加一个br标签,才能真正实现换行这是没有写换行的,
    <p>这是一个段落Lorem ipsum dolor sit amet consectetur adipisicing elit. <br>Quos rem minima voluptatem, exercitationem velit aperiam at odit hic,<br> cum delectus voluptate necessitatibus alias ullam atque reprehenderit? Eum quos illo distinctio!</p>
加上换行之后就可以呈现

就可以是实现换行了,这点也是需要注意的

转义字符:

单引号('):'双引号("): "小于号(<):<大于号(>):>与(&):&空格( ) : 这些特殊的字符都是需要转移之后才是可以使用的,
    <p>这是一个段落,Lorem                          ipsum dolor sit amet consectetur adipisicing  elit. Perferendis aut quasi aspernatur nulla tenetur et, consectetur deleniti esse, illum in minus? Et explicabo numquam minima quaerat, quis quam vitae dolorem!</p>
html会忽略空格的,会把多个空格合并成一个空格,因此想写多个空格的话就需要加上转义字符才可以实现lorem后面的多个空格
    <p>这是一个段落,Lorem &nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp ipsum dolor sit amet consectetur adipisicing  elit. Perferendis aut quasi aspernatur nulla tenetur et, consectetur deleniti esse, illum in minus? Et explicabo numquam minima quaerat, quis quam vitae dolorem!</p>
因此要是使用到这些特殊字符的时候是需要转义使用的

格式化标签:

加粗,倾斜,下划线,删除线都是有的
    <strong>加粗</strong>
    <b>加粗</b>

    <em>倾斜</em>
    <i>倾斜</i>

    <del>删除线</del>
    <s>删除线</s>

    <ins>下划线</ins>
    <u>下划线</u>
每个格式化标签都是有两个的而且效果都是一样的

图片:

图片标签img这是一个单标签,不需要结束标签,img里面可以写很多属性,其中src描述图片具体的位置 ,这个路径可以使绝对路径也可以是相对路径,也可以是一个网络路径(在网页内直接复制的图片链接),alt表示如果图片不能显示就会显示这个提示信息,title表示这张图片的标题,当光标滑到图片上就会提示, width宽height高,这就是可以设置图片的尺寸,设置的时候就涉及了一个单位px就是"像素"(一般同时设置宽和高可能会导致图片比例失调,因此一般设置一个比例,另一个就会自己适应),一般认为像素数越多,图片就会越清晰
<img src="E:/dog.jpg" alt="" width="500px" title="小狗" >
再来一个网络路径:
    <img src="https://tse1-mm.cn.bing.net/th/id/OIP-C.j5Q1V6GtakXJFs7ZTBm7WwHaHa?w=166&h=180&c=7&r=0&o=5&dpr=1.38&pid=1.7" alt="">
超链接标签:

a标签,href 表示一个正确的地址,a标签是行内元素(html有块级元素和行内元素)
    <a href="https://www.bilibili.com/?spm_id_from=333.999.b_696e7465726e6174696f6e616c486561646572.1">bilibili</a>
就可以直接点击进行跳转了,href里面也可以是一个空链接#,来表示开发阶段不确定的地址,点击是没有任何效果的,如果href里面不是一个网页,而是一个文件就可以触发下载操作了例如.zip就可以,另外还可以搭配img标签来使用,然后点击图片就可以实现跳转
      <a href="https://www.nowcoder.com/jobs/recommend/campus">
           <img src="E:\picture\n.png" alt="牛客">
     </a>
这样也是可以的!!

列表标签:

主要用来罗列一组并列的数据 ul li(无序列表,小圆点要不要显示都是可以通过CSS来改动的),ol li(有序列表),dl是自定义列表,其中最常用的就是无序列表
    <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>
而最常的使用场景jiushi把多个并列关系的元素并列在一起

表格标签:

一组标签: table表示整个表格,tr表示一行,td表示一列,th表示表头中的一列,

可以在表格加个边框就更好看出是一个表格通过bored属性,另外宽和高都设置一下,由于格子和格子间有空隙,可以使用cellspacing属性去掉单元格之间的空隙表中内容想居中就得使用CSS了使用css中的text-align属性来设置
    <style>
        td{
            text-align: center;
        }
    </style>
   
   <table border="2px" width="500px" height="200px" cellspacing="0">
        <th>姓名</th>
        <th>电话</th>
        <tr>
            <td>张三</td>
            <td>110</td>
        </tr>
        <tr>
            <td>王五</td>
            <td>111</td>
        </tr>
    </table>
这样就可以设计出一张表格了

表单标签:

这是用户和页面交互的重要手段,借助form就可以让用户输入一些信息并提交到服务器上这个服务器后面再说,input是这里面最常使用的,type表示要输入的框架类型

●文本框:text
<form>
  <input type="text">
</form>
●密码框:password(输入会加密)
<form>
  <input type="password">
</form>
●单选框:radio(可以通过相同的name属性让其选项只能选择一个产生互斥的效果checked可以实现默认选项的效果)
<form>
    <input type="radio" name="n" checked="checked">男
    <input type="radio" name="n">女
</form>
●复选框:checkbox(也可以设置checked属性出现默认的选择效果,但这里不能有互斥的name)
<form>
  <input type="checkbox">吃饭
  <input type="checkbox">睡觉
  <input type="checkbox">打豆豆
</form>
●按钮:button(value属性表示按钮上的显示内容,如果想要点击按钮,就得使用js中的onclick事件才可以(alert就是弹出一个对话框))
<form>
     <input type="button" value="按钮" onclick="alert('hello')">
</form>
另外也可以这样来写button
<button onclick="alert('hello')">按钮</button>
效果都是一样的

●选择文件:file( 点击选择文件就可以选择本地文件,然后浏览器就会打本这个文件,进一步就可以实现提交上传文件到服务器等一些列的操作)
<form>
    <input type="file">
</form>
这个功能还是比较强大的!!!

●下拉菜单:select标签,这是除input标签之外的一个标签,可以实现input实现不了的功能可以使用selected属性实现默认选择的效果
<form>
     <select>
            <option>--请选择年份--</option>
            <option selected="selected">2000</option>
            <option>2001</option>
            <option>2002</option>
            <option>2003</option>
            <option>2004</option>

      </select>
</form>
●多行编辑框:相比text文本框可以实现多行输入:textarea标签(可以设置宽和高)
<form>
    <textarea cols="30" rows="10"></textarea>
</form>
无语义标签:

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>