30分钟从零开始入门拿下 HTML

 

                                    ⭐  HTML ⭐


主要内容

认识HTML的基本结构,学习常⽤的HTML标签.


1.HTML基础

1.1什么是HTML

HTML(HyperTextMarkupLanguage),超⽂本标记语⾔.

超⽂本:⽐⽂本要强⼤.通过链接和交互式⽅式来组织和呈现信息的⽂本形式.不仅仅有⽂本,还可能包 含图⽚,⾳频,或者⾃已经审阅过它的学者所加的评注、补充或脚注等等.

标记语⾔:由标签构成的语⾔ HTML的标签都是提前定义好的,使⽤不同的标签,表⽰不同的内容.

类似⻜书⽂档,Word⽂档

30分钟从零开始入门拿下 HTML_第1张图片

如果选中⽂本,点击标题1,就会使⽤标题1的样式来显⽰⽂本,上述标题1就是⼀个"标签"

如下⽅代码:

 

我是⼀级标题

我是⼆级标题

我是三级标题

经过浏览器解析后的效果如下:

30分钟从零开始入门拿下 HTML_第2张图片

HTML 标签基础

HTML(HyperText Markup Language)是构建网页的标准语言。HTML 代码由“标签”构成,标签用尖括号 < > 包围,主要有以下几个特点:

  • 成对标签:大部分标签成对出现,如 

    (开始标签)和 

    (结束标签),中间包含标签内容。
  • 单标签:有些标签是单标签,只需要开始标签,如 
    (换行)。
  • 属性:开始标签中可能带有属性,如 id="myId",用于设置标签的特定特性或唯一标识符。

HTML 文件基本结构

