HTML5+CSS3(一二)
来自与智慧职教 整理笔记
一.开发环境的搭建
https://www.dcloud.io/hbuilderx.html
1.1 新建网页项目
文件–>新建–>项目–>HTML项目
1.4 index.html内容
image-20230228141951689
html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>网页标题</title>
</head>
<body>
<!-- 这是主体的开始 Ctrl+? 可以快速注释-->
<p>这是内容</p>
<!-- 这是主体的结束 -->
</body>
</html>二.
2.1 滚动的文字
2.1滚动的文字
behavior:设置文本在maruqee元素内如何滚动.可选值有
scroll:表示由一端滚动到另一端,会重复
slide:表示由一端滚动到另一端,不会重复
alternate:表示在两端之间来回滚动
bgcolor:通过颜色名称或十六进制值设置背景颜色.
direction:设置marquee内文本滚动的方向.
- left:左
- right:右
- up:上
- down:下
height:以像素或百分比值设置高度.
width:以像素或百分比值设置宽度.
scrollamount:设置活动字幕滚动速度,范围1~6,数字越大越快.默认值为6.
onMouseOut=”this.start()”:用来设置鼠标移出该区域时继续滚动.
onMouseOver=”this.stop()”:用来设置鼠标移入该区域时停止滚动.
2.2 标签
html
<a href="http://www.sina.com.cn">新浪网</a>
<a href="http://www.baidu.com" target="_blank" >百度</a>
<a href="2.1滚动的文字.gif">本地图片</a>2.3 文字有关的标签
html
<h1>H1一级标题</h1>
<h2>H2二级标题</h2>
<h3>H3三级标题</h3>
<h4>H4四级标题</h4>
<h5>H5五级标题</h5>
<h6>H6六级标题</h6>
<p>这是p默认正常段落</p>
<p>这是p<span style="color: blue;">span分离段落</span>2</p>
<p>这是p<span style="font-size:36px;"><i>i斜体段落</i> 正常文字 默认文字</span> </p>
<p>em标签强调 b加粗 strong超强调</p>
<a href="https://www.w3school.com.cn/charsets/ref_html_symbols.asp" target="_blank">转义字符</a>2.4 文字样式
image-20230228142101717
html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>文字</title>
<style>
.word{
word-spacing: 50px;
color: red;
}
.letter{
letter-spacing: 30px;
color: blue;
}
.underline{
text-decoration: underline;
}
.indent{
text-indent: 2em;
}
.line-through{
text-decoration: line-through;
}
.overline{
text-decoration: overline;
}
</style>
</head>
<body>
<p><span class="word">Some people</span> have very good memories</p>
<p><span class="letter">Tony Stark</span> is the Iron Man</p>
<p><span class="word">有些人</span>有非常好的记忆力</p>
<p><span class="letter">托尼斯塔克</span>是钢铁侠</p>
<p>登鹳雀楼</p>
<h3>左对齐</h3>
<p style="width:600px;text-align: left;">白日依山尽，黄河入海流。</p>
<h3>右对齐</h3>
<p style="width:600px;text-align: right;">欲穷千里目，更上一层楼。</p>
<h3>两端对齐</h3>
<p style="width: 600px;text-align:justify">床前明月光，疑是地上霜。</p>
<h3>下划线</h3>
<p><span class="underline">举头</span>望明月，低头思故乡。</p>
<h3>首行缩进</h3>
<p><span class="indent">春眠</span>不觉晓，处处闻啼鸟。</p>
<h3>删除线</h3>
<p><span class="line-through">夜来</span>风雨声，花落知多少。</p>
<p><span class="overline">顶头线</span>顶头线顶头线顶头线顶头线</p>
</body>
</html>2.5 图片的使用
html
<h1>img标签的使用</h1>
<img src="HTML5_CSS3_智慧职教(一二)/2.1滚动的文字.gif" alt="图片a"/>
<img src="b.jpg" alt="图片b"/>
<img src="c.jpg" alt="图片c" width="300px"/>
<!--注意在图片设置大小的时候，一般只设置宽度，如果同时设置高度，可能会比例失调-->
<img src="img/02.jpg" border="10" alt="四大发明" usemap="map" title="四大发明">
<map name="map">
<area shape="rect" coords="58，62， 138， 157" href="#"/>
<!--前面两个坐标为左上角，后面两个为右下角-->
<area shape="rect" coords="155， 62， 235， 157"href="#" />
<area shape="circle" coords="305， 116， 55" href=""/>
<area shape="circle"coords="416， 110， 55" href="" />
<!--前面两个为圆心位置，后面为半径->2.8 HTML表单基础
image-20230228142200030
html
<form action="">
<ul>
<li>用户: <input type="text" name="user"/></li>
<li>密码: <input type="password" name="pwd" maxlength="15"/></li>
<li>
<label><input type="radio" name="sex" value="male">男性</label>
<label><input type="radio" name="sex" value="female">女性</label>
</li>
<li>
<label><input type="radio" name="organization" value="people">群众</label>
<label><input type="radio" name="organization" value="gcd">团员</label>
</li>
<li>
<label><input type="checkbox" name="hobby">篮球</label>
<label><input type="checkbox" name="hobby">足球</label>
<label><input type="checkbox" name="hobby">羽毛球</label>
<label><input type="checkbox" name="hobby">乒乓球</label>
</li>
<li>
<select name="" id="">
<option value="1">北京</option>
<option value="1">上海</option>
<option value="1">广州</option>
<option value="1">深圳</option>
</select>
</li>
<li><input type="file" name="yourfile"></li>
<li>
<label for="email">email:</label>
<input type="email" required autofocus name="email" id="email" placeholder="xx@xx.com">
</li>
<li>
<label for="username-search">生日:</label>
<input type="date" min="1980-01-01" name="birthday" id="birthday" value="2008-08-08">
</li>
<li>
<label for="blog">博客:</label>
<input type="url" name="blog" placeholder="http://xxx" id="blog">
</li>
<li>
<label for="mobile">手机:</label>
<input type="tel" name="mobile" pattern="^1[3458]{1}[0-9]{9}$" id="mobile" placeholder="13800000000">
</li>
<li>
<label for="" id="label-wording-year" for="label-working-year">工作年限:</label>
<input type="range" min="1" max="20" name="slider" name="working-year" id="working-year" placeholder="您的工作年限" value="3">
</li>
<li>
<label for="age">年龄:</label>
<input type="number" name="age" id="age" autocomplete="数字">
</li>
<li><input type="submit" value="提交"></li>
<li><input type="reset" value="重置"></li>
</ul>
</form>2.10 表单的验证
image-20230228142232353
html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>文字</title>
<style>
li{
margin:15px 0px;
list-style: none;
}
</style>
</head>
<body>
<form action="#">
<ul>
<li>
<label for="">必填:</label>
<input type="text" required autofocus name="noname" id="noname" placeholder="必填">
</li>
<li>
<label for="email">邮箱:</label>
<input type="email" required name="email" id="email" placeholder="xx@xx.com">
</li>
<li>
<label for="">网址:</label>
<input type="url" requred placeholder="http://xxxx">
</li>
<li>
<label for="birthday">日期:</label>
<input type="date" required name="birthday" id="birthday" placeholder="2008-01-01">
</li>
<li>
<label for="number">数字:</label>
<input type="number" required name="number" placeholder="数字">
</li>
<li>
<label for="money">金额:</label>
<input type="text" required name="money" id="money" pattern="^[0-9]+(.[0-9]{2})?$">
</li>
<li>
<label for="moble">手机:</label>
<input type="tel" required name="moble" placeholder="13800000000">
</li>
<li>
<label for="dates">日期:</label>
<input type="date" required name="dates" id="dates" >
</li>
<li><input type="submit" value="提交"></li>
</ul>
</form>
</body>
</html>
