笔记HTML

最新推荐文章于 2024-08-31 20:49:28 发布

即昊槐哼

最新推荐文章于 2024-08-31 20:49:28 发布

阅读量71

点赞数

分类专栏：笔记文章标签： html5 html pygame

本文链接：https://blog.csdn.net/weixin_58982033/article/details/120817818

版权

笔记专栏收录该内容

2 篇文章 0 订阅

订阅专栏

本文详细介绍了HTML中的各种元素类型，包括文本框、密码框、单选按钮、多选框、下拉列表、文本域、提交和重置按钮等。同时，讲解了CSS样式的选择器类型，如标签选择器、类别选择器、ID选择器等，并展示了如何设置背景、超链接样式、字体样式以及盒子模型。此外，还讨论了CSS中的定位、过渡和阴影效果，以及如何处理长单词和URL的换行问题。内容涵盖了前端开发的基础知识，对于初学者非常有帮助。

摘要由CSDN通过智能技术生成

1、<input type="text">文本框
2、<input type="password">密码框
3、<input type="radio" name="1">XXX<inputtype="radio" name="1">XXX单选框（checked="checked"默认选择）
4、<input type="checkbox">xxx<inputtype="checkbox">xxx<inputtype="checkbox">xxx<inputtype="checkbox">xxx<inputtype="checkbox">xxx多选框（ checked="checked"默认选择）
5、<select>
<option>xxx</option>
<option>xxx</option>
<option>xxx</option>
<option>xxx</option>
<option>xxx</option>
<??lect>下拉列表（ selected="selected"默认选择）
6、<textarea rows="2" cols="30"></textarea>文本域
7、<input type="submit" value="提交"><inputtype="reset" value="重置">提交和重置按钮
8、      空格
9、<input type="number">?用于应该包含数字值的输入字段<input type="number" name="quantity" min="1" max="5">
10、<input type="date">?用于应该包含日期的输入字段<input type="date" name="bday">Enter a date before 1980-01-01:
  <input type="date" name="bday" max="1979-12-31"><br>
  Enter a date after 2000-01-01:
  <input type="date" name="bday" min="2000-01-02"><br>
11、<input type="color">?用于应该包含颜色的输入字段Select your favorite color:
  <input type="color" name="favcolor">
12、<input type="range">?用于应该包含一定范围内的值的输入字段<input type="range" name="points" min="0" max="10">
13、<input type="month">?允许用户选择月份和年份 Birthday (month and year):
  <input type="month" name="bdaymonth">
14、<input type="week">?允许用户选择周和年
Select a week:<input type="week" name="week_year">
15、<input type="time">?允许用户选择时间（无时区）
Select a time: <input type="time" name="usr_time">
16、<input type="datetime">?允许用户选择日期和时间（有时区）
Birthday (date and time):  <input type="datetime" name="bdaytime">
17、<input type="datetime-local">?允许用户选择日期和时间（无时区）
Birthday (date and time):  <input type="datetime-local" name="bdaytime">
18、<input type="email">?用于应该包含电子邮件地址的输入字段E-mail:   <input type="email" name="email">
19、<input type="search">?用于搜索字段（搜索字段的表现类似常规文本字段）
Search Google:  <input type="search" name="googlesearch">
20、<input type="tel">?用于应该包含电话号码的输入字段，目前只有 Safari 8 支持 tel 类型。Telephone: <input type="tel" name="usrtel">
21、<input type="url">?用于应该包含 URL 地址的输入字段。
根据浏览器支持，在提交时能够自动验证 url 字段。
某些智能手机识别 url 类型，并向键盘添加 ".com" 以匹配 url 输入。
Add your homepage:  <input type="url" name="homepage">
22.text-transform: capitalize;每个字母开头都大写
选择器  六类
1、标签选择器p{color:red;font-size:20px}div{color:red;font-size:20px}
2、类别选择器.one{color:red;font-size:20px}.two{color:red;font-size:20px}   <p class="one">
3、ID选择器#one{color:red;font-size:20px}#two{color:red;font-size:20px}   <p id="one">
4、嵌套声明p span{color:red;font-size:20px}     <p><span>19软件08班</span>的期中成绩是最棒的！</p>
5、集体声明h1,p,h3,body{text-align:center;color:blue}
6、全局声明*{text-align:center;color:blue}

