小张前端学习(一):HTML基础

文章目录

  • 背景知识
    • B/S与C/S架构
  • HTML
    • 标题元素
    • 段落标签
    • 结构标签
    • 链接标签
    • 图片标签
    • 列表
    • 表格
    • 表单
      • input标签
      • 下拉列表
      • 多行文本框

背景知识

B/S与C/S架构

  • B/S架构
    优点:
    1.免安装客户端
    2.版本更新方便

  • C/S架构

    • 优点:

    • 缺点:
      1.需要用户安装,并且手动更新。

HTML

1.html对大小写不敏感,标签可大可小写,标签的属性的值必须以双引号来包裹。
2. 是用来告诉浏览器,用什么规范(html5、xhtml、html 4等)去解析这个文件。同时DOCTYPE 可以小写
3. meta标签的属性charset可以写成charset="utf-8"或者charset="UTF-8"
4. 可以上https://validator.w3.org/校验自己的html文档是否标准
5.

标题元素

小张前端学习(一):HTML基础_第1张图片
小张前端学习(一):HTML基础_第2张图片
ps:其他不在h1~h6范围内的标签(如h7)会按照div来解析。

段落标签

小张前端学习(一):HTML基础_第3张图片
PS:如需连续输入多个空格,要使用  (Non-breaking Space.)
小张前端学习(一):HTML基础_第4张图片

结构标签

小张前端学习(一):HTML基础_第5张图片

  • 不同的块标签(div)一般在不同行,多个span标签一般在同一行(如果同一行放不下,浏览器会自动换行)
  • 块级元素(如div标签)的宽度取决于父元素的宽度,内联元素(如span)的宽度取决于元素本身内容的宽度

示例:
小张前端学习(一):HTML基础_第6张图片



<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Documenttitle>
head>

<body>
    <div>
        大学课程:
        <div>高数div>
        <div>英语div>
    div>
    <div>div2div>

    <br/>
    <span>span1span>
    <span>span2span>
    <span>
        大学课程:
        <span>高数span>
        <span>英语span>
    span>
body>

html>

链接标签

小张前端学习(一):HTML基础_第7张图片
PS:
anchor ['æŋkər] 锚(锚点的引申意思是连接)
href :hyperlink reference 超链接引用
空链接可以用来显示一个空链接(以前还没有button标签时,添加上样式和函数,来用作按钮,现在已经很少用了)
base标签可以用来设置全局公共属性。

图片标签

  • alt属性用于图片加载失败时,显示的替代性文字
  • 还可以设置宽度width和高度height,只设置一个时,会按图片原来的宽高比将宽度和高度同时进行缩放。
  • title设置鼠标移到图片上时,图片上显示的文字

示例:
在这里插入图片描述

<img src="11.png" alt="图片加载失败时的替代文字" title="鼠标移入时显示的文字"/>

列表

ul:unordered list 无序列表
ol:ordered list 有序列表
dl:definition list 自定义列表
li:list item 列表项
小张前端学习(一):HTML基础_第8张图片
小张前端学习(一):HTML基础_第9张图片
小张前端学习(一):HTML基础_第10张图片
示例:
小张前端学习(一):HTML基础_第11张图片


<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>列表title>
head>
<body>
    <ul >  
        <li>高数li>
        <li>英语li>
        <li>物理li>
    ul>

    <ol>
        <li>高数li>
        <li>英语li>
        <li>物理li>
    ol>

    <dl>
        <dt>大学课程dt>
        <dd>高数dd>
        <dd>英语dd>
        <dd>物理dd>

        <dt>大学学年dt>
        <dd>大一dd>
        <dd>大二dd>
        <dd>大三dd>
    dl>

body>
html>

表格

小张前端学习(一):HTML基础_第12张图片
在这里插入图片描述

  • td用来表示一个单元格,有两个常用属性。colspan用于表示单元格跨了多少列(合并同一行不同列的多个单元格),rowspan用于表示单元格跨了多少行。
    tr:table row 表格中的一行
    td:table data cell 表格的单元格
    caption:表格名称
    thead:全部表头
    th:每一列的表头

示例:
小张前端学习(一):HTML基础_第13张图片


<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Documenttitle>
head>

<body>

    <table align="center" border="1" cellspacing="0">
        <caption>课程信息表caption>
        <colgroup span="4" width="100">colgroup>
        <thead>
            <tr>
                <th>课程名称th>
                <th>学分th>
                <th>学时th>
            tr>
        thead>

        <tbody align="center">
            <tr>
                <td>领导力td>
                <td>3td>
                <td>36td>
            tr>

            <tr>
                <td>体育td>
                <td>0.5td>
                <td>40td>
            tr>
            <tr>
                <td>毛概td>
                <td>5td>
                <td>100td>
            tr>
            <tr>
                <td>软件工程td>
                <td>5td>
                <td>100td>
            tr>

        tbody>

        <tfoot>
            <tr>
                <td colspan="3">总计:13.5学分td>
            tr>

        tfoot>
    table>

body>

html>

表单

input标签

小张前端学习(一):HTML基础_第14张图片
小张前端学习(一):HTML基础_第15张图片
小张前端学习(一):HTML基础_第16张图片
1.每一组单选或多选框,必须有相同的name属性值
2.点击“提交”按钮后,会使用method属性值(如GET)提交到action属性值上(后端接口链接),同时传递键值对参数,key是每个表单标签name属性值,value是标签value属性值
3.设置点击文字后选中旁边单选框的效果:添加一个label并绑定至input标签上(设置input的id和label的for有相同的值)
示例:
小张前端学习(一):HTML基础_第17张图片
在这里插入图片描述

<form action="https://www.huawei.com/cn/" method="GET">
       <div>购买手机div>
       <div>用户名:<input type="text" name="user">div>
       <div>密码:<input type="password" name="pwd">div>
       <div>手机型号:<input type="radio" name="model" id="p" value="p40"/><label for="p">P40label>  <input type="radio" name="model" id="m" value="m40"/><label for="m">mate40label>  div>
       <div>选购配件:<input type="checkbox" name="part" value="earphone"/>蓝牙耳机 <input type="checkbox" name="part" value="battery"/>充电宝 div>
       <div>
           <input type="submit" value="现在提交"/>
           <input type="reset"/>
       div>
form>

下拉列表

小张前端学习(一):HTML基础_第18张图片
1.selected写在哪个option标签上,代表默认选中哪个标签
示例:
在这里插入图片描述

<select name="course" id="">
        <option value="1">数学option>
        <option value="2" selected>英语option>
        <option value="3">物理option>
select>

多行文本框

小张前端学习(一):HTML基础_第19张图片
小张前端学习(一):HTML基础_第20张图片

你可能感兴趣的:(前端学习)