【前端基础】内容构建——HTML标签基础（利用元素对象构建页面骨架）

最新推荐文章于 2024-04-18 22:05:08 发布

骆子无悔

最新推荐文章于 2024-04-18 22:05:08 发布

阅读量309

点赞数

分类专栏：前端基础文章标签： html

本文链接：https://blog.csdn.net/weixin_44275259/article/details/107745405

版权

前端基础专栏收录该内容

5 篇文章 0 订阅

订阅专栏

前端基础——基本概念

HTML元素对象——元素标签

是网页中视觉元素的基本对象，所有视觉元素通过排列、嵌套等组合方式，完成了页面元素的构造；

HTML元素属性——CSS样式

用于对HTML元素进行精细的视觉效果的控制，比如：元素的基本大小、元素内字体的大小、元素的位置；每个HTML元素都一个默认的CSS样式，一般来讲我都会根据页面需要去控制HTML的样式；
CSS一般都是通过选择器，选择一个或多个HTML元素，并进行样式描述，后续我们再讲

JS脚本：

通常用于页面实现交互的效果，由用户点击、滑动或定时器触发等事件，完成页面上元素样式的变化（比如：显示与隐藏），以及元素中数据的改变（请求后台）实现交互

提问：为什么HTML元素一般都是这种形式的？

首先每个HTML元素自带一个默认的样式，我们必须告诉计算机，这些样式作用于哪些访问，所以必须有个头标签标记、尾标签标记；如果是这个元素标签只是作为一个显示效果，就只需要有一个头标签就行

前端基础——元素分类

按照占位效果

块级元素：独占一行，如果不给宽度，块级元素就默认为浏览器的宽度
行内元素：可以多个标签存在一行，对宽高属性值不生效，完全靠内容撑开宽高
行内块元素：结合的行内和块级的有点，不仅可以对宽高属性值生效

按照布局含义

自布局元素：用于决定被套住的元素内的整体页面布局，比如div，table标签
因布局元素：布局元素所作用于的元素个体，比如文本元素，表单元素、图片元素等

HTML元素对象——因布局元素——文本元素

布局元素

<font></font> 文块标签，嵌套默认的文本内容，以控制文本盒子模型
<p></p>         段落标签，段落的行距比普通换行的宽度要大；
<h1></h1>   标题标签，h1→h6，逐渐减小，通常以标题形式存在；

格式控制

<b></b> 定义粗体文本。
<big></big> 定义大号字。
<em><//em>  定义着重文字。
<i></i>定义斜体字。
<small></small> 定义小号字。
<strong></strong>   定义加重语气。
<sub></sub> 定义下标字。
<sup></sup> 定义上标字。
<ins></ins> 定义插入字。
<del></del> 定义删除字。

HTML元素对象——因布局元素——图片元素

元素概述

<video src="webapps/myweb/fuck.avi"></video>
<img 
     src="webapps/myweb/shit.png" 
     alt="webapps/myweb/erro.png"
     width="1000px"        宽度，只设置一个等比缩放，设置百分比会滚轮变化，px固定数值则不会
     height="1000px"       高度
     alt=""          备用图片路径
     src=""          图片路径
     usemap="#mymap" 图映射锚定名
></img>

图片映射器

<map name="mymap" id="mymap">
    <area shape="circle" coords="280,330,40" href="http://doc.tedu.cn/">
    <area shape="circle" coords="365,390,40" href="http://doc.tedu.cn/">
</map>
矩形条件器： 
     shape="rect"
     coords="0,0,100,100  (矩形的四个坐标确定位置)
圆形条件器
     shape="circle"
     coords="365,390,40";(半径，圆心坐标确定矩形)

HTML元素对象——因布局元素——表单元素

Input类元素

【文件上传框】
<input type="file" name="img" multiple="multiple">
【文本输入框】
年龄：<input type="number"  placeholder="请输入昵称" >number<br>
百分比：<input type="range" placeholder="请输入昵称">range"<br>
姓名：<input type="search"  placeholder="请输入昵称">search<br>


请选择时间：<input type="date" name="bday" max="1979-12-31" min="2000-01-02">date<br>
请选择月份：<input type="month">month<br>
请选择星期：<input type="week">week<br>=

请选择昵称：<input name="username" type="text" placeholder="请输入昵称">
请选择密码：<input name="password" type="password" placeholder="请输入密码">
自我介绍：<textarea rows="7"cols="25" placeholder="自我介绍………………" name="say"></textarea>
【下拉框】
option的value值会作为select的value值；
<select name="cars">
    <option value="volvo">Volvo</option>
    <option value="saab">Saab</option>
    <option value="fiat">Fiat</option>
    <option value="audi">Audi</option>
</select>
<input list="browsers">
<datalist id="browsers">
    <option value="Internet Explorer">
    <option value="Firefox">
    <option value="Chrome">
    <option value="Opera">
    <option value="Safari">
