前端第一课：HTML基本知识、基本标签与常用属性

最新推荐文章于 2021-06-10 03:44:37 发布

槡慕青青

最新推荐文章于 2021-06-10 03:44:37 发布

阅读量196

点赞数 1

分类专栏：前端文章标签： html html5 css 前端网页设计

本文链接：https://blog.csdn.net/weixin_43866735/article/details/116205933

版权

前端专栏收录该内容

1 篇文章 0 订阅

订阅专栏

写在前面的话，本人自学前端，先从html开始啦，学习顺序是html、css、js、vue，目前了解的就这么多，这是我的学习笔记，以后会一点一点添加的~~

本笔记适合搭配b站pink老师的前端教程一起食用。附一下链接 https://www.bilibili.com/video/BV14J4114768?share_source=copy_web

基本结构：
- <!DOCTYPE html>
- <html lang= en xmlns=http://www.w3.org/1999/xhtml>
- <head>
  - <meta charset=utf-8 />
- </head>
- <body>
- </body>
- </html>
标签（上）
常用标签
- <h1></h1> 一级标题
- <p> </p> 段落（浏览器里自动换行）
- <br /> 换行
文本格式化标签（用前面的）
- <strong></strong>或者<b></b> 加粗
- <em></em>或者<i></i> 倾斜
- <del></del>或者<s></s> ~~删除线~~
- <ins></ins>或者<u></u> 下划线
常用标签（无语义，布局）
- <div> 一个div独占一行，大盒子
- <span> 横着显示，一行多个span，小盒子
图像标签和路径
- <img src="图像URL" />
- 属性（属性="属性值"）
  - src：指定img的路径和文件名（必须）
  - alt：图片替换文本，图像显示不出来的时候用文字替换
  - title="......"：提示文本，鼠标放到图像上，显示的文字
  - width="500" ：给图像设定宽度
  - height="100"：给图像设定高度
  - border="15"：给图像设定边框粗细
超链接标签
- <a href="跳转目标" target="目标窗口的弹出方式">文本或图像</a>
- 属性
  - href：用于指定连接目标的url地址（必须）
  - target：新窗口打开的方式默认值是_self 打开新窗口是_blank
- 空链接：#
- 锚点链接（相当于增加一个标记）
  - <a href="#people_intro"> 人物</a>
  - 然后找到目标跳转位置的标签，里面添加一个id属性 <h3 id="people_intro">人物介绍</h3>
注释标签和特殊字符
- 
- 特殊字符：  空格 < 小于号 > 大于号
标签（下）
- 表格标签
- 列表标签
- 表单标签
表格标签
- 展示数据
- <table></table> 定义标签
- <tr></tr> 定义表格中的行（嵌套在上面标签中）
- <td></td> 定义表格中的单元格（嵌套在上面标签中）
- 基本语法
  - <table>
    - <tr> <td>单元格内容</td> <td>单元格内容</td> <td>单元格内容</td> </tr>
    - <tr> <td>单元格内数字</td> <td>单元格内数字</td> <td>单元格内数字</td> </tr>
    - <tr> <td>单元格内数字</td> <td>单元格内数字</td> <td>单元格内数字</td> </tr>
  - </table>
<th></th> 表头单元格会居中、加粗代替<td>单元格做表头
<thead> <tbody> 更好表示表格的语义
表格属性（写到table里面去）
- align="left" "center" "right" 规定表格对齐方式
- border="1" 或者 '' 规定表格单元是否有边框
- cellpadding="像素值" 规定单元边沿与内容间空白，默认1px
- cellspacing="像素值" 规定单元格之间空白，默认2px
- width=“像素值 or 百分比” 规定表格宽度 (height...)
- 合并单元格（写在单元格标签里面<td>）
  - rowspan="2"
  - colspan="2"
列表标签（无序列表有序列表自定义列表）
- 无序列表
  - 布局
  - <ul></ul>定义无序列表，只能嵌套<li>标签
  - <li></li>定义列表项，是一个比较大的容器，可以放任何标签
  - 样式属性用css设置
- 有序列表 <ol></ol>
- 自定义列表
  - 对术语、名词进行解释和描述
  - <dl></dl> 只能有dt和dd
  - <dt>名词1</dt>
  - <dd>名词1解释1</dd>，一个<dt>可以对应多个<dd>

表单
- 表单域、表单控件、提示信息
- <form></form> 表单域：把范围内表单元素信息提交给服务器。
  - 属性
    - action="url地址"
    - method="GET" "POST"
    - name="表单名称"