一个简单的 HTML 文件结构如下:




    第一个页面


    hello world

  •  是根标签。
  •  包含页面的元数据,如 </code> 用于设置页面标题。</li> <li><code><body></code> 包含页面上显示的内容。</li> </ul> <h3 id="%E6%A0%87%E7%AD%BE%E5%B1%82%E6%AC%A1%E7%BB%93%E6%9E%84">标签层次结构</h3> <p>标签之间有父子关系和兄弟关系。例如:</p> <pre><code class="language-html"><html> <head> <title>第一个页面 hello world

    •  和  是  的子标签。
    • </code> 是 <code><head></code> 的子标签。</li> <li><code><head></code> 和 <code><body></code> 是兄弟关系。</li> </ul> <h3 id="%E5%BC%80%E5%8F%91%E5%B7%A5%E5%85%B7">开发工具</h3> <p>虽然可以用系统自带的记事本编写 HTML,但使用专业开发工具会更方便。推荐使用 Visual Studio Code (VSCode),它是一个跨平台的代码编辑器,支持多种编程语言,并且提供强大的功能和插件。</p> <h3 id="%E5%B8%B8%E8%A7%81%20HTML%20%E6%A0%87%E7%AD%BE">常见 HTML 标签</h3> <h4 id="%E6%A0%87%E9%A2%98%E6%A0%87%E7%AD%BE%EF%BC%88%3Ch1%3E%20%E5%88%B0%20%3Ch6%3E%EF%BC%89">标题标签(<code><h1></code> 到 <code><h6></code>)</h4> <p>标题标签用于定义不同级别的标题,从 <code><h1></code> 到 <code><h6></code>,数字越大字体越小。</p> <pre><code class="language-html"><h1>这是一级标题</h1> <h2>这是二级标题</h2> <h3>这是三级标题</h3> <h4>这是四级标题</h4> <h5>这是五级标题</h5> <h6>这是六级标题</h6></code></pre> <p></p> <h4 id="%E6%AE%B5%E8%90%BD%E6%A0%87%E7%AD%BE%EF%BC%88%3Cp%3E%EF%BC%89">段落标签(<code><p></code>)</h4> <p><strong><code><p></code> 标签定义一个段落。HTML 会自动在段落前后添加空白间距。</strong></p> <pre><code class="language-html"><p>这是一个段落。</p> <p>这是另一个段落。</p></code></pre> <pre></pre> <h4 id="%E6%8D%A2%E8%A1%8C%E6%A0%87%E7%AD%BE%EF%BC%88%3Cbr%20%2F%3E%EF%BC%89">换行标签(<code><br /></code>)</h4> <p><code><br /></code> 标签用于在文本中插入换行。</p> <pre><code class="language-html">这是第一行<br /> 这是第二行<br /> 这是第三行</code></pre> <p></p> <h4 id="%E5%9B%BE%E7%89%87%E6%A0%87%E7%AD%BE%EF%BC%88%3Cimg%3E%EF%BC%89">图片标签(<code><img></code>)</h4> <p><code><img></code> 标签用于插入图片,必须带有 <code>src</code> 属性指定图片路径。</p> <pre><code class="language-html"><img src="rose.jpg" width="500" height="800" /></code></pre> <pre></pre> <h4 id="%E8%B6%85%E9%93%BE%E6%8E%A5%E6%A0%87%E7%AD%BE%EF%BC%88%3Ca%3E%EF%BC%89">超链接标签(<code><a></code>)</h4> <p><code><a></code> 标签用于创建链接,可以是内部链接或外部链接。<code>href</code> 属性指定链接的目标。</p> <pre><code class="language-html"><a href="http://www.baidu.com" target="_blank">百度</a></code></pre> <p></p> <h4 id="%E8%A1%A8%E6%A0%BC%E6%A0%87%E7%AD%BE">表格标签</h4> <p>表格由 <code><table></code> 标签创建,包含 <code><tr></code>(行)、<code><td></code>(单元格)、<code><thead></code>(表头)、<code><tbody></code>(表体)等标签。<code><code> </code></code></p> <pre><code class="language-html"><table border="1" cellpadding="10"> <thead> <tr> <th>姓名</th> <th>性别</th> <th>年龄</th> </tr> </thead> <tbody> <tr> <td>张三</td> <td>男</td> <td>10</td> </tr> <tr> <td>李四</td> <td>女</td> <td>11</td> </tr> </tbody> </table></code></pre> <h4 id="%E8%A1%A8%E5%8D%95%E6%A0%87%E7%AD%BE">表单标签</h4> <p>表单用于用户输入数据,包含 <code><form></code>(表单域)和 <code><input></code>(输入控件)等标签。</p> <pre><code class="language-html"><form action="submit.html"> <label for="username">用户名:</label> <input type="text" id="username" name="username" placeholder="请输入用户名" /><br /> <label for="password">密码:</label> <input type="password" id="password" name="password" placeholder="请输入密码" /><br /> <input type="submit" value="提交" /> </form></code></pre> <p></p> <h4 id="%E4%B8%8B%E6%8B%89%E8%8F%9C%E5%8D%95%EF%BC%88%3Cselect%3E%EF%BC%89">下拉菜单(<code><select></code>)</h4> <p><code><select></code> 标签用于创建下拉菜单,<code><option></code> 标签定义菜单项。</p> <pre><code class="language-html"><select> <option>北京</option> <option selected>上海</option> </select></code></pre> <p></p> <h4 id="%E6%96%87%E6%9C%AC%E5%8C%BA%E5%9F%9F%EF%BC%88%3Ctextarea%3E%EF%BC%89">文本区域(<code><textarea></code>)</h4> <p><code><textarea></code> 标签用于创建多行文本输入框。</p> <pre><code class="language-html"><textarea rows="4" cols="50">默认文本</textarea></code></pre> <p></p> <h4 id="%E6%97%A0%E8%AF%AD%E4%B9%89%E6%A0%87%E7%AD%BE%EF%BC%88%3Cdiv%3E%20%E5%92%8C%20%3Cspan%3E%EF%BC%89">无语义标签(<code><div></code> 和 <code><span></code>)</h4> <ul> <li><code><div></code> 用于分隔大块区域,通常是块级元素。</li> <li><code><span></code> 用于小范围内的内联元素。</li> </ul> <pre><code class="language-html"><div> <span>这是一个 span 元素。</span> <span>这是另一个 span 元素。</span> </div></code></pre> <h3 id="%E7%BB%BC%E5%90%88%E7%BB%83%E4%B9%A0%EF%BC%9A%E7%94%A8%E6%88%B7%E6%B3%A8%E5%86%8C%E9%A1%B5%E9%9D%A2">综合练习:用户注册页面</h3> <p>以下是一个简单的用户注册页面示例,包含了标题、表单和输入控件:</p> <pre><code class="language-html"><!DOCTYPE html> <html> <head> <title>用户注册

      用户注册

      用户名:
      手机号码:
      密码:

      已有账号? 登录


      总结

      以上就是 html 的入门内容了, 后续还会更新 css js,希望大家多多支持.

      博客不易,希望可以帮助到大伙,动动小手点个赞作者会开心很久,感谢阅览。

你可能感兴趣的:(html,前端,java,html5,程序人生,面试,学习方法)