</datalist>
【提交数据框】
<input type="submit" value="登录">  提交专用按钮
<input type="reset">               重置输入按钮
<input type="button" value="登录">  万能通用按钮
【单项选择框】
<label>男<input type="radio" name="gender" value="男" checked="checked"></label>
<label>女<input type="radio" name="gender" value="女"></label>
【多项勾选框】
<label><input type="checkbox" checked="checked" name="hobby" value="eat">吃</label>
<label><input type="checkbox" checked="checked" name="hobby" value="diao">钓鱼</label>
<label><input type="checkbox">服务条款，必须请认真阅读！</label>
【外置输入框】
<input type="text" name="lname" form="form1">form1是元素的id！

超链接元素

<a href="http://www.w3school.com.cn/" target="_blank">Visit W3School!</a>
使用 Target 属性，你可以定义被链接的文档在何处显示。
<a href="#tips">有用的提示</a>
<a name="tips">基本的注意事项 - 有用的提示</a>

HTML元素对象——自布局元素——页布局元素

一般布局标签： <div>div</div>     <span>span</span>
语义布局标签：
<header></header>     头部
<nav></nav>           页面导航栏
<artocle></artocle>  文章/正文
<section> </section>  章节、头部
<aside> </aside>      侧边
<figure></figure>     独立的流内容，比如图像、图表、照片、代码等等。
<footer></footer>     脚步
<fieldset>
    <legend>Personal information:</legend>
</fieldset>
Ps：所有语义布局标签，都是div标签

HTML元素对象——自布局元素——列表布局

有序列表

有序号，且指定start从序号几开始，reversed=reversed="reverse"可以配置倒序

<ol>
    <li>牛逼</li>
    <li>牛逼</li>
    <li>牛逼</li>
</ol>

<ol start="5" reversed="reverse">
    <li>牛逼</li>
    <li>牛逼</li>
    <li>牛逼</li>
</ol>

无序列表

通过type可以指定每个li前的图形
（1）图形为无形、空心圆、实心方块;none,circle,square;
（2）排序图形为有序;
decimal（数字）
decimal-leading-zero(01开头)
lower-roman（小写罗马）Ⅰ,Ⅱ,Ⅲ,Ⅳ
upper-roman(大写罗马)
lower-alpha（小写英文）
upper-alpha（大写英文）
cjk-ideographic(汉字数字)

<ul type="square">  <!--type指定默认图形-->
        <li>牛逼</li>
        <li>牛逼</li>
        <li>牛逼</li>
</ul>
<ul position="outside">  <!--position————outside,inside图形的位置-->
        <li>牛逼</li>
        <li>牛逼</li>
        <li>牛逼</li>
</ul>
<ul image="url('images/ul-icon.jpg')">  <!--指定本地图形-->
        <li>牛逼</li>
        <li>牛逼</li>
        <li>牛逼</li>
</ul>

定义列表

dt标签无空格，dd标签有空格，除此以外也无序号和图形

<dl>
    <dt>凉菜</dt>     
    <dd>拍黄瓜</dd> 
    <dt>炒菜</dt>
    <dd>小炒肉</dd>
</dl>

HTML元素对象——自布局元素——表格布局标签

<!--
  border：边框线长度
  cellspacing：表格间距
-->
<table border="1" cellspacing="0px">
  <!--表格标题-->
  <caption>Monthly savings</caption>
  <!--表格表头-->
  <thead>
    <tr>
      <th>Month</th>表头-自动加粗
      <th colspan="2" rowspan="2" align="center" valign="center">Savings</th>
    </tr>
  </thead>
   <!--表格内容-->
  <tbody>
    <tr>
      <td>January</td>
      <td>$100</td>
    </tr>
  </tbody>
  <!--表格表底-->
  <tfoot>
    <tr>
      <td>Sum</td>
      <td>$180</td>
    </tr>
  </tfoot>
</table>

表格整体元素属性：
在这里插入图片描述

表格内部元素属性：

colspan：占用列数→td c：占用实际列数，以当前行周边的列宽为准；tr会换行加表格
rowspan：占用行数→tr r：占用实际行数，以当前列周边的行高为准；td是不换行加表格（跨行的元素后面追加tr是以跨行元素左上角为准，向下挪一行）

HTML元素对象——练习题

骆子无悔

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
【前端基础】内容构建——HTML标签基础（利用元素对象构建页面骨架）

前端基础——基本概念HTML元素对象——元素标签是网页中视觉元素的基本对象，所有视觉元素通过排列、嵌套等组合方式，完成了；HTML元素属性——CSS样式用于对HTML元素进行精细的视觉效果的控制，比如：元素的基本大小、元素内字体的大小、元素的位置；每个HTML元素都一个默认的CSS样式，一般来讲我都会根据页面需要去控制HTML的样式；JS脚本：通常用于页面实现交互的效果，由用户点击、滑动或定时器触发等事件，完成页面上元素样式的变化（比如：显示与隐藏），以及元素中数据的改变（请求后台）实
复制链接

扫一扫