Introduction to Html

html, hyper Text Mark Language, hypertext markup language. The computer language that front-end staff must learn to create simple web content is a relatively simple language that can be run directly on the browser without compiling.

Hypertext refers to non-plain text content such as streaming media, sound, video, pictures, etc.;

Markup Language: This language is composed of a large number of tags.

For example: <label>: start label </label>: end label

Strictly speaking, html is just a specification, a specification displayed on a browser, (label language) cannot be called a programming language, because there are no variables, data types, or control statements if, for in html. HTML does not have the characteristic content of these programming languages.

2.html operating environment

html runs on the browser.

Now the world's mainstream browsers are: edge, chrome, Firefox, etc.

The environment in which html runs is relatively simple, so I won't repeat it here.

3.html development environment

For html development, you only need to create a new file ending in .html or .htm, and then open it in Notepad for writing and then develop it. You can run it directly on the browser without compiling.

However, in order to improve development efficiency and standardize the code, it is recommended to use some mainstream compilers, such as vscode and webstorm. The editor uses vscode, whose interface is simple and comfortable.

Regarding the installation and environment construction of vscode, you can directly download the latest version from the official website, and you can query the content related to the configuration environment in csdn.

4.html basic tags

The basic tags of HTML mainly rely on memorization, and it can be used well by writing more.

<!--这是HTML的注释信息-->
<!--这是根-->

<html>
    <!--头-->
    <head>
        <!--标题栏-->
        <title>  基本标签 </title>
    </head>
    <!--网页体-->
    <body>
        <!--这里的内容显示到网页上-->
        <p>段落标记</p><!--分段-->
        <p>段落标记</p>

        <!--标题字-->
        <h1>h1</h1>
        <h2>h2</h2>
        <h3>h3</h3>
        <!--一共有6种标题字，由h1到h6-->

        <!--换行标记-->
        hello
        world<!--不可行-->
        hello<br>world!<!--独目标记-->

        <!--画一条水平线-->
        <hr><!--独目标记-->
        <!--color是一个属性，用来指定属性-->
        <!--color是属性名，red是属性值-->
        <hr color="red">
        <hr color='red'>
        <hr color=green>
        <!--HTML语法较为松散，大小写，有无单双引号也不影响-->
        <!--文本框-->
        <input>

    </body>
</html>

        <!--预留格式-->
        <!--保留格式，在HTML源码上是什么格式，到网页上还是什么格式，保持不变。-->
        <pre>
            for i in range(10):
                print(i)
                if i >=5:
                brek
        </pre>

        <!--粗体字-->
        <b>粗体字</b>
        <!--斜体字-->
        <i>斜体字</i>
        <!--插入字-->
        <ins>插入字</ins>
        <!--删除字-->
        <del>删除字</del>
        <!--右上标-->
        10<sup>2</sup>
        <!--右下标-->
        m<sub>2</sub>
        <!--font字体标签-->
        <font>hello world</font>

There are many basic tags in HTML, but some tags are widely used, so it is not required to memorize all of them, just have an impression.

5.html entity symbol


<!--凡是html页面中第一行是以下代码的，表示该页面是一个html5页面，h5-->
<!DOCTYPE html>
<html>
    <head>
        <!--这个是告诉浏览器采用哪一种字符编码方式打开该页面，一般与文件编码方式相同，否则会乱码-->
        <!--windows操作系统的浏览器在没有指定任何编码方式的时候，浏览器默认采用GBK的简体中文方式打开
        ，这是因为我们的windows操作系统是简体中文环境-->
        <!--而我们程序员工作区当中文件的编码方式是utf-8，因为unicode更加通用-->
        <!--当前这个文件就是utf-8的编码方式，如果不写如下代码，浏览器就会默认用GBK打开，会乱码-->      
        <meta charset="utf-8">
        <title>实体符号</title>
    </head>
    <body>
        <!--空格-->
        a       bc
        <br>
        <!--&nbsp;这是一个空格，属于实体符号-->
        a&nbsp;&nbsp;&nbsp;&nbsp;bc
        <!--大小于号-->
        a&lt;b&gt;c<!--&lt;是小于号&gt;是大于号-->
    </body>
</html>

