HTML基础

基础框架

HTML(Hyper Text Markup Language)是超文本标记语言。它不是一种编程语言,而是一种标记语言。标记语言通常是一套成对出现的标记标签组成,开始标签、内容和结束标签称为HTML元素。

  • :声明html5文档。
  • :html 页面的根元素,包含的是完整的html页面。
  • :头部元素,包含网页编码格式和标题等信息。
  • :放置头部元素中,设置默认编码方式为utf-8,否则标题会乱码。
  • :描述文档页面的标题。
  • :包含可见的页面内容(如文本、图像、视频、音频)
  • :定义一个内容一级标题,可以定义

    一级至六级标题。
  • :定义一个段落。
  • :使用Pycharm编辑器,快捷键为Ctrl+C。

基础示例:

<! DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>HTML学习title>
head>
<body>

<h1>一级标题h1>
<h2>二级标题h2>

<p>HTML<br>CSSp>

<hr>
body>
html>

HTML 字符实体

HTML基础_第1张图片

文字标签

  • :加粗字体。
  • :斜体字。
  • :加大和缩小字体。
  • :下标和上标字体。
  • :设置颜色和字体,可以使用英文单词、rgb和十六进制三种方式设置颜色,字体大小范围为1~7。

超链接标签

  • ...:href参数存放连接,…存放链接文本,点击可以跳转另一个网站。

除此之外,还可以用href做弹出框,比如弹出框

图像标签

  • :src参数传入图片路径,title设置鼠标悬浮标题,alt设置图片替换文本,如图片资源加载不出来,可显示文本,宽度和高度可默认设置。

综合示例:

<! DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>HTML 文字标签、超连接、图像title>
head>
<body>

使用<b>加粗b><strong>,再一次加粗,strong><i>这个文本是斜体i>
<br>
<big>放大big><small>缩小small>
<br>
展示上下标:<sub>下标sub><sup>上标sup>

<br>
<font color="black" size="4">坚持学习!font>
<font color="rgb(184,134,11)" size="5">坚持学习!font>
<font color="#999999" size="7">坚持学习!font>
<hr>
<a href="https://www.runoob.com">菜鸟教程a>
<a href="Javascript:void(0)" onclick="alert('人生苦短,我爱Python')">弹出框a>
<hr>

<img src="1.jpg">

<img src="11.jpg" alt="白鹿">

<img src="1.jpg" width="400px" height="200px">

<img src="1.jpg" title="白鹿" width="400px" height="300px">
body>
html>

