网站导航
> 文章列表 > 第二天：HTML基础

第二天：HTML基础

网友: 文章列表 2024-03-21 23:43:40

第二天：HTML基础

今天要学习的内容是HTML基础，包含超链接、表格、列表、表单等

一、超链接

<a href=""></a>
属性：
Href= "要跳转的页面路径"
案例：
<a href="p1.html">跳转到今天的第一个页面</a>
<a href="../day02code/p1.html">跳转到今天的第二个页面</a>
//self 
表示当前页打开
<a href = "http://www.baidu.com" target="_self">跳转到百度</a> 
//blank 
表示新页面打开
<a href = "http://www.baidu.com" target = "_blank">跳转到百度</a>
//锚点的使用：href = "# + id 值"<a href = "#">跳转到顶部</a>    <a href = "#c1">跳转到指定id的标签位置</a>

二、表格

普通表格以及表格的语法

table标签：表示网页的开始和结束，表格中的所有内容都要写在这对标签中。
tr标签：表示表格中的一行 table row。
td标签：是真正存放数据的地方，一行有几个单元格就表示有几列 table datacell。
th标签：加粗的td标签。
thead标签：用于包裹表头，便于程序管理。
tbody标签：用于包裹表身，便于程序管理。

<!-- 表格 border-collapse:collapse 表示去掉表格默认的边框间距  --><table border="1px" style="border-collapse: collapse;"><!-- 表格标题 --><caption>鲜鱼价目表</caption><!-- 表头 --><thead><!-- 表格第一行 --><tr><th>序号</th><th>鱼的种类</th><th>价格</th></tr></thead><!-- 表内容 --><tbody><tr><td>1</td><td>草鱼</td><td>18.6</td></tr><tr><td>2</td><td>鲤鱼</td><td>28.9</td></tr></tbody></table>

不规则的表格

写在td元素中。
colspan = " n " 跨列，从当前单元格开始，向右合并n个单元格。
rowspan = “n” 跨行， 从当前单元格开始，向下合并n个单元格。
被合并的单元格一定得删掉。

<table border="1px"><tr><td colspan="2">1-1</td><!-- <td>1-2</td> --><td>1-3</td><td rowspan="3">1-4</td></tr><tr><td>2-1</td><td rowspan="2">2-2</td><td>2-3</td><!-- <td>2-4</td> --></tr><tr><td>3-1</td><!-- <td>3-2</td> --><td>3-3</td><!-- <td>3-4</td> --></tr></table>

注意事项
表格的大小是靠内容撑起来的。如果修改了某个单元格的高度，这一行单元的高度都会随之改变。
同理，如果修改了某个单元的宽度，这一列单元格的宽度都会随之改变

三、列表

有序列表和无序列表

    <body><!-- 有序列表 --><!-- start = 4 表示从4开始，默认值是1 --><!-- type = 1 指定编号的类型，默认值是1代表阿拉伯数字，还可以是a、A、i、I --><ol start="1" type="1"><!-- 列表项 --><li>把冰箱门打开</li><li>把大象塞进去</li><li>把冰箱门关上</li></ol><!-- 无序列表 --><!-- type的值: disc(实心圆)、circle(空心圆)、square(方块)、none(没有标识) --><ul type = "none"><li>唐三藏</li><li>猪八戒</li><li>孙悟空</li></ul></body>

列表的嵌套

ul 和 ol 的直接子元素必须是li 。
所以，所有被嵌套的内容都需要写在 li 中。

四、表单

特点

  • 提供了一些可视化的输入空间。
  • 会自动收集整理用户输入的内容，并提交给服务器。

语法和案例

<!-- action 服务器地址、目前可以先写一个#，表示提交到当前页面 --><form action="#"><!-- type：text（普通文本输入框）、password（密码框）、submit（提交按钮）、reset（重置按钮） --><!-- 属性：value（默认值）、name（命名）、placeholder(hint或提示语)、maxlenght（最大文本长度）-->                 用户名<input type="text" value="jack"  name="account" placeholder="请输入用户名" maxlength="11"/><br/><!-- 密码框 -->密码<input type="password" name="password" placeholder="请输入密码" maxlength="6"/><br /><!-- 提交按钮--><input value="我是提交按钮" type="submit"/><!-- 重置按钮 --><input value="我是提交按钮" type="reset"/><!-- H5新出的标签，专指按钮 --><button>我是一个按钮</button><!-- 单选按钮  name 是表单元素名字，这里性别单选按钮必须有相同的名字 name 才可以实现多选1 -->性别<input type="radio" name="sex" value="男"/>男 <input type="radio" name="sex" value="女"/>女 <br /><!-- 复选框按钮 -->爱好<input type="checkbox" name="hobby"/>吃饭 <input type="checkbox"  name="hobby" checked />睡觉 <input type="checkbox"  name="hobby" />打豆豆 <br /><!-- 可点击的图片 --><input  type="image" src="1.jpg" width="100px" height="100px" /><br /><!-- 文件域  上传文件 -->上传头像<input  type="file" /><!-- H5新出的标签，选择数字，页码效果 -->年龄<input type="number" max="10" min="1" name="age" step="1"/><!-- 选择色值 -->幸运色<input type="color"/><!-- 日期选择器 年月日 -->选择日期<input type="date"/><!-- 日期选择器 年月 -->月份<input type="month"/><!-- 日期选择器 年周 -->考试周<input  type="week"/><!-- 搜索框，提供一个x图标 -->搜索<input  type="search"/></form>