There are fewer physical symbols in html, but you should pay attention to the use of the greater than sign and the less than sign, because the two symbols <> in html have special meanings, so they cannot be used to indicate the greater than or less than sign. Another thing to pay attention to is the problem of the file encoding format , in order to prevent the text from appearing garbled when the browser opens the html webpage we wrote, we need to pay attention to specifying the text editing format and the encoding format to open.

6.html form

Tables are required to write in html and implement tables on web pages.

<html>
    <head>
        <meta charset="utf-8">
        <title>html表格table</title>   
    </head>
    <body>
        <!--border 用来设置边框的宽度，1px表示一像素-->
        <table border="1px" width='300px' height='200px' align="center">
        <!--width,height分别表示表格的宽度和高度-->
        <!--高度宽度还可以写成百分比的方式-->
        <!--align表示表格的对齐方式-->
            <!--tr表示表格中的一行，td表示一行中的一个单元格-->
            <!--第一行-->
            <tr>
                <td>1</td>
                <td>2</td>
                <td>3</td>
            </tr>
            <!--第二行-->
            <tr align="center">
                <td>1</td>
                <td>2</td>
                <td>3</td>
            </tr>
            <!--第三行-->
            <tr>
                <td>1</td>
                <td>2</td>
                <td align="center">3</td>
            </tr>
        </table>
    </body>
</html>

The merging operation of cells in html is divided into vertical merging and horizontal merging.

            <tr>
                <td>1</td>
                <td colspan="2">xy</td>
                <!--<td>y</td>-->
                <!--同一行中左右单元格合并为一个，这项操作为纵向合并，只需要保留其中一个单元格
                在使用clospan来表示合并的单元格数量-->
            </tr>
            <!--第二行-->
            <tr>
                <td>1</td>
                <td>2</td>
                <td rowspan="2">king queen</td>
                <!--同一列中上下单元格合并为一个，这项操作为横向合并，只需要保留其中一个单元格
                在使用rowspan来表示合并的单元格数量-->
            </tr>
            <!--第三行-->
            <tr>
                <td>1</td>
                <td>2</td>
                <!-- <td>queen</td> -->
            </tr>

Another one is about the use of th in html tables. Using th instead of td can make the content in the table bold and centered automatically.

<html>
    <head>
        <title>th标签</title>
    </head>
    <body>
        <table border='5px' wider='1000px' height='200px'>
            <tr>
                <!-- <td>员工编号</td>
                <td>员工姓名</td>
                <td>员工薪资</td> -->
                <th>员工编号</th>
                <th>员工姓名</th>
                <th>员工薪资</th>
                <!--th可以代替td做单元格，th中的内容可以自动加粗自动居中。-->
            </tr>
            <tr>
                <td>369</td>
                <td>小编</td>
                <td>0.00</td>
            </tr>
            <tr>
                <td>370</td>
                <td>小小编</td>
                <td>1.00</td>
            </tr>
        </table>
    </body>
</html>

We can also use thead, tbody, tfoot to divide the table into three parts.

<!--一个table可以被thead tbody tfoot分割为三部分-->
        <!--这个语法主要是为了后期JavaScript提供方便-->
        <table border='5px' wider='50%' height='200px'>
            <thead>
                <tr>               
                    <th>员工编号</th>
                    <th>员工姓名</th>
                    <th>员工薪资</th>
                </tr>
            </thead>
            <tbody> 
                <tr>
                    <td>369</td>
                    <td>小编</td>
                    <td>0.00</td>
                </tr>
            </tbody>
           <tfoot> 
               <tr>
                    <td>370</td>
                    <td>小小编</td>
                    <td>1.00</td>
                </tr>
            </tfoot>
           
        </table>

7.html background color and background image

<html>
    <head>
        <title>背景颜色以及背景图片</title>
    </head>
    <!--body标签的bgcolor属性指定背景颜色-->
    <!--body标签的background属性指定背景图片-->
    <body background="images/公子.jpg">
        

    </body>
</html>

It should be noted that if you want to set a background image, you need to ensure that there are images to be placed in the file directory. It is recommended to create a new images folder in the html folder to store the images you need to use.

8. Image img in html

The picture in html is different from the background picture. The picture is an element in the web page and floats on the background. For pictures we have a series of operations to set them up.