列表标签

    • :定义无序列表的父标签,默认为实心圆圈,square(方框)、circle(空心圆)、disc(实心圆)。
      1. :定义有序列表的父标签。
      2. :定义子列表标签展示。

      块标签

      • :块级元素,一般作为网页不同区域划分。
      • :内联元素,用来组合文档中的行内元素,同行显示。

      列表和块示例:

      <! DOCTYPE html>
      <html>
      <head>
          <meta charset="utf-8">
          <title>列表和块标签title>
      head>
      <body>
      <p>Python 学习路线p>
      <ul type="square">
          <li>Python 基础知识li>
          <li>Python 数据分析li>
          <li>Python 网络爬虫li>
          <li>Python 编程开发li>
          <li>Python 自动化办公li>
      ul>
      
      <div>Mysql
          必备知识
      div>
      <ol>
          <li>Mysql 基础知识li>
          <li>Mysql 增删改查li>
          <li>Mysql 存储过程li>
      ol>
      
      <span>Mysqlspan>
      <span>Pythonspan>
      body>
      html>
      

      HTML基础_第2张图片

      表格标签

      为表格标签,有如下基本属性:

      • :子标签,tr 是 table row 的缩写,表示表格的一行。
      • :子标签,td 是 table data 的缩写,表示表格的数据单元格
      • :子标签,th 是 table header的缩写,表示表格的表头单元格。
      • :子标签,设置表格的标题。
      • border:设置表格的边框。
      • bordercolor:设置边框的颜色。
      • width:设置表格的宽度。
      • height:设置表格的高度。
      • align:设置文本内容的对齐方式(left、right、center)。
      • celspaing:设置单元格的间隔

      表格示例:

      <! DOCTYPE html>
      <html>
      <head>
          <meta charset="utf-8">
          <title>表格title>
      head>
      <body>
      <p>制作一个表格p>
      <table border="1" bordercolor="blue" align="center">
          <caption>学习路线caption>
          <tr>
              <th>toolth>
              <th>infoth>
          tr>
          <tr>
              <td>Pythontd>
              <td>数据分析td>
          tr>
          <tr>
              <td>Mysqltd>
              <td>增删改查td>
          tr>
      table>
      body>
      html>
      

      HTML基础_第3张图片

      表单标签

      HTML 表单用于收集用户的输入信息,表示文档中的一个区域,此区域包含交互控件,将用户收集到的信息发送到 Web 服务器。通常包含各种输入字段、复选框、单选按钮、下拉列表等元素。在实际生活中,最常见的就是问卷调查和账号登入。

      语法为

      ,常见属性如下:

      • action:提交到服务器的地址。
      • method:提交采用的方式(get和post)。
      • :元素用于为表单元素添加标签,提高可访问性。
      • :元素是最常用的表单元素之一,它可以创建文本输入框、密码框、单选按钮、复选框等。type 属性定义了输入框的类型,id 属性用于关联 元素,name 属性用于标识表单字段。
        • type="text":文本输入项。
        • type="password":密码输入项。
        • type="radio":单选输入项。
        • type="checkbox":多选输入项。
        • type="email":邮箱输入项。
        • type="file":文件输入项。
        • type="button":普通按钮。
        • type="submit":提交按钮。
        • type="reset":重置按钮。
      • :下拉列表项,子标签为

      表单示例:

      <! DOCTYPE html>
      <html>
      <head>
          <meta charset="utf-8">
          <title>表单title>
      head>
      <body>
      <h3>表单h3>
      <form action="/" method="post">
          
          <label for="name">姓名:label>
          <input type="text" id="name" name="name" required><br>
      
           
          <label for="psd">密码:label>
          <input type="password" id="psd" name="psd" size="20" required><br>
      
          
          <label>性别:label>
          <label for="male">label>
          <input type="radio" id="male" name="gender" checked>
          <label for="female">label>
          <input type="radio" id="female" name="gender"><br>
      
          
          技能:<input type="checkbox">Python
          <input type="checkbox">Mysql
          <input type="checkbox">Java
          <input type="checkbox">C++<br>
      
          
          <label for="country">国家:label>
          <select id="country" name="country">
              <option value="cn">中国option>
              <option value="usa">美国option>
              <option value="japan">日本option>
          select><br>
      
          
          <label for="email">邮箱:label>
          <input type="email" id="email" name="email"><br>
      
          
          <label for="file">文件:label>
          <input type="file" id="file" name="file"><br>
      
          
          <input type="submit" value="提交">
      
          
          <input type="reset" value="重置">
      form>
      body>
      html>
      

      HTML基础_第4张图片

      音频和视频标签

      为音频标签,为音频标签,常见属性值如下:

      • src:文件路径。
      • autoplay:自动播放。
      • controls:显示进度控制条。
      • loop:循环播放。
      • width和height:宽度和高度。
      <! DOCTYPE html>
      <html>
      <head>
          <meta charset="utf-8">
          <title>音频和视频标签title>
      head>
      <body>
      <h3>姑娘你别哭泣h3>
      <audio src="柯柯柯啊 - 姑娘别哭泣.mp3" autoplay="autoplay" controls="controls" loop="loop">audio>
      <h3>凡人修仙80集预告h3>
      <video src="凡人修仙80集预告.mp4" width="500px" height="300px" autoplay="autoplay" controls="controls" loop="loop">video>
      body>
      html>
      

      HTML基础_第5张图片

      框架标签

      为框架标签,可以将多个HTML合并在一起,常见的合并有横向、纵向和混合合并,属性如下:

      • rows:按照行横向合并,根据填写的百分比进行划分合并。
      • cols:按照列纵向合并,根据填写的百分比进行划分合并。
      • :子标签,用户显示具体的页面内容,src为文件路径。

      HTML基础_第6张图片

      你可能感兴趣的:(Python,网络爬虫,html,前端,python)