Front-end basics—HTML

1. First introduction to HTMl

What is HTML?

Hyper Text Markup Language: Hyper Text Markup Language

Hypertext includes: text, pictures, audio, video, animation, etc.

Currently using HTML5, using W3C standards

W3C standards include:

结构化标准语言（HTML、XML）
表现标准语言（CSS）
行为标准语言（DOM、ECMAScript）

Common IDEs

记事本
Dreamweaver
IDEA
WebStorm
...

2. Basic elements of web pages

HTML basic structure

Web page header
main part

Basic information of web page

DOCTYPE declaration: tells the browser what specification we want to use
标签：网页标题
Tags: descriptive tags used to describe some information about the website

<!DOCTYPE html>
<html lang="en">
<!--head标签代表网页头部-->
<head>
    <meta charset="UTF-8">
    <!--meta一般用来做SEO-->
    <meta name="keyboards" content="Java">
    <meta name="description" content="学习Java">
    <!--网页标题-->
    <title>Title</title>
</head>
<!--body标签代表网页主体-->
<body>
HelloWorld
</body>
</html>

3. Basic tags for web pages

title tag
paragraph tags
newline tag
horizontal line label
Font style tag
Comments and special symbols

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>基本标签学习</title>
</head>
<body>
<!--标题标签-->
<h1>一级标签</h1>
<h2>二级标签</h2>
<h3>三级标签</h3>
<h4>四级标签</h4>
<h5>五级标签</h5>
<h6>六级标签</h6>

<!--段落标签-->
<p>
  这是一整段这是一整段这是一整段这是一整段
  这是一整段这是一整段这是一整段
  这是一整段这是一整段
  这是一整段
  这是一整段
</p>
<p>第一段</p>
<p>第二段</p>
<p>第三段</p>

<!--3、换行标签-->
<!--br、hr是自闭合标签，习惯上最好加/结尾-->
第一行 <br/>
第二行
<!--4、水平线标签-->
<hr/>
<!--5、字体样式标签-->
粗体：<stronge>I LOVE YOU </stronge>
斜体：<em>I LOVE YOU </em>
<hr/>

<!--6、特殊符号-->
空 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;格：<br/>
大于号：&gt;      <br/>
小于号：&lt;     <br/>
版权符号：&copy;

<!--7、注释-->
</body>
</html>

4. Image tags

Common image formats:

JPG
GIF
PNG
BMP: bitmap
…

grammar:

<body>
<!--src:图片地址
        相对地址：../   1.html文件的上一级目录           
 (不推荐)绝对地址：C:\Users\15642\IdeaProjects\HTML\resources\image\1.JPG
-->
<img src="../resources/image/1.JPG" alt="baidu" title="baidu" width="800" height="500">

</body>

5. Link tags

Text hyperlink: click on the text to jump

Image hyperlink: click on the image to jump

<body>
<!--链接标签-->
<a href="path" target="目标窗口位置">链接文本或图像</a>
href：必填 ，表示要跳转到那个页面
target:表示窗口在哪里打开，默认是当前页面打开
_blank：在新的标签页打开
_self:在自己的网页中打开
<br>
<!--文字超链接-->
<a href="http://www.baidu.com" target="_blank">点击我跳转到百度</a>
<a href="FirstHtml.html" target="_self">点击我跳转到页面一</a>
<br>
<!--图像超链接-->
<a href="http://www.baidu.com">
    <img src="../resources/image/baidu1.jpg" alt="baidu" title="百度" >
</a>
</body>

Anchor link:

Use # to jump between pages
Jump to the specified location on another page

practise:

<body>
<!--
    锚链接
        1.需要一个标记
        2.然后跳转到标记
        3.使用 #
-->
<!--先设置一个标记-->
<a id="top">我是顶部</a>
<p>
    <a href="http://www.baidu.com">
        <img src="../resources/image/baidu1.jpg" alt="baidu" title="百度" >
    </a>
</p>

