300字范文,内容丰富有趣,生活中的好帮手!
300字范文 > HTML基础-黑马程序员-web前端零基础

HTML基础-黑马程序员-web前端零基础

时间:2021-01-31 02:03:59

相关推荐

HTML基础-黑马程序员-web前端零基础

目录

1.1列表标签

1.1.1无序列表

1.1.2有序列表

1.1.3自定义列表

1.2表格标签

1.2.1表格标题和表头单元格标签

1.2.2合并单元格

1.3表单标签

1.3.1input系列标签

1.3.2input系列标签-文本框

1.3.3input系列标签-单选框-单选功能和默认选中

1.3.4input系列标签-文件选择

1.3.5input系列标签-按钮

1.3.6button按钮标签

1.3.7select下拉菜单

1.3.8textarea文本域标签

1.3.9label标签

1.4语义化标签

1.5字符实体

Summary:

这里的name是为了将选项归为一组,只能选一个

只有在select下拉菜单时,默认选中用selected,其他的都用checked,比如checkbox, radio

在文本框中用placeholder--这时显示的是有透明度的字,输入时没有影响

value中的内容会呈现出来,对输入有影响

type="button", "reset", "submit" - 定义按钮上的显示的文本

type="text", "password", "hidden" - 定义输入字段的初始值

type="checkbox", "radio", "image" - 用来提示输入者输入的类型

1.1列表标签

1.1.1无序列表

列表的每一项前默认显示圆点标识

<ul><li>lll</li><li>hhh</li></ul>

1.1.2有序列表

列表的每一项前有序号标识(1,2,3)

1.1.3自定义列表

dd前会默认显示缩进的效果

<dl><dt>个人信息</dt><dd>姓名</dd><dd>性别</dd></dl>

1.2表格标签

<table border="1px" width="500px"><tr><td>姓名</td><td>成绩</td></tr><tr><td>小米</td><td>98分</td></tr></table>

1.2.1表格标题和表头单元格标签

caption标签书写在table标签内部

th标签书写在tr标签内部

<table border="1" width="300"><caption><strong>学生成绩单</strong></caption><tr><th>姓名</th><th>成绩</th><th>评语</th></tr><tr><td>小明</td><td>99分</td><td>真棒</td></tr></table>

一个快捷键 Tab Shift+Tab就是退回四个空格

用这些标签,其实并没有什么效果,只是让浏览器更好识别

1.2.2合并单元格

将水平或垂直的多个单元格合并成一个单元格

左上原则:

上下合并——只保留最上的,删除其他

左右合并——只保留最左的,删除其他

<tr><td>小明</td><td rowspan="2">99分</td><td>真棒</td></tr><tr><td>小米</td><td>真棒</td></tr>

1.3表单标签

1.3.1input系列标签

input标签可以根据type属性值的不同,展示不同效果

文本框:<input type="text">

1.3.2input系列标签-文本框

text/password常用属性:

文本框:<input type="text" placeholder="请输入用户名">

1.3.3input系列标签-单选框-单选功能和默认选中

radio常用属性

性别: <input type="radio" name="sex">男 <input type="radio" name="sex" checked>女<br><input type="checkbox" checked>

1.3.4input系列标签-文件选择

file常用属性

<input type="file" multiple>

1.3.5input系列标签-按钮

按钮标签需要配合form标签使用

form使用方法:用form标签把表单标签一起包裹起来即可

<form action="">文本框:<input type="text" placeholder="请输入用户名"><br>性别:<input type="radio" name="sex">男 <input type="radio" name="sex" checked>女<br><input type="checkbox" checked><br><input type="file" multiple><br><input type="submit" value=""><input type="reset"><input type="button" value="普通按钮"></form>

action属性规定当提交表单时,向何处发送表单数据

1.3.6button按钮标签

<button>我是按钮</button><button type="submit">提交按钮</button><button type="reset">重置按钮</button>

1.3.7select下拉菜单

提供多个选项的下拉菜单

selected:下拉菜单的默认选中

<select name="" id=""><option value="">北京</option><option value="">上海</option><option value="" selected>苏州</option></select>

1.3.8textarea文本域标签

提供可输入多行文本的表单控件

colspan水平合并

rowspan垂直合并

文本域右下角

可进行拖拽,以此改变大小

<textarea name="" id="" cols="30" rows="10"></textarea>

1.3.9label标签

用于绑定内容与表单标签的关系

性别:<input type="radio" name="sex" id="nan"><label for="nan">男</label><label><input type="radio" name="sex">女</label><!-- 这里要把for删除掉 -->

1.4语义化标签

1.5字符实体

网页不认识多个空格,只认识一个

我在学&nbsp;&nbsp;&nbsp;空格

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。