前端与HTML|青训营笔记

烤冷面多加香菜
57 阅读2分钟
这是我参与「第五届青训营」伴学笔记的第1天

一、前言

1、什么是前端

使用web技术栈解决多端图形用户交互界面问题

  • 解决GUI人机交互的问题
  • 跨终端
  • Web技术栈
2、前端的技术有哪些
  • HTML:架构
  • CSS:样式；
  • JavaScript（JS)行为；
3、前端应该关注哪方面的问题？
  • 美观
  • 功能
  • 无障碍
  • 安全
  • 性能
  • 兼容性

二、具体内容

一、HTML是什么

  • HTML是用来描述网页的超文本标记语言（Hyper Text Markup Language）是。

image.png

具体代码如下： 
<html>
    <head>
        <meta charset="UTF-8">
        <title>页面标题</title>
    </head>
    <body>
        <h1>一级标题<h1/>
        <p>段落内容<p/>
    </body>
</html>

二、HTML语法

image.png

三、HTML的基本标签

1. 标题标签
<h1>⼀号标题</h1> 
<h2>⼆号标题</h2> 
<h3>三号标题</h3> 
<h4>四号标题</h4> 
<h5>五号标题</h5>
<h6>六号标题</h6>

注意：HTML没有标签；

2.列表

列表分为三类：有序列表和无序列表、定义列表

2.1无序列表

<ul>
    <li>hh</li>
    <li>kk</li>
    <li>jj</li>
</ul>

运行结果如下：

image.png

2.2有序列表

<ol>
    <li>hh</li>
    <li>kk</li>
    <li>jj</li>
</ol>

运行结果如下

image.png

2.3定义列表

<dl>
<dt>名词</dt>
<dd>解释名词1</dd>
<dd>解释名词2</dd>
</dl>

运行结果如下

image.png

3.超链接

超链接：点击页面发生跳转； 使用标签为：

<a href=""></a>

其中href为需要跳转的网址； 如：

<a href="https://www.bytedance.com/)">点击我可以打开字节跳动</a>

显示效果如下：

image.png

点击即可跳转到目标网址

target=”_blank"：在其它窗口打开新连接；

<a href="https://www.bytedance.com/target="_blank">点击我可以打开字节跳动,并且打开新的窗⼝</a>
4.图片标签
<img scr="" alt="" width="" height="" title="">

src:表示资源,图⽚加载时的名字

width(宽),height(⾼):设置图⽚的⼤⼩。

title:⿏标悬停在图⽚上的提示⽂字

alt: 图⽚没有被正常加载时⽹⻚阅读器读取此内容并显示出来

5.输入标签

image.png 5.1单选框Radio 顾名思义就是只能选一个选项

<input type="radio" name="sex">男
<input type="radio" name="sex">女

运行结果如下

image.png

5.2多选框 Checkbox

<input type="checkbox" name="habit">1
<input type="checkbox" name="habit">2
<input type="checkbox" name="habit">3

运行结果如下 image.png

三、课后总结

本节课讲的内容算是比较基础，但是却很重要，课后需要自己再复习理解

avatar
文章
阅读
粉丝