<!--也可以跳转到另一个页面的指定位置 : href="2.html#top"-->
<a href="#top">跳转到顶部</a>
</body>

functional link

<!--邮件链接：mailto-->
<a href="mailto:[email protected]">点击联系我！</a>

6. Inline elements and block elements

block element

Regardless of the amount of content, the element occupies its own line
p tag, h1-h6…

inline elements

The content is stretched to the width, and if there are inline elements on the left and right, they can be arranged in one line.
a tag, strong tag, em tag…

7. List

List categories:

ordered list
unordered list
custom list

<body>
<!--有序列表
应用范围：试卷，问答
-->
<ol>
  <li>Java</li>
  <li>Python</li>
  <li>c++</li>
  <li>前端</li>
</ol>
<hr>
<!--无序列表
应用范围：导航，侧边栏
-->
<ul>
  <li>Java</li>
  <li>Python</li>
  <li>c++</li>
  <li>前端</li>
</ul>
<hr>
<!--自定义列表
应用范围：公司底部列表
    dl：标签
    dt:列表名称
    dd：列表内容
-->
<dl>
  <dt>学科</dt>
  <dd>java</dd>
  <dd>python</dd>
  <dd>linux</dd>
  <dd>c++</dd>

  <dt>位置</dt>
  <dd>北京</dd>
  <dd>上海</dd>
  <dd>广州</dd>
</dl>
</body>

8. Forms

Why use tables?

Simple and versatile
stable structure

basic structure:

Cell
line tr
column td
cross rowspan
colspan across columns

<body>
<!--表格学习
行 tr
列 td
-->
<table border="1px">
  <tr>
    <!--  colspan跨列  -->
    <td colspan="4">1-1</td>
  </tr>
  <tr>
    <td rowspan="2">2-1</td>
    <td>2-2</td>
    <td>2-3</td>
    <td>2-4</td>
  </tr>
  <tr>
    <td>3-1</td>
    <td>3-2</td>
    <td>3-3</td>
  </tr>
</table>
</body>

9. Media elements

Video element: video

Audio element: audio

<!--媒体元素
视频：
    controls:滚动条
    autoplay：自动播放
-->
<video src="../resources/video/4.mp4" controls autoplay></video>

<audio src="../resources/audio/萤火虫和你.mp3" controls></audio>

10. Page structure analysis

element name	describe
header	Mark the content of the header area (for a page or an area within a page)
footer	Mark the content of the footer area (for the entire page or an area of the page)
section	An independent area in a web page
article	independent article content
aside	Related content or apps (commonly used in sidebars)
nav	Navigation auxiliary content

<body>
<header>
    <h2>网页头部</h2>
</header>

<section>
    <h2>网页主体部分</h2>
</section>

<footer>
    <h2>网页脚部</h2>
</footer>
</body>

11. iframe inline frame

grammar

<iframe src="path" frameborder="0" name="mainFrame"></iframe>
        引用页面地址                 框架标示名

<body>
<!--iframe内联框架-->
<iframe src="//player.bilibili.com/player.html?aid=68373450&bvid=BV12J41137hu&cid=118499718&page=1"
        scrolling="no"
        border="0"
        frameborder="no"
        framespacing="0"
        allowfullscreen="true">
</iframe>

<iframe src="https://www.bilibili.com/" frameborder="1px" name="mainFrame" width="400px" height="100px"></iframe>

<!--通过a标签往iframe里加东西-->
<iframe src="" frameborder="1px" name="hello" width="400px" height="300px"></iframe>
<!--通过target属性绑定指定的iframe-->
<a href="https://www.bilibili.com/" target="hello">点击我跳转到B站</a>
</body>

12. First introduction to form post and get submission

<body>
<h1>注册</h1>
<!--form
    method:规定如何发送表单数据，常用值：：post、get
    get方式提交：可以在url中看到提交的信息
   post方式提交：比较安全，可以传输大文件
    action:表示向何处发送表单数据,可以是一个网站，或者一个请求处理地址
