美文网首页
前端学习之HTML入门

前端学习之HTML入门

作者: White夏天baby | 来源:发表于2020-09-16 10:02 被阅读0次

       今天是前端学习的第N次的第1天,之所以说是学习的第N次,是因为之前学习过很多次,具体几次,不记得了。因为自己不经常写前端,所以自己现在又忘记了,这也说明了至少学习的次数不够多。就连之前自己写的网页源码放在哪里都不记得了。现在我又没办法独立搭建一个网页了。这也是我再次学习前端的原因。此次在简书上记录自己的学习过程,主要是为了自己以后方便查阅、复习。顺便发布出来,有兴趣的小伙伴,可一同学习探讨。因为最主要是为了服务自己,所以,很多简单的地方,都会直接略过。各位见谅。

使用的编辑工具,phpStorm,也可以用其他的IDE(开发工具)

使用的浏览器,火狐浏览器

HTML     超文本标记语言

因为计算机用的语言与人类不一样,所以,有必要将人类语言进行翻译,告诉计算机。

<p></p>  p:段落标签,作用,告诉计算机,p标签内的是一个段落。

HTML中常用的转义字符,

&nbsp; 不断行的空格

&ensp;  半方大的空格

&emsp;  全方的空格

&lt;    小于<

&gt;    大于>

&amp;    &符号

&quot;  双引号“

&copy;  版权符号©

&reg;    已注册商标®

<h1></h1>   h1标签  标题标签  方便seo优化

<img src="" alt="">  img标签

<a href=""></a>     超级链接标签    target="_blank" 在新窗口打开

a标签的锚点用法

<a href="#num-1" >跳转到num-1的地方</a>

<a name="num-1"><p>test</p></a>  把name属性修改成id属性同样可以定位

无序列表

<ul><li>......</li></ul>

作用:此列项目使用粗体圆点(典型的小黑圆圈)进行标记

<ul>

    <li>我的文件

    <li>我的图片

</ul>

列表项内部可使用段落、换行符、图片、链接以及其他列表等

<ol><li>......</li></ol>

作用:列表项目使用数字进行标记

<ol>   

<li>我的文件

    <li>我的图片</li>

</ol>

列表项内部可使用段落、换行符、图片、链接以及其他列表等

表格

表格table、tr、td、border、width

作用  用于表格、行、列、宽度、边框的制作

实例  制作课程表

table元素中的width为50%时,是父级元素的宽度的50%

align   与   valign  可以用在tr与td上

<form action="" method="">

<!--        label标签的作用,方便控制文字元素-->

        <label>请输入姓名:</label><input type="text" name="name" id="name">

        <label>请输入密码:</label><input type="text" name="password" id="password">

        <label>请再次输入密码:</label><input type="text" name="confirmpassword" id="confirmpassword">

        <label>性别:</label><input type="radio" name="sex"  value="1">男

                            <input type="radio" name="sex"  value="2">女

        <label>兴趣爱好:

        <input type="checkbox" value="1">看书

        <input type="checkbox" value="2">游泳

        <input type="checkbox" checked="checked" value="3">思考

        <input type="checkbox" value="4">爬山

        <label>生日

        <select name="year" id="">

            <option value="2020">2020

            <option selected="selected" value="2019">2019

            <option value="2018">2018

            <option value="2017">2017

        </select>年

        <label>头像:</label> <img src="./img/headLogo/15.gif" alt="">

        <select name="head" id="">

            <option value="1">1

            <option value="2">2

            <option value="3">3

            <option value="4">4

<!--        button在通过js与后端交互时后使用-->

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

<!--        直接通过form表单提交时后进行使用-->

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

<!--        多行输入框-->

        <textarea name="" id="" cols="30" rows="10">

            请输入

<!--        文件域-->

        <input type="file"> <input type="button" value="上传">

        000<input type="hidden">000

<!--        下拉列表框变成普通列表框-->

        <select name="" id="" size="4">

            <option value="1">1

            <option value="2">2

            <option value="3">3

            <option value="4">4

            <option value="5">5

            <option value="6">6

            <option value="7">7

            <option value="8">8

            <option value="9">9

            <option value="10">10

<!--        共键-->

        <select name="" id="" size="4">

    </form>

<!--靠右对齐-->

<form action="">

            <td align="right"><label>请输入姓名:

            <td><input type="text" name="name" id="name">

            <td align="right"><label>请输入密码:

            <td><input type="text" name="password" id="password">

            <td align="right"><label>请再次输入密码:

            <td><input type="text" name="confirmpassword" id="confirmpassword">

            <td align="right"><label>性别:

            <td><input type="radio" name="sex"  value="1">男

                <input type="radio" name="sex"  value="2">女

            <td align="right"><label>兴趣爱好:

            <td><input type="checkbox" value="1">看书

                <input type="checkbox" value="2">游泳

                <input type="checkbox" checked="checked" value="3">思考

                <input type="checkbox" value="4">爬山

            <td align="right"><label>生日:

            <td><select name="year" id="">

                <option value="2020">2020

                <option selected="selected" value="2019">2019

                <option value="2018">2018

                <option value="2017">2017

            </select>年

            <td align="right"> <img src="../img/headLogo/15.gif" alt=""><label>头像:

            <td><select name="head" id="">

                <option value="1">1

                <option value="2">2

                <option value="3">3

                <option value="4">4

            <td align="center" colspan="2"><input type="submit" value="提交按钮">

</form>

(以下源码不开放,只为自己更方便查阅)
源码位置:我的网盘>前端入门的第N次>第一天HTML入门>html

相关文章

网友评论

      本文标题:前端学习之HTML入门

      本文链接:https://www.haomeiwen.com/subject/ngnfyktx.html