<html>
    <head>
        <title>图片</title>
    </head>
    <!--背景图片与图片不同-->
    <body>
        <!--图片是网页中的一个元素-->
        <!--<img src="images/百度.png"></img>-->
        <!--开始标签结束标签之间没有内容的话可以将结束标签删除，在开始标签末尾加上/-->
        <img src="images/百度.png"/>
        <!--img 这个标签有什么属性？-->
        <!--scr属性指定图片的路径-->
        <!--width属性，用来指定图片的宽度，高度会等比例缩放，
            尽量不要自定义高度，容易导致图片失真-->
        <!--title属性用来设置鼠标悬停在该图片上的提示信息-->
        <img src="images/百度.png" width ='200px' title="点击我跳转到百度哦" />
        <!--alt属性，当图片加载失败时的提示信息-->
        <img scr = 'abc/公子.jpg' alt="图片找不到哦！"/>   
    </body>
</html>

9. Hyperlinks

We often encounter such a situation on webpages: some words on some webpages will be underlined, and when the mouse is placed on the font, it will automatically become a small hand. After clicking the font, it will enter a (or open) New window, this is hyperconnection. Moreover, the type of hyperlink is not only text, a picture can also become a hyperlink.

 <!--链接到百度的超链接-->
 <!-- href属性表示，hot reference，用来指定链接的路径-->
 <a href="http://www.baidu.com">百度</a>
 <br>
 <!-- 链接路径可以时一个网络中的路径，也可以是本地的一个路径 -->
 <a href="html表格.html">链接到本地表格</a>
 <!-- 超链接特点：1.鼠标停留在超链接上时自动变成小手2.超链接自动添加下划线 -->
 <!-- 图片也可以做热链接（起始标签和结束标签中的内容会变成链接） -->
 <a href="http://map.baidu.com"><img src="images/百度.png" title="点击我跳转到百度地图哦"></a>

Here, we also need to understand an attribute of hyperlinks: target. This is helpful for subsequent development.

<!-- 关于超链接的target属性 -->
        <!-- targer属性用来设置最终打开窗口的位置 -->
        <!--
            target:
                _self:当前窗口
                _blank:新窗口
                _parent:当前窗口的父窗口
                _top:当前窗口的顶级窗口

        -->
        <a href="http://www.baidu.com" target="_self" >百度（当前窗口）</a><br>
        <a href="http://www.baidu.com" target="_blank" >百度（新开窗口）</a>
        <br>

*10. Digression.

About the principle of B/S architecture: (roughly speaking)

Step 1: The user enters the URL on the browser.

Step 2: Enter (this step is equivalent to sending a request to the server through the browser) request (request)

Browser-->Server (the browser sends a request to the server)

Step 3: The server will give the browser a response, and finally respond with a piece of html code to the browser, and the browser will execute the html code and display a result. response

Server-->Browser (the server replies a response to the browser)

In our daily life, we 1. enter the URL to visit the page, or 2. click the hyperlink to visit the new page, all of which are due to the B/S architecture.

11. Unordered and ordered lists

The unordered list is relatively simple and will not be described in detail.

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>列表</title>
    </head>
    <body>
        <!-- 无序列表 -->
        <!-- ul的tyoe属性是指定列表前的标识 -->
        <ul type='circle'>
            <!-- 列表项 -->
            <li>中国</li>
            <ul>
                <li>北京</li>
                <ul>
                    <li>烤鸭</li>
                    <li>爆肚</li>
                    <li>炒肝</li>
                    <li>糖葫芦</li>
                </ul>
                <li>上海</li>
                <li>天津</li>
                <li>重庆</li>
            </ul>
            <li>华夏</li>
            <li>东方</li>
            <li>雄狮</li>
        </ul>
    </body>
</html>

The only difference between an ordered list and an unordered list is that there is no sort label.

<!DOCTYPE html>
<html>
    <head>
        <title>有序列表</title>
    </head>
    <body>
        <!-- 有序列表 -->
        <ol type='A'>
            <li>水果</li>
            <ol type="1">
                <li>香蕉</li>
                <li>苹果</li>
                <li>哈密瓜</li>
                <li>菠萝</li>
            </ol>
            <li>蔬菜</li>
            <li>茶</li>
            <ol type="I">
                <li>普洱</li>
                <li>龙井</li>
                <li>铁观音</li>
                <li>绿茶</li>
                <ol>
                    <li>毛尖</li>
                </ol>
            </ol>
            <li>肉</li>
        </ol>
    </body>
</html>

12. Focus——Form