样式     三类
行内样式<p style="text-align:center;color:blue">
内嵌样式<head><style>p span{color:red;font-size:20px}</style></head>
外联样式<head><link rel="stylesheet" href="1.css"></head>
css背景样式
body{background-color:red}/{background-image:url("1.jpg");background-repeat:no-repeat/repeat-x/repeat-y}/{background:red rul("1.jpg") repeat-x}
超链接样式
a{color:red;text-decoration:none;}默认状态
a:link{color:blue;}未被访问状态
a:visited{color:green}用户已访问
a:hover{color:pink}鼠标位于链接上方
a:active{color:black}链接被点击时的状态
font
{color/font-size/font-family/font-style/font-wight/}
盒子

hidden 超出部分不可见
scroll    显示滚动条
auto      如果有超出部分，显示滚动条

border属性
border-width： px、 thin、medium、thick
border-style： dashed、dotted、solid、double
border-color：颜色
border:
width style color

            /*border-top-color: pink;
            border-bottom-color: aqua;
            border-right-color: coral;
            border-left-color: gold;*/
          /*  border-color: red green;
          左右颜色green上下red
          */
         /*   border-color: red green yellow;
         上红左右绿下黄*/
            /*border-color: red green yellow black;
            上左下右*/

padding:20px(四个方法的内边距都为20px)
padding-top:20px(当个盒子的上内边距为20px)
padding:20px 10px  5px 30px(上为20，右为10，下为5，左为30)
padding:20px 10px  5px(上为20，右为10，下为5，左为10)
padding:20px 10px(上为20，右为10，下为20，左为10)
margin同上
margin的合并：垂直方向合并，水平方向不合并

图片、文字水平居中
text-align:center;
div水平居中
margin:0 auto;
浏览器自动计算
margin属性
垂直外边距合并

水平居中auto
盒子定位与转换
从上到下，从左到右，输出文档内容
block从上到下独占一行
<div> 、<p>、<h1>、<ul>、 <ol>、 <li>、 <table>、<form>
inline 从左到右占据一行
<a>、<span>
inline-block <img>
常见的inline-block元素 <img>
常见的inline元素 <span>、<a>
常见的block元素
<div>、<p>、<h1>...<h6>、<ol>、<ul>、<table>、<form>

clear
both，清除左右两边的浮动。
left 和 right 只能清除一个方向的浮动。
none 是默认值，只在需要移除已指定的清除值时用到。

一、position
1、固定定位fixed
2、相对定位relative
3、绝对定位absolute
二、位置
1、top 2、right 3、bottom   4、left
三、叠放次序
z-index（取值大的在上面，取值小的在下面）

text-shadow属性
圆角边框
border-radius圆角边框（border-top-left-radius 左上角的形状
bord-bottom-left-radius 左下角的形状
border-bottom-right-radius 右下角的形状
box-shadow阴影
text-shadow属性
描边h1{
color:white;
text-shadow:2px 2px 4px #000;
h1{
color:white;
text-shadow:2px 2px 4px #000;}浮雕

word-wrap属性
normal
break-word
允许长单词、URL强制进行换行

字体文件后缀适用于浏览器
.TTF或.OTF Firefox 、 Safari 、 Opera
.EOT Internet Explorer 4.0+
.SVG Chrome 、 IPhone
.WOFF Chrome 、 Firefox
一、过渡  transition属性
transition-property（属性名|all 对哪个属性进行变化）
transition-duration（持续时间）
transition-timing-funct

即昊槐哼

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
笔记HTML

1、<inputtype="text">文本框2、<inputtype="password">密码框3、<inputtype="radio"name="1">XXX<inputtype="radio"name="1">XXX单选框（checked="checked"默认选择）4、<inputtype="checkbox">xxx<inputtype="checkbox">xxx<inputtype="checkb...
复制链接

扫一扫

专栏目录