input元素

公共属性：
type：设置 input 元素的类型，默认值是 text
value：用来保存用户输入的值，用于后期提交给服务器。如果控件是按钮，value用来设置按钮上显示的文本
name：为控件起名字，注意：form 表单必须起 name 否则提交不了数据（1）文本框与密码框
type = ”text“ //普通文本输入框
type = "password" //密码框
属性：
maxlength = "5" //设置输入数据的最大长度
placeholder = “请输入用户名”  //提示文字
value = "jack" //表示给当前输入框设置了一个默认值 jack，这个属性默认为空，用户输入什么值，value就保存什么值（2）按钮
type = "submit" //提交按钮，会自动收集输入的数据提交
type = "reset"  //重置按钮，会将表单的控件恢复到初始状态，注意不是清空
type="button"   //普通按钮，后期会绑定JS代码（例如点击事件等等）
注意：按钮的 value 属性是用来设置按钮上显示的文字

lable标签

<lable> 标签为 input 元素定义标注（标签）
<lable> 标签用于绑定一个表单元素，当点击 <lable> 标签内的文本时，浏览器就
会自动将焦点（光标）转到或者选择对应的表单元素上，用来增加用户体验语法：
<lable for = "sex">男</lable>
<input type = "radio" name = "sex" id = "sex">
核心：<lable> 标签的 for属性 应当与相关元素的 id属性相同案例：
<label for="private">隐私政策：</label> <input  type="checkbox" id="private"/>

select 表单元素

使用场景：在页面中，如果有多个选项让用户选择，并且想要节约页面空间时，我们可以使用 标签控件定义 下拉列表。

案例：籍贯：<select><option>山东</option><option>北京</option><option>江西</option><option>天津</option><option selected >火星</option><option>三体星</option></select>
注意：
//1、<select>中至少包含一对 <option>
//2、在<option>中定义 select = "selected" 时，当前项即为默认选中项

textarea 文本域表单元素

使用场景：当用户输入内容较多的情况下，就不能使用文本框表单了，此时可以使用 标签。
在表单元素中， 标签是用于定义多行文本输入的控件。

  意见反馈案例：<textarea rows="3" cols="20"> 我是今日反馈的默认内容，rows（行数），cols（每行的文字个数）
</textarea>

浮动框架

<!-- frameborder = "0" （移除边框） , scrolling = "0"（移除拖拽条）-->
<iframe frameborder = "0" scrolling = "no" width="500px" height="400px" 
src="https://www.codeboy.com/xuezi/admin/login.html"></iframe>

结构化标签

h5新增了带有结构语义的标签，来取代div，虽然在用户看来和之前使用 div 没有区别，但是带语义的标签可以增加代码的可读性，很方便的实现页面各个部分的划分，让网络爬虫可以更快找到
但注意：低版本的浏览器会不兼容

    <!-- 传统的写法 --><!-- div 块级元素（父容器），默认宽度是父元素宽度的100%，
高度是靠内容撑起来，或者自设高度 -->
<div class="ye-tou">页面头部</div>
<div class="dao-hang">导航</div>
<div class="zhu-ti">主体内容</div>
<div class="ce-bian-lan">侧边栏</div>
<div class="ye-wei">页尾</div><!-- 结构化标签 -->
<header>页面头部</header> //定义网页的头部或者某个区域的头部
<nav>导航</nav>//定义网页的导航栏
<section>页面主体主体内容<article>第一篇文章</article>//定义与文字相关的内容，比如文章、论坛、回帖<article>第二篇文章</article>
</section>
<aside>侧边栏</aside>//定义网页的侧边栏，比如分类、广告
<footer>页尾</footer> //定义网页的底部或者某个区域的底部

文字对齐方式（涉及CSS的样式 )

div {width: 100px;height: 40px;/* 水平居右 */text-align: right;/* 水平居左 */text-align: left;/* 水平居中 */text-align: center;/*行高设置为div的高度，就可以实现垂直居中*/line-height: 40px;
}

不识坎离颠倒，谁能辨，金木沉浮，与大家共勉！

网络标签：

相关问题