12.1 Form overview

It can be said that forms are the most important part of learning html. If you have not mastered the use of forms, then it can be said that your html learning is not good enough.

So. What exactly is a form? Let's look at a picture:

This is a screenshot of the Baidu account registration page, and the above is the form!

1. What is a form? What is the use?

Send a request and carry data to the server

Forms and hyperlinks have a common feature, that is, they can both send requests to the server

It's just that the hyperlink is the user's direct click to send the request, and the data cannot be filled in.

When the user clicks on the form to submit, not only can the request be sent, but the input data can also be carried in the request.

The main function of the form is to collect user information

The word corresponding to the form: form

2. How to define a form object? grammatical format

<form>

Form item 1:

Form item 2:

</form>

Also note: There can be multiple form objects on a web page

3. There is an action attribute in the form tag, which is the same as the href of the hyperlink, and both need to fill in the url

12.2 How to make a login form

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>登录的表单</title>
    </head>
    <body>
        <!-- 画一个登录的表单 -->

        <!-- "http://192.168.145.2:8080/crm/login"
            协议：http协议
            访问的服务器IP地址是：192.168.145.2
            访问这个服务器上的哪个软件：8080端口对应的一个服务
            /crm/login:是这个服务器上的某个资源名！（他可能是一段处理登录的java程序） -->

            <!-- 重点*****重点*****重点*****重点*****重点*****重点*****重点*****
            表单最终提交的时候，表单项的name属性非常重要，有name属性才会提交
            并且浏览器向服务器提交数据的格式是：
                url?name=value&name=value&name=value&name=value&name=value
            以上提交数据的格式，是W3C制定的格式，所有浏览器都是这样的。

            这个格式非常重要，必须背会，所有浏览器都是这样提交数据的。
            重点*****重点*****重点*****重点*****重点*****重点*****重点***** -->
        <form action="http://192.168.145.2:8080/crm/login">
            <!--input是输入域，type不同，展示样式不同-->
            <!-- type="text"是文本框 -->
            <!-- value属性是不需要填写 -->
                用户名：<input type="text" name="x"/>
                <br>
            <!-- type="password"表示密码框，输入的内容会被修饰 -->
                密码：<input type="password" name="y"/>
                <br>
            <!-- 提交表单的按钮 -->
                <input type="submit" value="登录"/>
        </form>

    </body>
</html>

In the process of making the form, we need to keep in mind the transmission method of the form item data, so as to facilitate our subsequent development process.

12.3 Creation of user registration form

This form involves a lot of different input option expressions. It is recommended to write the code yourself to experience the effect of different attribute settings of the input option.

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>用户注册表单</title>
    </head>
    <body>
        <!--若表单项是由用户自己填写，则value不需要程序员提供，若是由用户选择，则需要提供value-->
        <!--表单中，如果有一些项用户没有填写，默认提交的就是空字符串-->
        <form action="http://localhost:80/cr/register">
            用户名：<input type="text"name='username'/><!--value不需要程序员提供-->
            <br>
            密码：<input type="password"name="userpwd"/><!--value不需要程序员提供-->
            <br>
            性别：<!--最终提交给服务器的数据是，sex=1或sex=0-->
                 <!--同一组的单选按钮，name是需要一致的-->
                 <!--checked表示默认选择-->
                <input type="radio" name="sex" value="1" checked/>男
                <input type="radio" name="sex"value="0"/>女
            <br>
            兴趣：<!--复选框（可以同时选择多项），同一组的复选框name也是一致的-->
                <input type="checkbox" name="aihao" value="basketball" checked/>打篮球
                <input type="checkbox" name="aihao" value="yuanshen"/>原神
                <input type="checkbox" name="aihao" value="duanlain"/>锻炼
            <br>
            学历：<!--下拉列表-->
                <select name="xueli" ><!--假设选择**，则提交的是xueli=**-->
                    <!-- selected表示默认选中 -->
                    <option value="gz">高中</option>
                    <option value="zk">专科</option>
                    <option value="bk" selected>本科</option>
                    <option value="yjs">研究生</option>
                </select>
            <br>
            简介：<!--文本域,其中value也是用户来填写的-->
                <textarea name="jianjie" cols="60" rows="10">

                </textarea>
            <br>
                <input type="submit"value="提交注册">
                <!--提交按钮不可以由name，不然提交按钮也会提交给服务器-->
                <!-- reset是重置表单 -->
                <input type="reset" value="重置">
        </form>
    </body>