- 表单元素
  - <input type=""> 输入表单元素（表单控件）：单标签
    - type属性
      - text：文本框用户可以里面输入任何文字
      - password：密码框，定义密码字段，用户看不见输入的密码
      - radio：单选按钮，可以实现多选一
      - checkbox：复选框，可以实现多选
      - submit：提交按钮
      - reset：重置按钮，还原初始默认状态
      - button：普通按钮
      - file：文件域，上传文件使用
    - name属性
      - 定义input元素的名称，单选按钮必须有相同的元素名
    - value属性
      - 规定input元素的值
    - checked属性
      - 单选框和复选框可以设置，规定当页面打开的时候默认选中这个input按钮
    - maxlength（不重要）
      - 规定输入字段字符的最大长度
  - <label>
    - <label></label>
    - <label for=""> for里面对应的值要与对应标签的id值一样
    - 绑定对应标签
  - <select> 下拉表单元素
    - <select></select>
    - 至少包含一对<option></option>
    - <option>中定义selected="selected"时。默认选中
  - <texteara> 文本域表单元素
    - 定义多行文本输入的控件
    - <textarea></textarea>

放一个案例，这是pink老师视频里的综合案例，我自己写的。强烈建议自己看了视频里的预览，自己先做一遍，再对照着视频里pink老师的写法，查漏补缺，对比一下彼此的优劣，这样更有利于知识的巩固。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>html综合案例</title>
</head>
<body>
    <h4>青春不常在，抓紧谈恋爱</h4>
    <table align="left">
        <tr>
            <td>性别</td>
            <td><input type="radio" name="sex" value="sex_man" checked><img src="" alt="男头">男
                <input type="radio" name="sex" value="sex_woman"><img src="" alt="女头">女</td>
        </tr>
        <tr>
            <td>生日</td>
            <td>
                <select name="year" id="year" >
                    <option selected="selected">--请选择年--</option>
                    <option>1999</option>
                </select>

                <select name="month" id="month">
                    <option selected="selected">--请选择月--</option>
                    <option>1</option>
                </select>

                <select name="day" id="day">
                    <option selected="selected">--请选择日--</option>
                    <option>1</option>
                </select>
                
            </td>
        </tr>
        <tr>
            <td>所在地区</td>
            <td><input type="text" value="北京思密达"></td>
        </tr>
        <tr>
            <td>婚姻状况</td>
            <td><input type="radio" name="married_status" id="married_no" checked><label for="married_no">未婚</label>
                <input type="radio" name="married_status" id="married_yes"><label for="married_yes">已婚</label>
                <input type="radio" name="married_status" id="married_past"><label for="married_past">离婚</label></td>
        </tr>
        <tr>
            <td>学历</td>
            <td><input type="text" value="幼儿园"></td>
        </tr>
        <tr>
            <td>喜欢的类型</td>
            <td><input type="checkbox" id="1"><label for="1">妩媚的</label>
                <input type="checkbox" id="2"><label for="2">可爱的</label>
                <input type="checkbox" id="3"><label for="3">小鲜肉</label>
                <input type="checkbox" id="4"><label for="4">老腊肉</label>
                <input type="checkbox" id="5"><label for="5">都喜欢</label></td>
        </tr>
        <tr>
            <td>自我介绍</td>
            <td><textarea name="" id="">自我介绍</textarea></td>
        </tr>
        <tr>
            <td></td>
            <td><input type="button" value="免费注册"></td>
        </tr>
        <tr>
            <td></td>
            <td><input type="checkbox" checked>我同意注册条款和会员加入标准</td>
        </tr>
        <tr>
            <td></td>
            <td><a href="">我是会员，立即登录</a></td>
        </tr>
        <tr>
            <td></td>
            <td><h5>我承诺</h5>
                <ul>
                <li>年满18岁、单身</li>
                <li>抱着严肃的态度</li>
                <li>真诚寻找另一半</li>
            </ul></td>
        </tr>
    </table>

</body>
</html>

好了，恭喜，html的所有知识都在这里了。

完结撒花！！！！

下一篇笔记 CSS！

槡慕青青

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
1
评论
前端第一课：HTML基本知识、基本标签与常用属性

写在前面的话，本人自学前端，先从html开始啦，学习顺序是html、css、js、vue，目前了解的就这么多，这是我的学习笔记，以后会一点一点添加的~~本笔记适合搭配b站pink老师的前端教程一起食用。附一下链接https://www.bilibili.com/video/BV14J4114768?share_source=copy_web 基本结构： <!DOCTYPE html> <html lang= en xmlns=http://www.w3.org/199..
复制链接

扫一扫