-->
<form action="FirstHtml.html" method="get">
  <!--文本输入框：text-->
  <p>姓名：<input type="text" name="username"></p>
  <!--密码框：password-->
  <p>密码：<input type="password" name="password"></p>

  <!--提交-->
  <input type="submit">
  <!--重置-->
  <input type="reset">
</form>
</body>

Form element format

Attributes	illustrate
type	Specifies the type of element. text, password, checkbox, radio, submit, reset, file, hidden, image and button, the default is text
name	Specify the name of the form element
value	The initial value of the element. A value must be specified when type is radio
size	Specifies the initial width of the form element. When type is text or password, the size of the form element is in characters. For other types, width is in pixels
maxlength	When type is text or password, the maximum number of characters to enter
checked	When type is radio or checkbox, specify whether the button is selected

13. Text boxes and radio buttons

Single box:

<!--单选框标签：
    input type="radio"
    value：单选框的值
    name：表示组，name相同为一个组，即只能选择一个
-->
<radio>
	<!--checked表示默认选中-->
    <input type="radio" value="boy" name="sex" checked/>男
    <input type="radio" value="girl" name="sex"/>女
</radio>

Checkbox:

<!--多选框-->
<p> 爱好：
	<!--checked表示默认选中-->
    <input type="checkbox" value="sleep" name="hobby" checked>睡觉
    <input type="checkbox" value="book" name="hobby">看书
    <input type="checkbox" value="swimming" name="hobby">游泳
    <input type="checkbox" value="write" name="hobby">写作

</p>

14. Buttons and checkboxes

Normal button:

<!--按钮-->
<p> 按钮：
    <input type="button" name="btn1" value="点击查看">
</p>

Image button:

<input type="image" name="bt2" src="../resources/image/1.jpg"><!--可以点击提交，相当于submit-->

Drop down box:

<p>国家：
    <select name="country">
        <option value="china">中国</option>
        <option value="us">美国</option>
        <!--selected表示默认选中-->
        <option value="ruishi" selected>瑞士</option>
    </select>
</p>

15. Text fields and file fields

Text field:

<!--文本域-->
<p>反馈：
    <textarea name="textarea" cols="50" rows="10">文本内容</textarea>
</p>

File field:

<!--文件域-->
<input type="file" name="files">

16. Search Box Slider and Simple Verification

<!--邮件验证-->
<p> 邮箱：
    <input type="email" name="email">
</p>

<p> URL：
    <input type="url" name="url">
</p>

<p> number：
    <input type="number" name="number" max="100" min="0" step="10">
</p>

<!--滑块：-->
<p>音量：
    <input type="range" name="voice" min="0" max="10">
</p>

<!--搜索框-->
<p>搜索：
    <input type="search" name="search">
</p>

17. Application of forms

hidden domain hidden
readonlyreadonly
disableddisabled

<body>

    只读：
    <p>姓名：<input type="text" name="username" value="lisa" readonly></p>
    
    <p>禁用：
        <!--disabled可以放到任何地方，无法选择"男"-->
        <input type="radio" value="boy" name="sex" disabled/>男
        <input type="radio" value="girl" name="sex"/>女
    </p>
    
    <!--隐藏域：hidden，密码框不见了，但值依然在-->
    <p>密码：<input type="password" name="password" hidden value="123456"></p>

</body>

Enhance mouse usability:

<p>增强鼠标的可用性：<br>
    <label for="mark">你点我试试！！</label>
    <input type="text" id="mark">
</p>

18. Form primary verification

think:

Reduce pressure on servers
safety

Commonly used methods:

placeholder prompt message
The required element cannot be empty and applies to all text boxes
pattern regular expression

<body>

    <p>姓名：
        <input type="text" name="username" placeholder="请输入用户名">
    </p>
    
    <p>姓名：
        <input type="text" name="username" placeholder="请输入用户名" required>
    </p>
    
    <p> 自定义邮箱：
        <input type="text" name="diyEmail" pattern="^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$">
    </p>

</body>