</html>

13. Fragmentary knowledge points arrangement

13.1 Multiple selection in drop-down list

When making a drop-down list, you can set the maximum number of items displayed and support multiple selections.

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>下拉列表多选</title>
    </head>
    <body>
        <!--multiple表示下拉列表支持多选-->
        <!--size是设置下拉列表一次最多显示的条目数量-->
        <select name="province" size="3" multiple>
            <option value="hebei">河北省</option>
            <option value="henan">河南省</option>
            <option value="shandong">山东省</option>
            <option value="shanxi">山西省</option>
            <option value="hunan">湖南省</option>
            <option value="hubei">湖北省</option>
        </select>
    </body>
</html>

13.2 file control

The main function of this control is to transfer files.

<!DOCTYPE html>
<html>
    <head>
        <title>file控件</title>
    </head>
    <body>
        <!--后台java程序使用IO六的方式接收这个文件-->
        <form action="http://www.baidu.com">
            文件：<input type="file"/>
            <br>
            <input type="submit" value="文件上传">
        </form>
    </body>
</html>

13.4hidden hidden field

It is used to hide some information that users do not want to see but needs to be submitted to the server.

<!DOCTYPE html>
<html>
    <head>
        <title>hidden控件</title>
    </head>
    <body>
        <!-- hidden的隐藏域空间 -->
        <form action="http://127.0.0.1:8080/crm/save">
            <!--隐藏域-->
            <!-- 不希望用户在浏览器上看到，但希望可以将这个数据提交过去 -->
            <input type="hidden" name="uesrcode" value="111111"/>

            <!--提交按钮-->
            <input type="submit" value="提交"/>
        </form>
    </body>
</html>

13.5readonly和disable

It is recommended to directly type the code to experience it for yourself.

<!DOCTYPE html>
<html>
    <head>
        <title>readonly和disable</title>
    </head>
    <body>
        <!-- readonly和disable 都是只读的 -->
        <!-- readonly修饰的表单项可以提交给服务器，但是disable修饰的不会提交 -->
        <form action="http://127.0.0.1:8080/crm/save">
            机构代码 <input type="text" name="orgcode" value="1111" readonly/>
            <br>
            用户代码 <input type="text "name="usercode" value = "2222" disabled/>
            <br>
            <input type="submit" value="提交">
        </form>
    </body>
</html>

13.6 The maxlength attribute of form items

Simply put, it is to limit the maximum number of characters allowed to be entered in a form item.

<!DOCTYPE html>
<html>
    <head>
        <title>maxlength属性</title>        
    </head>
    <body>
        <!-- 最多输入maxlenth个字符 -->
        <input type="text"maxlength="3">
    </body>
</html>

13.7 The id attribute of elements in html

Each node in html has its unique id attribute, which will be used in subsequent JavaScript learning.

1. On any node in html, there is an id attribute

2. In the same web page, the id attribute cannot be repeated

3.id represents this node, and id is the ID number of this node

4. After learning JavaScript later, when we want to add, delete, and modify html nodes through JavaScript

First, we need to obtain the node object, and the id attribute allows us to obtain the node object conveniently.

5. The node can be easily obtained in JavaScript through the id attribute,

Then operate on this node, and finally generate the dynamic effect of the web page.

13.8 div and span layers

1. Both are layers

2. The meaning and function of layers:

Each layer is an independent box in the web page

The main function of the layer is: web page layout

3. Isn't the table table layout? Why even layers?

The table layout is not flexible enough

div and span layout is more flexible

4. The vertices in the upper left corner of each div and span have x and y coordinates,

Through this coordinate, the position of the div in the web page can be located. When learning css later,

We can position through css style.

5. Table layout was used a long time ago, but modern web pages are laid out with div+span

6. For the web front end, the debugger:

Every browser has a built-in debugger

Use the shortcut key f12 to bring up the debugger

7. The difference between div and span:

div occupies a single line by default

span does not occupy a line

8. div can nest div and span

14. Summary

The learning of html is mainly based on memorization, the use of some key tags, the arrangement of some controls, and the setting of some attributes, etc.; in addition, you need to type the code yourself, practice makes perfect, which is the foundation of learning! keep it up! !