前端之HTML

2022年05月14日 阅读数:11
这篇文章主要向大家介绍前端之HTML,主要内容包括基础应用、实用技巧、原理机制等方面,希望对大家有所帮助。

目录css

第一份HTML代码 html

HTML的编译器使用前端

HTML基本语法浏览器

​注释:服务器

​标题:网络

​段落:框架

换行:ide

转义字符:字体

格式化标签:ui

图片:

超连接标签:

列表标签:

表格标签:

表单标签:

 ​无语义标签:


本篇内容主要仍是一些比较基础的内容,了解就行了, 当前最主流的实现前端的方案就是咱们日常所见到前端三剑客(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>

加上换行以后就能够呈现

就能够是实现换行了,这点也是须要注意的

转义字符:

单引号('):&#039;双引号("): &quot;小于号(<):&lt;大于号(>):&gt;与(&):&amp;空格( ) :&nbsp;这些特殊的字符都是须要转移以后才是可使用的,

    <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>
   <!--CSS将td每一列放在中间-->
   <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>

 

到这里基本的HTML的语法就介绍完了,其实大部分都仍是简单的,多写几回,这些标签也就记住 ,没有太多的技术含量,后面我会再介绍CSS和JS的用法的,感谢支持!!!

 

 

 ​​