关于前端:前端入门之html

50次阅读

共计 3768 个字符，预计需要花费 10 分钟才能阅读完成。

Web 规范

web 规范的形成：
构造（HTML)、体现(CSS)、行为(JavaScript）

HTML 标签

语法标准

<!DOCTYPE html> 意思是以后页面采纳的是 HTML5 版本来显示的，是文档类型申明标签
<html lang="en"> 其中 lang 示意 language，en 示意英文网页，ah-CN 就是中文网页，次要是提醒作用
<mate charset="UTF-8"> charset 示意字符集的意思，UTF- 8 示意万国码，GB2312 示意简体中文，BIG5 示意繁体中文，该句是十分重要的，否则可能呈现乱码

罕用标签

题目标签 <h1>-<h6>

重要性递加，一个题目独占一行

段落标签 p

换行标签 <br/>

单词 break 的缩写，能够强制换行
是一个单标签

文本格式化标签

加粗：<strong></strong>/<b></b>
歪斜：<em></em>/<i></i>
删除线：<del></del>/<s></s>
下划线:<ins></ins>/<u></u>

图像标签 <img>

是一个单标签
<img src="图像 URL"/>
插入图片之前须要先把图片放在 html 文件一起
<img src="朝花夕誓 1.jfif" alt="找不到图片的门路"/>
alt 示意如果图片显示不进去就会用它的属性是来代替

title 属性的值会在鼠标移到图片上的时候显示进去
width 属性设置图像的宽度
height 属性设置图片的高度

<img src="朝花夕誓.jfif" alt="找不到图片的门路" title="这里是小仙女" width="700px" height = "500px"/>

border 能够给图片加上边框
属性之间是不辨别程序的

文件夹和根目录

目录文件夹: 做网页所须要的相干素材，例如:html，图片等
根目录：关上目录文件夹的第一层就是根目录

相对路径和绝对路径

相对路径：图片绝对于 HTML 页面的地位

<img src ="../images/ 朝花夕誓.jfif"/>

绝对路径：通常是从盘符开始的例如 C:\ 或者 D:\ 或者是残缺的网址

留神绝对路径和相对路径的斜杠是相同的，然而当绝对路径是网址的时候斜杠和相对路径一样

链接标签

<a href="跳转地址" target="指标窗口的弹出形式" ><a/>

target 默认属性值为_self 此外还包含_blank

外部链接 内部链接 空链接 下载链接
网站外部页面之间互相链接，间接连贯外部网页名称即可 各种网址 <a href="#"> 空链接 </a> 下载链接地址链接的是文件.exe 或者是 .zip 等压缩包模式, 例如 <a href = "pic.zip"> 下载图片 </a>

也能够为网页元素例如图片，网格，音频等都能够增加链接

锚点链接

当页面篇幅很长的时候则须要锚点链接来实现跳转
1、设置 href 的属性值为“# 名字”的模式，例如<a href="#one"> 第二季 </a>
2、找到指标地位标签，外面增加一个 id 属性 = 方才的名字, 例如<h3 id="one"> 第二季 </h3>

正文和特殊字符

正文标签：<!-- hhhhhhhhh -->

特殊字符：

表格标签

  <table>
    <tr>
      <td> 单元格外面的文字 </td>
    </tr>
</table>

table 用于定义表格
tr 用于定义表格中的行
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>

表头单元格标签

表头单元格外面的文字会加粗，内容会居中显示

<table>
       <tr>
        <th> 第一列名字 </th>
        <th> 第二列名字 </th>
        <th> 第三列名字 </th>
       </tr>
       <tr>
        
        <td> 二行一列 </td>
        <td> 二行二列 </td>
        <td> 二行三列 </td>
       </tr>
       <tr>
        
        <td> 三行一列 </td>
        <td> 三行二列 </td>
        <td> 三行三列 </td>
       </tr>
    </table>

表格属性

<table align="center" border="1" cellpadding="20" cellspacing="0" width="500">

align 是文字在表格中的地位
cellpadding 是单元格与文字之间的间隔
cellspacing 是指单元格之间的间隔

表格构造标签

能够将表格宰割成表格头部和表格主体局部：<thead> 标签和 <tbody>

例如：

<table align="center" border="1" cellpadding="20" cellspacing="0" width="500">
       <thead>
        <tr>
            <th> 第一列名字 </th>
            <th> 第二列名字 </th>
            <th> 第三列名字 </th>
           </tr>
       </thead>
        <tbody>
            <tr>
        
                <td> 二行一列 </td>
                <td> 二行二列 </td>
                <td> 二行三列 </td>
               </tr>
               <tr>
                
                <td> 三行一列 </td>
                <td> 三行二列 </td>
                <td> 三行三列 </td>
               </tr>
        </tbody>
       
    </table>

合并单元格

跨行合并：rowspan=” 合并单元格格数 ”
最下面单元格作为指标单元格，写合并代码
跨列合并：colspan=” 合并单元格个数 ”
最左侧单元格作为指标单元格，写合并代码

   <table border="1" cellspacing="0" width="500" height="400">
        <tr >
            <td></td>
            <td colspan="2"></td>  
        </tr>
        <tr>
            <td rowspan="2"></td>
            <td></td>
            <td></td>
        </tr>
        <tr>
           
            <td></td>
            <td></td>
        </tr>
     </table>

合并单元格的时候记住删除多余的单元格（即是合并的指标单元格的其余单元格）

列表

无序列表：

 <h3> 你喜爱的食物 </h3>
    <ul>
        <li> 榴莲 </li>
        <li> 火锅 </li>
        <li> 烧烤 </li>
    </ul>

ul 标签中只能有 li 标签，例如 p 标签不能呈现在 ul 中，li 外面能够放任一标签
有序列表：

<h3> 粉丝排行榜 </h3>
    <ol>
        <li> 迪丽热巴；19808</li>
        <li> 赵丽颖：12344</li>
        <li> 小红：1</li>
    </ol>

同理，ol 只能放 li
li 可放任意

自定义列表：
罕用于定义形容列表

 <dl>
        <dt> 关注咱们 </dt>
        <dd> 新浪微博 </dd>
        <dd> 官网微信 </dd>
        <dd> 分割咱们 </dd>
    </dl>

表单

<form action="url 地址" method="提交形式" name="表单域名称">
    各种表单元素控件
</form>

action 用于指定几首并解决数据的服务器程序的地址
method 属性值包含 get/post, 用于设置表单数据的提交形式
name 用于指定表单的名称，以区别同一页面中多个表单域

表单域就是 form

表单控件

1、input 输出表单元素（单标签）
<input type=""/>

   <form>
        用户名：<input type="text"/><br>
        <!-- 明码框 -->
        明码:   <input type="password"/><br>
        <!-- 单选按钮 -->
        性别：男 <input type="radio"/> 女 <input type="radio"/><br>
        <!-- 多选按钮 -->
        喜好：吃饭 <input type="checkbox"/> 睡觉 <input type="checkbox"/> 打豆豆 <input type="checkbox"/>

    </form>

单选按钮问题解决：
name 属性：区别不同的表单，定义 input 元素的名称
性别实现单选：三个 input 的 name 的属性值都是一样的
value 属性：次要供后盾人员应用，规定 input 元素的值
单选框和复选框都要有雷同的 name 值
checked 属性：次要用于单选框和复选框，默认选中
maxlength 属性：规定输出字段中字符的最大长度

2、select 下拉表单元素

<select>
   <option> 选项 1 </option>
   <option> 选项 2 </option>
   <option> 选项 3 </option>
....
</select>

selected 属性默认抉择

  <form action="">
        <select>
            <option value=""> 山东 </option>
            <option value=""> 北京 </option>
            <option value=""> 四川 </option>
        </select>
    </form>

3、textarea 文本域表单元素
特大号文本框
罕用于留言板，评论

 <form action="">
        今日反馈：<textarea cols="50" rows="5">
            
        </textarea>
    </form>

label 标签

用于绑定一个表单元素，当点击 label 标签内的文本的时候，浏览器会主动将焦点转到或者抉择对应的表单元素上，用来减少用户体验

label 外面的 for 属性该当与相干元素的 id 属性雷同

<label for="man"> 男 </label><input type="radio" name="sex" id="man"/>

正文完
前端
发表至： 前端
2022-10-16
 0
关于前端:前端面试每日-31-第776天
关于scss:scss用法大全
关于前端:深入nodejs的eventloop
关于前端:iOSMobLink集成